实现一个倒计时功能。
在输入框中输入一个日期，点击“开始倒计时”按钮后，页面会显示从该日期到当前时间的倒计时。具体来说，代码中的<html>标签定义了整个页面的根元素，<head>标签包含了页面的元数据和样式表链接，<body>标签包含了页面的内容。在<style>标签中，定义了两个CSS样式：
#countdown：设置了倒计时文本的字体大小、颜色和背景图片。body：设置了网页的背景图片。
在<script>标签中，定义了一个名为startCountdown()的JavaScript函数。该函数首先获取用户输入的日期，然后计算出距离该日期的时间差（以毫秒为单位），并将其存储在变量countdownDate中。接下来，使用setInterval()函数创建一个定时器，每隔1秒钟执行一次回调函数。在回调函数中，首先获取当前时间，并计算与目标日期的时间差。然后，将时间差转换为天、小时、分钟和秒的形式，并将结果显示在页面上的倒计时元素中。同时，生成一个随机颜色并将其应用到倒计时元素的文本上。最后，检查时间差是否小于0，如果是，则停止定时器，并在页面上显示倒计时结束的信息。以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#countdown {
font-size: 48px;
color: #000;
background-image: url(../);
}
body{
background-image: url(./11.png);
}
</style>
</head>
<body>
<h1>倒计时页面</h1>
<label for="date">输入日期：</label>
<input type="date" id="date">
<button onclick="startCountdown()">开始倒计时</button>
<h2 id="countdown"></h2>
<script>
function startCountdown() {
var inputDate = document.getElementById("date").value;
var countdownElement = document.getElementById("countdown");
var countdownDate = new Date(inputDate).getTime();
// 定义一个变量，设置一个定时器
var x = setInterval(function () {
var now = new Date().getTime();
var distance = countdownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 将倒计时显示在页面上
countdownElement.innerHTML = days + " 天 " + hours + " 小时 "
+ minutes + " 分钟 " + seconds + " 秒 ";
// 设置颜色为随机色
var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
countdownElement.style.color = randomColor;
// 检查倒计时是否结束
if (distance < 0) {
// 停止计时
clearInterval(x);
// 显示倒计时结束信息
countdownElement.innerHTML = "倒计时已结束";
// 将文字颜色改为黑色
countdownElement.style.color = "#000";
}
}, 1000);
}
</script>
<p id="time"></p>
</body>
</html>
