怎么使用Javascript在HTML中显示实时时间

发布时间:2022-06-20 09:26:08 作者:iii
来源:亿速云 阅读:233

这篇文章主要介绍了怎么使用Javascript在HTML中显示实时时间的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用Javascript在HTML中显示实时时间文章都会有所收获,下面我们一起来看看吧。

方法如下:

1. 在script中建立方法time;
2. 创建新的Date对象date,并通过使用Date的内置方法给year、month等赋值;
3. 通过连接符号将各个时间连接起来;
4. 使用document.getElementById(“time”).innerHTML将其显示到HTML主页中;
5. 使用setInterval设置动态更新时间,即实时时间;

注意:

(1)获取年份的方法前面有full;
(2)月份的表示从零开始;
(3)周的获取值表示为数字,可以通过switch的方法转换,也可以通过下面代码中的方法将其转化为星期几;
(4)对于时分秒的两位表示,可以在前面加上符号0;

参考代码见下:

<html>
    <head>
        <meta charset="UTF-8">
        <title>日期和时间</title>
        <script>
            function time(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var week = date.getDay();
                week="星期"+"日一二三四五六".charAt(week);
                /*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 0:
                        week="星期日";
                        break;
                }*/
                var hour =date.getHours();
                hour=hour<10?"0"+hour:hour;
                var minute =date.getMinutes();
                minute=minute<10?"0"+minute:minute;
                var second = date.getSeconds();
                second=second<10?"0"+second:second;
                var currentTime = year+"-"+month+"-"+day+"  "+week+"   "+hour+":"+minute+":"+second;
                document.getElementById("time").innerHTML=currentTime;
            }
            setInterval("time()",1000);
        </script>
    </head>
    <body onload="time()">
        <span id="time"></span>
    </body>
</html>

关于“怎么使用Javascript在HTML中显示实时时间”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么使用Javascript在HTML中显示实时时间”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 报表实时显示时间
  2. 在HTML中如何使用JavaScript

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript html

上一篇:Vue如何实现简单登录界面

下一篇:boost.asio框架系列之定时器Timer怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》