简单的倒计时实现（拓展的知识点防止透明度继承父类）
程序员文章站
2024-02-26 22:02:28
...
为了方便需要的人，直接给出html+js+css的代码，虽然只有js部分有用处
注意：（缺两张图片一张是大背景图一张是圆圈内的背景图，这里为了防止透明度被继承用到了rgba（）设置透明度）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
html,body,div{
margin:0;
padding:0;
}
html,body{
height:100%;
background:url(../img/bg.jpg) no-repeat 100% 100%;
}
.box{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 200px;
background:url(../img/baby.jpg) no-repeat;
background-size: 100% 100%;
border-radius: 100%;
box-shadow:0 0 24px 0 rgba(0,0,0,0.5);
}
.con{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 200px;
border-radius: 100%;
background-color: rgba(255,255,255,0.8);
}
#timer{
height:30px;
line-height: 30px;
text-align: center;
font-size: 20px;
color: green;
opacity: 1;
margin:85px 0;
text-shadow: 0 0 5px #fefcc9, 5px -5px 15px #feec85, 10px -10px 25px #ffae34;
}
</style>
<body>
<div class="box">
</div>
<div class="con">
<div id="timer"></div>
</div>
<script type="text/javascript">
var timeFlag = 0
function leftTimer(year, month, day, hour, minute, second) {
var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date()); //计算剩余的毫秒数
timeFlag = leftTime;
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
if(leftTime>0){
console.log(days + "天" + hours + "小时" + minutes + "分" + seconds + "秒")
document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
}
}
function checkTime(i) { //将0-9的数字前面加上0，例1变为01
if(i < 10) {
i = "0" + i;
}
return i;
}
leftTimer(2018,2,14,0,0,0);
var timer = setInterval(function(){
if(timeFlag>0){
leftTimer(2018,2,14,0,0,0);
}else{
clearInterval(timer);
document.getElementById("timer").innerHTML = '倒计时已结束！';
}
},1000)
</script>
</body>
</html>效果图如下：
对于背景图不能改透明度的问题，解决方法代码中有体现：
1、给父层加背景图，然后在父层加同级元素，同级元素的宽高都和父层一样类似于盖在父层上，相当于遮罩，
2、改变遮罩的透明度，从而达到改变父层背景图的效果，又不影响字体透明度的设置，
3、字体这里实现了火焰字的效果，其实很简单，想了解的小伙伴可以查查text-shadow这个属性
js部分分析：
function leftTimer(year,month,day,hour,minute,second){
var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
setInterval(leftTimer(2018,2,14,0,0,0),1000);
document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
}
function checkTime(i){ //将0-9的数字前面加上0，例1变为01
if(i<10){
i = "0" + i;
}
return i;
}
leftTimer(2018,2,14,0,0,0);不知道细心的小伙伴发现没有，如果用以上代码实现倒计时也能实现类似的效果，但是会导致浏览器变卡，假如在leftTimer方法中加个console.log(),你会发现计时器每走一次console.log()打印次数在上一次基础上再加一次，相当于计时器每秒钟都会新加一个，最终导致浏览器崩溃，所以这种带计时器的递归方法应该谨慎使用
下一篇： 简化版任务调度器的实现和应用