案例~时间倒计时

最新推荐文章于 2024-08-17 14:58:02 发布

时光岁月

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量99

点赞数 1

文章标签： html css dreamweaver javascript

本文链接：https://blog.csdn.net/2303_77451325/article/details/130862667

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body{

height: 100%;

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

}

.box{

width: 800px;

color: #fff;

border: 2px solid #fff;

text-align: center;

}

.box p{

font-size: 24px;

}

.box p span{

color: red;

}

</style>

</head>

<body>

<p>

距离<span class="to-date">2024-01-01</span>还剩

<span class="rest-year">0</span>年

<span class="rest-month">00</span>月

<span class="rest-date">00</span>日

<span class="rest-hour">00</span>时

<span class="rest-minute">00</span>分

<span class="rest-second">00</span>秒

</p>

</div>

// 获取元素

var toDate = document.querySelector('.to-date');

var restYear = document.querySelector('.rest-year');

var restMonth = document.querySelector('.rest-month');

var restDate = document.querySelector('.rest-date');

var restHour = document.querySelector('.rest-hour');

var restMinute = document.querySelector('.rest-minute');

var restSecond = document.querySelector('.rest-second');

function formDate(date) {

var y = date.getFullYear(); //2026

var m = date.getMonth() + 1; //5

var d = date.getDate(); //5

// 补充0

if(m < 10) m = "0" + m;

if(d < 10) d = "0" + d;

// 加-

return `${y}-${m}-${d}`;

}

function changCount(date){

var now = new Date(); //当前时间

toDate.innerHTML = formDate(date);

// 求两个时间之间的差“毫秒数”

var ms = date.getTime() - now.getTime();

// 一年有多少毫秒

var yms = 365.5 * 24 * 60 * 60 * 1000;

// 求出剩余的年数

var ry = Math.floor(ms / yms);

// 求月

var mms = 30 * 24 * 60 * 60 * 1000;

var rm = Math.floor(ms % yms / mms);

// 求天

var dms = 24 * 60 * 60 * 1000;

var rd = Math.floor(ms % yms % mms / dms);

// 时分秒

var hms = 60 * 60 * 1000;

var rh = Math.floor(ms % yms % mms % dms / hms);

var minms = 60 * 1000;

var rMin = Math.floor(ms % yms % mms % dms % hms / minms);

var rs = Math.floor(ms % yms % mms % dms % hms % minms / 1000);

// 渲染

restYear.textContent = ry;

restMonth.textContent = rm;

restDate.textContent = rd;

restHour.textContent = rh;

restMinute.textContent = rMin;

restSecond.textContent = rs;

}

var tDate = new Date(2026,04,05,13,24,59); //目标时间

changCount(tDate); //初始解析渲染时间

var timer = setInterval(function () {

changCount(tDate);

},1000);

window.onunload = function () {

clearInterval(timer);

}

</script>

</body>

</html>

时光岁月

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
案例~时间倒计时

2024-01-01</span>还剩。<span class="rest-minute">00</span>分。<span class="rest-second">00</span>秒。<span class="rest-month">00</span>月。<span class="rest-date">00</span>日。<span class="rest-hour">00
复制链接

扫一扫