知识点


  2. 设置定时器​​var timeid = window.setInterval("方法名或者方法","延时"); // 第一种方式 window.setInterval(function(){ console.log('哈哈哈') },1000) // 第二种方式 window.setInterval('console.log("哈哈")',1000) // 第三种方式 window.setInterval(test,1000); function test() { console.log('哈哈哈') } ​​
  3. 清除定时器​​window.clearInterval(timeid); ​​

运行效果

Javascript特效：普通倒计时_html

Javascript特效：普通倒计时_方法名_02

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000;
            text-align: center;
            padding: 200px;
        }
        #pic{
            display: none;
        }
        #time{
            font-size: 200px;
            color:red;
        }
    </style>
</head>
<body>
    <div id="time">5</div>
    <img id="pic" src="images/flower.gif" alt="">
</body>
<script>
    window.onload = function (ev) {
        var intervalID = setInterval(function () {
            var time = $('time');
            time.innerText -= 1 ;
            // 清除定时器
            if (time.innerText ==='0') {
                clearInterval(intervalID);
                $('pic').style.display = 'block';
                time.style.display = 'none';
            }
        }, 1000);
        function $(id) {
            return typeof id === 'string' ? document.getElementById(id):null;
        }
    }
</script>
</html>