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


Posted in Javascript onJanuary 28, 2016

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

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

效果图:

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

具体代码:

<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程序设计有所帮助。

Javascript 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 #Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 #Javascript
使用node+vue.js实现SPA应用
Jan 28 #Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
You might like
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
十大使用PHP框架的理由
2015/09/26 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
简单谈谈Python中的闭包
2016/11/30 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python 多进程原理及实现
2020/12/21 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
母婴店促销方案
2014/03/05 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS