JS 电子时钟

电子时钟

思路:
获取当前时间的时间对象
从时间对象中获取当前的时间信息,写入到页面中
注意:

1. 获取的月份是从0开始的
2. 星期,0是周日,还需要将数值转化为汉字

 	<div id="d"></div>
 	 <script>
        d.innerHTML = nowTime();
        setInterval(function () {
        d.innerHTML = nowTime();
        }, 1000) 
            // 创建当前时间对象 
            var d = new Date();
            // 获取年份  4位数值
            var y = d.getFullYear();
            // 获取月份  执行结果需要+1
            var month = d.getMonth() + 1;
            // 获取日期  
            var day = d.getDate();
            // 获取星期  结果是0-6的数值,需要转化为汉字
            var w = d.getDay();
            // 获取小时 
            var h = d.getHours();
            // 获取分钟 
            var m = d.getMinutes();
            // 获取秒 
            var s = d.getSeconds();
            // 建立数组,是星期getDay()获取的结果,对应的汉字
            // 获取结果时,将 getDay() 的执行结果,作为索引下标,来获取对应的汉字
            var arr = ['日', '一', '二', '三', '四', '五', '六'];
            // 补零操作,谁需要做,听客户的
            // 他说写,我们就写,他说写,我们就不写
            // 目前用小时,分钟,秒做举例
            if(h < 10){
                // 在原始小时数值前,拼接0
                h = '0' + h;
            }
            if(m < 10){
                // 在原始分钟数值前,拼接0
                m = '0' + m;
            }
            if(s < 10){
                // 在原始秒数值前,拼接0
                s = '0' + s;
            }
            // 组成字符串,设定为返回值
            return `当前时间是:${y}年,${month}月,${day}日,星期${arr[w]},${h}点,${m}分,${s}秒`;
        }
        // 将表示星期的数值,转化为对应的汉字
        //  0   1   2   3  4   5   6   表示星期的数值 --- 看做是 数组的索引
        // [日  一  二  三  四  五  六]  对应的汉字    --- 看做是 数组的数据
        // 可以建立一个数组,这个的数据是,需要对应的汉字
        // 数组的顺序,就是获取的星期的数值的顺序
        // 这个数组的数据顺序,也就是索引下标,正好对应的 getDay()获取的数值结果
        // var arr = ['日','一','二','三','四','五','六'];

        // 其他方法1: 也可以定义成对象
        //       var obj = {0:'日',1:'一',2:'二',3:'三',4:'四',5:'五',6:'六'}
        // 其他方法2: if判断  好理解,但是执行效率低,代码冗余

        
        if(w == 0){
            w = '日';
        }else if(w == 1){
            w = '一';
        }else if(w == 2){
            w = '二';
        }else if(w == 3){
            w = '三';
        }else if(w == 4){
            w = '四';
        }else if(w == 5){
            w = '五';
        }else if(w == 6){
            w = '六';
        }else{
            w = '星期获取错误';
        }
 
        // 其他方法3: switch判断
        
        switch (w) {
            case 0:
                w = '日';
                break;
            case 1:
                w = '一';
                break;
            case 2:
                w = '二';
                break;
            case 3:
                w = '三';
                break;
            case 4:
                w = '四';
                break;
            case 5:
                w = '五';
                break;
            case 6:
                w = '六';
                break;
            default:
                w = '星期获取错误'
                break;

        } 

        // 补零效果
        // 当显示的内容是个位数时,给数值前添加 0 
        // 9 ---> 09 
        // 思路: 当数值小于 10 
        //       在数值前,拼接一个字符串'0'

        var int = 9;

        if(int < 10){
            // 在原始数值前,拼接字符串0
            int = '0' + int;
        }

        console.log(int);
        </script>