思路:

*得到当前时间

  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>

js实现动态显示时间的更多相关文章

  1. JS实现动态显示时间(最简单方法)

    使用JS实现动态显示时间 最简单实现方法 直接在网页适当的位置中插入如下js代码,(id="datetime") 不可省略. <div id="datetime&q ...

  2. Js获取当前日期时间及其它操作

    Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份 ...

  3. JS Date当前时间:获取日期时间方法在各浏览器中的差异

    转自:http://www.feiesoft.com/00047/<script type="text/javascript"> // JS Date当前时间获取方法在 ...

  4. js获取当前时间显示在页面上

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. Js多国时间动态更新

    Js多国时间动态更新 点击下载

  6. js生成当前时间

    js生成当前时间 var today=new Date(); function itArray(){ this.length=itArray.arguments.length for(var i=0; ...

  7. js获取当前时间&js 页面时钟

    js获取当前时间 //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = ...

  8. JS获取当前日期时间及JS日期格式化

    Js获取当前日期时间: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份( ...

  9. js显示当前时间

    闲着没事在闪存里看到有人需要js显示当前时间,就一时兴起写了个. 输出格式:“2013年12月18日 星期三 上午9:05:00 ”. <script type="text/javas ...

随机推荐

  1. Maven 安装依赖包

    Guide to installing 3rd party JARs Although rarely, but sometimes you will have 3rd party JARs that ...

  2. c#中打开视频,word

    打开所有的文件的 代码,包括word/ppt/txt/xls/mp3/视频文件 添加using using System.Diagnostics; string fileName = @"D ...

  3. bitcoind搭建

    https://degreesofzero.com/article/installing-bitcoind-on-ubuntu.html1. sudo apt-get install python-s ...

  4. ajax的底层实现

    Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来都提供了相同的实现.在 XHR 出现之前,Ajax 式的通信必须借助一些手段 ...

  5. 【转载】@Component, @Repository, @Service的区别

    @Component, @Repository, @Service的区别 官网引用 引用spring的官方文档中的一段描述: 在Spring2.0之前的版本中,@Repository注解可以标记在任何 ...

  6. 统计连接到主机前十的ip地址和连接数

    常用脚本–tcp #!/bin/bash # #******************************************************************** #encodi ...

  7. [MySQL优化] -- 如何定位效率较低的SQL

    一般通过以下两种方式定位执行效率较低的 SQL 语句. 通过慢查询日志定位那些执行效率较低的 SQL 语句,用 --log-slow-queries[=file_name] 选项启动时, mysqld ...

  8. mongodb的安装与使用(三)之 pymongo

    (一)连接MongoClient 连接MongoDB我们需要使用PyMongo库里面的MongoClient,一般来说传入MongoDB的IP及端口即可,第一个参数为地址host,第二个参数为端口po ...

  9. 创建一个新的laravel

    //创建laravelcomposer create-project laravel/laravel shop 安装好 Laravel 之后的下一步是设置你的应用密钥为随机字符串.如果你通过 comp ...

  10. WebService如何封装XML请求 以及解析接口返回的XML

    原 WebService如何封装XML请求 以及解析接口返回的XML 置顶 2019年08月16日 15:00:47 童子泛舟 阅读数 28 标签: XML解析WebService第三方API 更多 ...