javascript之动态时钟

最新推荐文章于 2024-07-12 16:27:40 发布

李家一只慧

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量366

点赞数

分类专栏： javaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m7k7k999/article/details/128025199

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时钟</title>
</head>
<body>
    <h1>你好,欢迎访问贵美商城!</h1>
    <h2 id="time"></h2>
    <script>
        //触发onload事件,定时器效果
        onload=function(){
            setInterval("getTime()",1000);
        }
        function getTime(){
            //实例化时间对象
            var date = new Date();
            //获取小时
            var hour = date.getHours();
            //获取分钟
            var minutes = date.getMinutes();
            //获取秒
            var seconds = date.getSeconds();
            //声明一个存储上下午的变量
            var amPm="";
            //将时间设成12小时制,并按照时间显示上午(AM)和下午(PM)
            if(hour>12){
                hour = hour-12;
                amPm="PM";
            }else{
                amPm="AM";
            }
            //判断如果分钟<10的是时候自动补0
            if(minutes<10){
                minutes="0"+minutes;
            }
            //判断如果秒数<10的时候自动补0
            if(seconds<10){
                seconds="0"+seconds;
            }
            //获取当前时间字符串
            var timeInfo = date.getFullYear()+"年"+ (date.getMonth()+1)+"月"+date.getDate()+"日"+"&nbsp&nbsp&nbsp"+
                hour+":"+minutes+":"+seconds;
            //星期中的某一天
            var week = date.getDay();
            //通过某一天来判断星期
            switch (week) {
                case 1:
                    week="星期一";
                    break;
                case 2:
                    week="星期二";
                    break;
                case 3:
                    week="星期三";
                    break;
                case 4:
                    week="星期四";
                    break;
                case 5:
                    week="星期五";
                    break;
                case 6:
                    week="星期六";
                    break;
                case 7:
                    week="星期日";
                    break;
            }
            //获取h标签
            var hNode=document.getElementById("time");
            //插入h标签
            hNode.innerHTML=timeInfo+"&nbsp&nbsp&nbsp"+amPm+"&nbsp&nbsp&nbsp"+week;
        }
    </script>
</body>
</html>