实现电子钟及倒计时功能

电子钟：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <span class="hours"></span>:
    <span class="minutes"></span>:
    <span class="seconds"></span>
    <script src="jquery-1.11.1.js"></script>
    <script>
    function time() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        $(".hours").text(hour);
        $(".seconds").text(second);
        $(".minutes").text(minute);
    }
    setInterval(time, 1000)
    </script>
</body>

</html>

　　

 

倒计时：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="btn">10</div>
    <script src="jquery-1.11.1.js"></script>
    <script>
    var seconds = 10;

    function time() {
        $(".btn").text(seconds);
        seconds--;
        if (seconds == 0) {
            window.location = "https://www.baidu.com/"
        }
    }
    setInterval(time, 1000)
    </script>
</body>

</html>

　　

posted @ 2017-07-19 10:01  TigerZhang  阅读(358)  评论(0)  编辑  收藏  举报