倒计时案例
相信大家经常看到电商网站做活动时,会在旁边写上倒计时活动还有多长时间结束。所以今天也来写个小案例,然后我自己的理解来分析一下。
示例
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>
css样式
<style>
* {
margin: 0;
padding: 0;
}
.time-item {
width: 430px;
height: 45px;
margin: 0 auto;
}
.time-item strong {
background: skyblue;
color: palevioletred;
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: palevioletred;
font-size: 32px;
margin: 0 10px;
}
.title {
width: 260px;
height: 50px;
margin: 200px auto 50px auto;
}
</style>
没有写js之间的样子
js代码
<script>
//先封装个函数,用DOM来获取html里的标签
function $(id){
return document.getElementById(id);
}
// 给要改变的天数,时间,var个变量来接受,获取的标签
var day = $("day");
var hour = $("hour");
var minute = $("minute");
var second = $("second");
// 给变量来获取春节的时间 new Date()是获取当前时间,new Date(写上的时间)获取写上的时间
var chunjie = new Date("2021-2-12 00:00:00")
//封装一个函数,这里算出时间差
function fn(){
// 用春节的时间减去当前时间,得出毫秒数
var cha = (chunjie - new Date())
//这里用算出的毫秒数来算出天时分秒,因为这里毫秒数来计算会出现小数,所以给parseInt来去整数
var d = parseInt( cha / 1000 / 60 / 60 / 24)
var h = parseInt(cha / 1000 / 60 / 60 % 24)
var m = parseInt(cha / 1000 / 60 % 60)
var s = parseInt(cha / 1000 % 60)
//innerText获取标签里的内容,这条件判断,如果d为个数,前面就拼接个0
day.innerText = d > 10 ? d :"0" + d
hour.innerText = h
minute.innerText = m
second.innerText = s
}
//执行函数
fn();
//setTerval是指定时器,因为现在写出的时间静态的,只有手动刷新才会更新时间,所以这里给个定时器,每过1000毫秒(1秒),这个定时就会刷新
setInterval(fn,1000);
</script>