html+css+javascript,用date完成，距离某一天还有多少天
一. 用date完成距离某一天还有多少天
1.图片展示
注：因为不是视频，所以看不到每秒更新效果
二.HTML部分代码
<body>
<h1 class="title">距离双十二，还有</h1>
<div class="time-item">
<span><span id="day">00</span>天</span>
<strong><span id="hour">00</span>时</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
</body>
这是简单的html代码，我就不多说了，有什么不懂的可以留言，我为你解答。
三.CSS部分
<style>
* {
margin: 0;
padding: 0;
}
.time-item {
width: 430px;
height: 45px;
margin: 0 auto;
}
.time-item strong {
background: orange;
color: #fff;
line-height: 49px;
font-size: 36px;
font-family: Arial;
padding: 0 10px;
margin-right: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.time-item>span {
float: left;
line-height: 49px;
color: orange;
font-size: 32px;
margin: 0 10px;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 260px;
height: 50px;
margin: 200px auto 50px auto;
}
</style>
这是简单的CSS代码，我就不多说了，有什么不懂的可以留言，我为你解答。
四.js部分
1.方法一
<script>
//获取DOM标签
var day = document.getElementById('day');
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
//计时器setInterval
setInterval(function () {
//new Date()获取本地时间
var today = new Date();
//添加结束时间
var stopTime = new Date("2020/12/12 00:00:00");
//获取时间戳（毫秒）
var zhuanyu = stopTime.getTime() - today.getTime();
// 方法一
//转换为天数
zhuanD = parseInt(zhuanu / (60 * 60 * 24 * 1000));
//减去天所用的毫秒数
D = parseInt(zhuanu) - parseInt(zhuanD * 60 * 60 * 24 * 1000);
//天所用剩余的毫秒数转换成小时
zhuanH = parseInt(D / (60 * 60 * 1000));
//减去天、小时所用的毫秒数
H = D - zhuanH * 60 * 60 * 1000;
//天、小时所用剩余的毫秒数转换成分钟
zhuanM = parseInt(H / (60 * 1000));
//减去天、小时、分钟所用的毫秒数
M = H - zhuanM * 60 * 1000;
//天、小时、分钟所用剩余的毫秒数转换成秒
zhuanS=parseInt(M/(1000))
//给html中的天赋值
day.innerHTML = zhuanD;
hour.innerHTML = zhuanH;
minute.innerHTML = zhuanM;
second.innerHTML = zhuanS;
//计时器setInterval 每1000毫秒调用一次函数function
}, 1000)
</script>
2.方法二
<script>
//获取DOM标签
var day = document.getElementById('day');
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
//计时器setInterval
setInterval(function () {
//new Date()获取本地时间
var today = new Date();
//添加结束时间
var stopTime = new Date("2020/12/12 00:00:00");
//获取时间戳（毫秒）
var shenyu = stopTime.getTime() - today.getTime();
//方法二
console.log(shenyu);
//转化为秒
var zhuanHS = shenyu / 1000;
shengyuD = parseInt(zhuanHS / (60 * 60 * 24));//转换为天
//计算天的余数为小时
shengyuH = parseInt(zhuanHS / (60 * 60) % 24);
//计算小时的余数为分钟
shengyuM = parseInt(zhuanHS / (60) % 60);
//计算分钟的余数秒
shengyuS = parseInt(zhuanHS % 60)
day.innerHTML = shengyuD;
hour.innerHTML = shengyuH;
minute.innerHTML = shengyuM;
second.innerHTML = shengyuS;
}, 1000)
</script>
以上是完整的代码，都打上了备注，如果还有不懂的可以留言哦，或者有哪出错的，请帮忙纠正一下哟，希望能帮到你们。
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
