javascript如何不断显示当前时间?

javascript如何不断地、动态显示当前时间?下面本篇文章就来给大家介绍一下使用javascript动态显示当前时间的方法,希望对大家有所帮助。

JavaScript不断显示当前时间的方法:

1、得到当前时间

var date = new Date();

2、格式化为本地时间

var d1 = date.toLocaleString();

3、使页面每秒显示一次时间

setInterval()  定时器实现

4、获取div标签并将时间写入到HTML页面中,在页面中动态显示当前时间。

实现代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>动态显示时间</title>
        
        <style type="text/css">
            #times{
                width: 400px;
                height: 50px;
                font-size: 25px;
                text-align: center;
                line-height: 50px;
                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>

效果图:

1.gif

以上就是javascript如何不断显示当前时间?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 答疑