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>
效果图:
来源: http://www.css88.com/qa/javascript/11107.html