开屏倒计时

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/jquery-2.0.3.js"></script>
    <script src="demo.js"></script>
    <link rel="stylesheet" href="common.css">
    <title>倒计时</title>
</head>
<body>
    <div id="container">
            <div id="count-down">
                    <span id="jump">跳转 <b>30</b></span>
            </div>
            <div id="content">
                    上网时间：
                <span id="ptime">
                    00:00:00
                </span>
            </div>
    </div>
</body>
</html>

CSS代码

*{margin:0;padding:0}
html,body{
    background: #000;
    width:100%;
    height:100%;
}
#container{
    width:50%;
    margin:0 auto;
    height:100%;
}
#count-down{
    width:100%;
    height:100%;
    padding: 10px;
    text-align: right;
    color:#666;
    background:url(../images/1.jpg) no-repeat center center;
    background-size:100% 100%;
    box-sizing: border-box;
}
#content{
    width:100%;
    height:100%;
    text-align: center;
    color:#666;
    line-height:200px;
    background:url(../images/2.jpg) no-repeat center center;
    background-size:100% 100%;
    box-sizing: border-box;
}
@media screen and (max- 640px){
    #container{
        width:100%;
        margin:0 auto;
        height:100%;
    }
}

Jquery代码

    $(function(){
        // 开屏广告
        var  text =$('#count-down span b').text();
        var timer ;
        countDown(text)
        $('#jump').click(function(){
            jump()
        })
        function countDown(index){
            if(index > 0) {
                setTimeout(function(){
                    index --;
                    $('#count-down span b').text(index);
                    countDown(index) // 自己调用自己
                },1000)
            } else {
                jump()
            }
        };
        function jump(){
            $('#count-down').fadeOut(800);
            if (timer) {
                clearInterval(timer)
            }
            timer = setInterval(setClock,1000)
        };
        var HH = 0,MM =0, SS=0,str ="";
        function setClock() {
            str = "";
            if (++SS == 60) {
                if (++MM == 60) {
                    HH ++
                    MM = 0
                }
                SS = 0
            }
            str += HH <10 ? "0"+ HH : HH;
            str += ":"
            str += MM <10 ? "0"+ MM : MM;
            str += ":"
            str += SS <10 ? "0"+ SS : SS;
            $("#ptime").text(str)
        }
    })

仅供自己以后复习