用JavaScript时钟特效

编程小号 • 2023-08-11 20:46 • 未分类

实现效果：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作12进制的时钟特效</title>
</head>
<body>
<div id="myclock"></div>
<script type="text/javascript">
 
    function clock_12h()
    {
        var today = new Date(); //获得当前时间
        //获得年、月、日，Date()函数中的月份是从0－11计算
        var year = today.getFullYear();
        var month = today.getMonth()+1;
        var date = today.getDate();
        var hour = today.getHours();  //获得小时、分钟、秒
        var minute = today.getMinutes();
        var second = today.getSeconds();
 
        var apm="AM"; //默认显示上午: AM
        if (hour>12) //按12小时制显示
        {
            hour=hour-12;
            apm="PM"  ;
        }
        var weekday = 0;
        switch(today.getDay()){
            case 0:
                weekday = "星期日";
                break;
            case 1:
                weekday = "星期一";
                break;
            case 2:
                weekday = "星期二";
                break;
            case 3:
                weekday = "星期三";
                break;
            case 4:
                weekday = "星期四";
                break;
            case 5:
                weekday = "星期五";
                break;
            case 6:
                weekday = "星期六";
                break;
        }
 
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="<h2>你好，欢迎访问本网站！</h2><h2>"+year+"年"+month+"月"+date+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"</h2>";
 
    }
    /*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
    var myTime = setInterval("clock_12h()",1000);
 
</script>
</body>
</html>

今天的文章用JavaScript时钟特效分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/33913.html

用JavaScript时钟特效

相关推荐

发表回复