CSS3实现倒计时

原文链接： https://www.mk2048.com/blog/blog.php?id=h002001jbbhj&title=CSS3%E5%AE%9E%E7%8E%B0%E5%80%92%E8%AE%A1%E6%97%B6

CSS3实现倒计时小程序，界面如下：

代码如下：

<style>
        body,html{
            margin:0px;
            height:100%;
        }
        body{background: #000;
            overflow: hidden;}
        div{ width:200px;
            height:200px;
            border: 5px #fff solid;
            border-radius: 50%;
            position: relative;
            margin: 0 auto;
            text-align: center;
            -webkit-transition: all .5s ease-in .1s;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        div>span{  color: #fff;
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 145px;
            line-height: 74%;
            font-weight: bolder;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-transform: translate(-50%, -50%);
            width: 100%;
        }
        .bigbang{
            -webkit-transform: scale(10);
            opacity: 0;
        }
    </style>

HTML代码：

<div>
    <span id="num">10</span>
</div>

JS代码：

<script>
    function djs(){
        var obj=document.getElementById('num');
        var num=obj.innerText;
        obj.innerText=num-1;
        if(num-1==0){
            clearInterval(ds);
            obj.parentElement.className='bigbang';
            setTimeout(function(){
                obj.parentElement.className='';
                obj.innerHTML='时间到';
                obj.style.fontSize='58px';
                obj.parentElement.style.background='red';
            },600)
        }
    }
    //djs();
    var ds=setInterval(djs,1000);
</script>

更多专业前端知识，请上【猿2048】www.mk2048.com

猜你喜欢