倒计时特效原理
1.用到date()对象中的一些方法。
获取当前时间的总时间戳
var nowTime=new Date();
获取预期时间也就是从活动开始日期
var inputTime = +new Date(‘2022-11-15 18:00:00’);
用未来时间戳减去当前时间戳得到总时间
2.以下是具体代码
css代码
<style>
div {
position: absolute;
top: 100px;
left: 100px;
/* border: 1px solid red; */
}
div span {
width: 50px;
height: 50px;
/* border: 1px solid pink; */
display: inline-block;
margin-left: 15px;
text-align: center;
line-height: 50px;
color: #fff;
background: #000;
}
</style>
html标签代码
<body>
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
</body>
js代码
<script>
var hour = document.querySelector(".hour");
var minute = document.querySelector(".minute");
var second = document.querySelector(".second");
var inputTime = +new Date('2022-8-15 18:00:00'); //返回用户输入事件总的毫秒数
countDown();//先调用这个函数为了防止第一次刷新的时候有一秒的空白
setInterval(countDown,1000);
function countDown() {
var newTime = new Date();
var times = (inputTime - newTime) / 1000; //到预定时间剩余的总毫秒数
// var d = parseInt(times / 60 / 60 / 24);
// d = d < 10 ? "0" + d : d;
var h = parseInt((times / 60 / 60) % 24);
h = h < 10 ? "0" + h : h;
hour.innerHTML = h;
var m = parseInt((times / 60) % 60);
m = m < 10 ? "0" + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? "0" + s : s;
second.innerHTML = s;
}
</script>