您的位置：首页 > Web前端 > JavaScript

简单的倒计时实现（拓展的知识点防止透明度继承父类）

2017-12-19 15:49 309 查看

为了方便需要的人，直接给出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()打印次数在上一次基础上再加一次，相当于计时器每秒钟都会新加一个，最终导致浏览器崩溃，所以这种带计时器的递归方法应该谨慎使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html css javascript 计时器程序
相关文章推荐
新的分享
章节导航