以下是倒计时的代码块,可复制哦. 我用vscode写得
* 倒计时的日期可以自定义,var d622 = new Date(2023, 5, 22)处日期改成你想要的日期,还有连接字符串时,改一下汉字即可,注释有.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>距离端午还有几天</title>
</head>
<body>
<h1 id="time"></h1>
<script>
// 本题是以秒单位计算的
// 先new出是从哪一天开始倒计时,此处月份默认加1,若想得到6月份,在new时月份写5即可
//获取端午是2023年6月22日
var d622 = new Date(2023, 5, 22);
// 获取到html网页中的time元素
var time = document.getElementById("time");
// 定时器:
// 本题是周期性定时器：间隔一定的时间，自动的做某件事情 setInterval(函数名，间隔时间)
setInterval(function () {
var date = new Date();
var timespan = Math.floor(d622.getTime() - date.getTime()) / 1000;
// 一天：一天有24小时，一小时60分钟，一分钟60秒,依次转换
var days = Math.floor(timespan / (60 * 60 * 24));
var left = timespan % (60 * 60 * 24);
var hours = Math.floor(left / (60 * 60));
left = left % (60 * 60);
var minutes = Math.floor(left / 60);
var seconds = Math.floor(left % 60);
// 连接字符串,如果倒计时日期有变,把str中的:"距离端午还有："这部分汉字改一下即可
var str = "距离端午还有：" + days + "天" + hours + "时" + minutes + "分" + seconds + "秒";
// 用dom对象模型,操作元素内容
time.innerHTML = str;
}, 1000);
</script>
</body>
</html>
附赠运行快捷键设置:
1.如果用vscode写代码,可以打开vscode,点击左下角设置(图案像个齿轮)
2.点击快捷键设置-----输入框输入 Live Server: Open with Live Server(用浏览器打开查看运行效果)
3.点击命令栏前面的编辑----输入自己习惯的快捷键组合---enter回车就可以了.
感受到我的细心了吧,记得关注,有想问的问题可以留言,我会持续更新哦.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
