先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<H1>我的WEB页面</H1>
<table border="2px" bgcolor="#7fffd4">
<tr>
<th colspan="2">
获取当前时间,如果在上午,返回good morning;如果在下午, 返回 good afternoon
</th>
</tr>
<tr>
<script>
function sayHi () {
// 获取当前时间
var current_time = new Date();
console.log(`当前时间:${current_time}`);
if (current_time.getHours() < 12) {
document.getElementById("sayHi").innerHTML = current_time.toString() + ":good morning";
} else {
document.getElementById("sayHi").innerHTML = current_time.toString() + ":good afternoon";
}
}
</script>
<td style="width: 20%;">
<button type="button" onclick="sayHi()">获取问候语</button>
</td>
<td style="width: auto">
<p id="sayHi"></p>
</td>
</tr>
</table>
</body>
</html>
通过指定不为空的单元格所占表格宽度比例,实现空单元格的占位