用Js实现一个简单的数字时钟

效果如下,实际效果是动态的,图片没有截GIF的。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #timeClock{
            margin:50px auto;
            text-align: center;
            font-size: 30px;
            width: 500px;
            height: 100px;
            line-height: 100px; 
            color:#f40;
            background-color:#000;
        }
    </style>
</head>
<body>
    <div id="timeClock"></div>
</body>
<script>
    function nowTime(){
              //获取当前时间,算出小时,分钟,秒。
                var dateTime = new Date();
                var hour = dateTime.getHours();
                var min = dateTime.getMinutes();
                var sec = dateTime.getSeconds();
                //调用函数 补0
                //小时还是别加0了=。=
                // checkTime(hour);
                checkTime(min);
                checkTime(sec);
                document.getElementById('timeClock').innerHTML = checkTime(hour) + '时' + checkTime(min) + '分' + checkTime(sec) + '秒';
                setInterval('nowTime()',1000); 
            }
            //给小时,分钟,秒,不足10的数前面补一个0.
            function checkTime(num){
                if(num < 10){
                  return '0' + num;
                }
                else if(num >= 10){
                  return '' + num;
                }  
            }
            nowTime();
</script>
</html>
展开阅读全文

没有更多推荐了,返回首页