临近春节,写一个倒计时的demo,供大家参考,有点跑马灯效果哦
普通版
样式 #s1,
#s2,
#s3,
#s4,
#s5,
#s6,
#s7 {
font-size: 40px;
font-weight: bold;
display: block;
text-align: left;
margin-left: 200px;
}
内容与脚本
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span>
<span id="s5"></span>
<span id="s6"></span>
<span id="s7"></span>
<span id="s8"></span>
<script>
function fn(cs1, cs2, cs3) {
var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
function generateMixed(n) {
var res = "";
for (var i = 0; i < n; i++) {
var id = Math.ceil(Math.random() * 16);
res += chars[id];
}
return res;
}
var num = generateMixed(6);
var oSpan2 = document.getElementById(cs1);
var nDate2 = new Date(cs2);//修改需要倒计时的时间
showTime();
// setInterval(showTime, 1000);
function showTime() {
var oDate = new Date();//获取当地显示器的时间
var time = Math.floor((nDate2 - oDate) / 1000);
var d2 = Math.floor(time / 86400);
var h2 = Math.floor(time % 86400 / 3600);
var m2 = Math.floor(time % 86400 % 3600 / 60);
var s2 = time % 60;
oSpan2.innerHTML = "距离" + cs3 + "还有:" +
d2 + '天' + h2 + '时' + m2 + '分' + s2 + '秒';
}
oSpan2.style.color = "#" + num;
};
this.fn('s1', '2021-02-09 00:00:00', '2021年春节');
this.fn('s2', '2021-04-03 00:00:00', '2021年清明节');
this.fn('s3', '2021-05-01 00:00:00', '2021年劳动节');
this.fn('s4', '2021-06-12 00:00:00', '2021年端午节');
this.fn('s5', '2021-09-19 00:00:00', '2021年中秋节');
this.fn('s6', '2021-10-01 00:00:00', '2021年国庆节');
this.fn('s7', '2022-02-01 00:00:00', '2022年春节');
(function () {
window.setTimeout(() => {
window.location.reload()
}, 1000)
})()
</script>