欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 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()打印次数在上一次基础上再加一次,相当于计时器每秒钟都会新加一个,最终导致浏览器崩溃,所以这种带计时器的递归方法应该谨慎使用