javascript年月份计时器简易制作

最新推荐文章于 2024-08-07 11:00:25 发布

赖乾华

最新推荐文章于 2024-08-07 11:00:25 发布

阅读量481

点赞数 1

CC 4.0 BY-SA版权

分类专栏：零基础javascript web前端文章标签：函数 javascript

本文链接：https://blog.youkuaiyun.com/qq_37252367/article/details/54347839

web前端同时被 2 个专栏收录

8 篇文章

订阅专栏

零基础javascript

5 篇文章

订阅专栏

本文将介绍如何使用JavaScript创建一个简单的年月份计时器，通过编写函数实现日期的动态更新，展示实时的年月日信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

年月份计时器简易制作：

<script type="text/javascript">
            function stae(n) {
                if (n < 10) {
                    return '0' + n;
                } else {
                    return '' + n;
                }
            }
            //补零返回值
            window.onload = function() {
                //以下全是获取id类名
                var oBox = document.getElementById('box');
                var oImg = oBox.getElementsByTagName('img');
                var oDiv = document.getElementById('div');
                var oNian = document.getElementById('nian');
                var oYear = oNian.getElementsByTagName('img');
                var oYue = document.getElementById('yue');
                var oMrbon = oYue.getElementsByTagName('img');
                var oRi = document.getElementById('ri');
                var oDate = oRi.getElementsByTagName('img');

                function time() {
                    var arr = new Date();
                    var mar = stae(arr.getHours()) + stae(arr.getMinutes()) + stae(arr.getSeconds());
                    //依次获取电脑时间值：时.分.秒
                    for (var i = 0; i < oImg.length; i++) {
                        //根据图片个数循环获取数值
                        oImg[i].src = 'img/' + mar.charAt(i) + '.png';
                        //根据循环得出数值转换图片(图片名称以数字命名：从0开始)
                    }
                    var sda = arr.getDay();
                    //获取电脑星期值

                    //判断获取电脑星期值的数值，根据数值转换数字图片
                    //sda：数组   （数组从0开始）（电脑星期值从左到右：日.一.二.三.四.五.六）
                    if (sda == 0) {
                        oDiv.src = 'img1/6.png';
                    } else if (sda == 1) {
                        oDiv.src = 'img1/0.png';
                    } else if (sda == 2) {
                        oDiv.src = 'img1/1.png';
                    } else if (sda == 3) {
                        oDiv.src = 'img1/2.png';
                    } else if (sda == 4) {
                        oDiv.src = 'img1/3.png';
                    } else if (sda == 5) {
                        oDiv.src = 'img1/4.png';
                    } else if (sda == 6) {
                        oDiv.src = 'img1/5.png';
                    }
                    var syear = '' + arr.getFullYear();
                    //获取电脑年份值
                    for (var i = 0; i < syear.length; i++) {
                        oYear[i].src = 'img/' + syear.charAt(i) + '.png';
                    }
                    var smon = stae(arr.getMonth() + 1);
                    //获取电脑月份值
                    for (var i = 0; i < smon.length; i++) {
                        oMrbon[i].src = 'img/' + smon.charAt(i) + '.png';
                    }
                    var date = stae(arr.getDate());
                    //获取电脑日份值
                    for (var i = 0; i < date.length; i++) {
                        oDate[i].src = 'img/' + date.charAt(i) + '.png';
                    }
                }
                time();
                setInterval(time, 1000);
                //定时器：设定每秒自动变幻数值
            }
        </script>