JavaScript - 数码钟表 -

最新推荐文章于 2022-02-03 08:26:17 发布

赵羽珩

最新推荐文章于 2022-02-03 08:26:17 发布

阅读量258

点赞数

一、定时器の使用（知识点）

开启定时器

setInterval 【间隔性】一旦启动就不会停下来
setTimeout【延时性】只执行一次

<script type="text/javascript">
        function show() {
            alert('a');
        }
        // show();

        setInterval (show,2000);    // 每隔2秒.执行一次
        setTimeout (show,3000);     // 3秒后.只执行一次
    </script>

停止定时器

clearInterval
clearTimeout

<script type="text/javascript">

        window.onload = function () {
            function show() {
                alert('a');
            }

            var aBtn1 = document.getElementById('btn1');//开启定时器btn
            var aBtn2 = document.getElementById('btn2');//关闭定时器btn
            var timer = null;//定时器命名

            aBtn1.onclick = function () {
                timer = setInterval (show,2000);//点击开启定时器
            }
            aBtn2.onclick = function () {//点击关闭定时器
                clearInterval (timer);
            }
        }
    </script>

二、数码钟表（知识点）

获取系统时间

Date对象
getHours()、getMinutes()、getSeconds()

<script type="text/javascript">
        window.onload = function () {
            var oDate = new Date();
            var str = oDate.getHours()+'点'+oDate.getMinutes()+'分'+oDate.getSeconds()+'秒';//str = 字符串
            alert(str);
        }
    </script>

getFullYear()、getMonth()、getDate()、getDay()
年、月、日、星期

    <script type="text/javascript">
        function toChinese(day) {
            switch (day) {
                case 0:
                    return '日';
                case 1:
                    return '一';
                case 2:
                    return '二';
                case 3:
                    return '三';
                case 4:
                    return '四';
                case 5:
                    return '五';
                case 6:
                    return '六';
                    break;
                default:
            }
        }
        var oDate = new Date();
        var str = oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月'+oDate.getDate()+'日 星期'+ toChinese(oDate.getDay());
        alert('现在是：'+str)
    </script>

显示系统时间

字符串链接
空位补零

设置图片路径

charAt方法
charAt() 方法可返回指定位置的字符

三、数码钟表（例题）

<!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">
    <title>Document</title>
</head>
<body style="font-size:40px;">
    <!-- <input id="btn1" type="button" value="更新时间 "> -->
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    点
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    分
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
    秒
    <script type="text/javascript">

        function toDouble(num ) {//字符串の空位补零

            if (num < 10) {
                return '0' + num;
            }else {
                return '' + num
            }
        }

        window.onload = function () {

            var oBtn = document.getElementById('btn1');
            var aImg = document.getElementsByTagName('img');

            function updateTime () {//更新时间函数

                var oDate = new Date();   //获取系统时间
                var str = toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());//字符串.时.分.秒
                // alert(str);
                for (var i = 0; i < aImg.length; i++) {   //利用字符串来替代每一个'img'地址
                    aImg[i].src = 'img/'+str.charAt(i)+'.png';
                }

            }
            setInterval (updateTime, 1000);//将以上所有函数带入'间隔性定时器（A，1000）'
            updateTime();//立即调用这个函数。解决延时1sの问题
        }
    </script>
</body>
</html>

赵羽珩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - 数码钟表 -

一、定时器の使用（知识点）开启定时器setInterval 【间隔性】一旦启动就不会停下来setTimeout【延时性】只执行一次script type="text/javascript"> function show() { alert('a'); } // show(); s
复制链接

扫一扫