基于javascript实现动态显示当前系统时间

本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下

  • （1）时间日期信息，应该在一个<div>中来显示
  • （2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout()
  • （3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload
  • （4）如何将 时间日期信息 写入到指定的<div>中，DOM对象中的innerHTML属性

效果图：

具体代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">

//定义函数：构建要显示的时间日期字符串
function showTime()
{
 //创建Date对象
 var today = new Date();
 //分别取出年、月、日、时、分、秒
 var year = today.getFullYear();
 var month = today.getMonth()+1;
 var day = today.getDate();
 var hours = today.getHours();
 var minutes = today.getMinutes();
 var seconds = today.getSeconds();
 //如果是单个数，则前面补0
 month  = month<10  ? "0"+month : month;
 day  = day <10  ? "0"+day : day;
 hours  = hours<10  ? "0"+hours : hours;
 minutes = minutes<10 ? "0"+minutes : minutes;
 seconds = seconds<10 ? "0"+seconds : seconds;

 //构建要输出的字符串
 var str = year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds;

 //获取id=result的对象
 var obj = document.getElementById("result");
 //将str的内容写入到id=result的<div>中去
 obj.innerHTML = str;
 //延时器
 window.setTimeout("showTime()",1000);
}
</script>
<style type="text/css">
#result{
 width:500px;
 border:1px solid #CCCCCC;
 background:#FFFFCC;
 margin:50px auto;
 font-size:24px;
 color:#FF0000;
 padding:20px;
}
</style>
</head>

<body onload="showTime()">
<div id="result"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 纯JavaScript实现实时反馈系统时间

    用javascript反馈系统时间 运用知识 JavaScript HTML DOM HTML DOM 中的setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数. 语法setInterval(code,milliseconds) code--代码(可以为函数) milliseconds--在此调用的时间(毫秒) 因此,我们想让反馈的系统时间动起

  • javascript 显示当前系统时间代码

    1.在<head></head>中加入下列代码 复制代码 代码如下: <script language=JavaScript> var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false;} function startclock () { stopclock(); sho

  • js显示当前系统时间的代码

    js获取当前系统时间 复制代码 代码如下: var myDate = new Date();      myDate.getYear();        //获取当前年份(2位)      myDate.getFullYear();    //获取完整的年份(4位,1970-????)      myDate.getMonth();       //获取当前月份(0-11,0代表1月)      myDate.getDate();        //获取当前日(1-31)      myDate

  • 6种javascript显示当前系统时间代码

    第一种:javascript显示当前系统时间代码 2015年12月1日 12:05:08 星期二 <div id="jnkc"> </div> <script>setInterval("jnkc.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000); </script> 第二种:javascri

  • 基于JS代码实现实时显示系统时间

    1.概述 在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页. 2.技术要点 利用Date对象来实现.首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年.月.日.小时.分.秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个

  • jsp实现页面实时显示当前系统时间的方法

    JS代码 复制代码 代码如下: <script language="javascript"> function realSysTime(clock){ var now=new Date(); //创建Date对象 var year=now.getFullYear(); //获取年份 var month=now.getMonth(); //获取月份 var date=now.getDate(); //获取日期 var day=now.getDay(); //获取星期 var

  • android+json+php+mysql实现用户反馈功能方法解析

    android+json+php+mysql实现用户反馈功能方法解析

    相信每个项目都会有用户反馈建议等功能,这个实现的方法很多,下面是我实现的方法,供大家交流.首先看具体界面,三个字段.名字,邮箱为选填,可以为空,建议不能为空.如有需要可以给我留言.  下面贴出布局代码,这里用到一个<include layout="@layout/uphead">就是把另外一个布局文件引入到这个布局中. 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> &l

  • 基于javascript实现动态显示当前系统时间

    基于javascript实现动态显示当前系统时间

    本文实例讲解了javascript实现动态显示当前系统时间的详细代码,具体内容如下 (1)时间日期信息,应该在一个<div>中来显示 (2)定时器:每隔一秒再次访问系统时间,window对象的setTimeout() (3)时钟显示的时机(事件):当网页加载完成后才显示,事件onload (4)如何将 时间日期信息 写入到指定的<div>中,DOM对象中的innerHTML属性 效果图: 具体代码: <html> <head> <meta http-e

  • JavaScript实现实时更新系统时间的实例代码

    一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()

  • C#中动态显示当前系统时间的实例方法

    各位亲们可以尝试以下代码: 注:这里我就只有一个html标签对来说明问题了,首部之类的东西,自己添加. 复制代码 代码如下: <html>     <head>         <title>网页中动态的显示系统日期时间</title>         <script language="JavaScript">             function startTime() {                 var to

  • 详解基于javascript实现的苹果系统底部菜单

    详解基于javascript实现的苹果系统底部菜单

    (不好意,先前发布的是有误的分析.现在的这个没问提了!!!) 昨天看到了"妙味课堂"的一个苹果菜单的DEMO.根据里面提到的"勾股定理".我自己分析了一下代码.如下: 先来一效果图吧! 静止时: 鼠标滑动时: 一.要实现在的功能或效果: 在鼠标滑动的靠近其中某一张图片时,这个图片会随着鼠标向它的靠近而慢慢放大. a.是"放大"不是"变大".[放大]是等比例的,而[变大]:不一定是等比例.后面的公式中会体现. b.这里的[靠近]

  • C++实现调用系统时间简单示例

    本文简述了基于VC++实现的调用系统时间的简单示例,这里只列出主要部分代码,供大家参考一下,具体如下: 首先要注意添加头文件: #include <Windows.h> 然后就简单了,这里只粘出主要用法如下: #ifdef _SECURITY SYSTEMTIME sysTime; ZeroMemory(&sysTime, sizeof(sysTime)); GetLocalTime(&sysTime); if (sysTime.wYear > _DURE_DATE_YE

  • 基于JavaScript打造一款桌面级便签系统

    基于JavaScript打造一款桌面级便签系统

    先看下效果: 载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统. 动画效果用的是animation.css库,缓存用的localStorage. 除非手动清空便签,否则便签会一直保留,非常方便. 鼠标右键可以点开菜单. 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • 利用线程实现动态显示系统时间

    编写Applet小程序,通过在HTML文档中接收参数, 用不同颜色.字体显示当前的系统时间. import java.awt.*; import java.applet.Applet; import java.util.*; import java.awt.Graphics; public class clock extends Applet implements Runnable //继承Applet类并实现Runnable接口 { Thread clockThread=null; //创建一

  • 基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统

    废话不多说了,直接给大家贴js代码了,代码附有注释,感兴趣的朋友一起学习吧. /** * Author: laixiangran. * Created by laixiangran on 2015/12/02. * 检测访问网页的浏览器呈现引擎.平台.Windows操作系统.移动设备和游戏系统 * ******************************************************************** * 各版本浏览器在windows10.0下的用户代理字符串:

随机推荐