您现在的位置是:php教程网 > 编程技术 >

[db:作者] 2019-09-10 00:28 PHP学习

JavaScript如何动态显示时间?

JavaScript中可以通过Date()方法得到当前时间,通过toLocaleString()方法将其格式化为本地时间,然后设置一个定时器使页面每秒显示一次时间即可。

JavaScript动态显示时间的方法:

得到当前时间

var date = new Date();

格式化为本地时间

var d1 = date.toLocaleString();

使页面每秒显示一次时间

setInterval()  定时器实现

显示到页面

获取div标签并将时间写入

实现代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>动态显示时间</title>
        
        <style type="text/css">
            #times{
                width: 200px;
                height: 20px;
                border: 3px solid gray;  /*如果不加实线无法显示边框*/
            }
        </style>
    </head>
    
    <body>
        <div id="times">
            
        </div>
        
        <script type="text/javascript">
            //得到时间并写入div
            function getDate(){
                //获取当前时间
                var date = new Date();
                //格式化为本地时间格式
                var date1 = date.toLocaleString();
                //获取div
                var div1 = document.getElementById("times");
                //将时间写入div
                div1.innerHTML = date1;
            }
            //使用定时器每秒向div写入当前时间
            setInterval("getDate()",1000);
        </script>
    </body>
</html>

以上就是JavaScript如何动态显示时间?的详细内容,更多请关注html中文网其它相关文章!

上一篇:上一篇:javascript是面向对象的吗?

下一篇:下一篇:javascript与jscript的区别是什么?