基于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 相关文章推荐
JavaScript 一道字符串分解的题目
Aug 03 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
JS的replace方法介绍
Oct 20 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
js实现无缝轮播图
Mar 09 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
Zerg兵种介绍
2020/03/14 星际争霸
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
详解python单例模式与metaclass
2016/01/15 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python调用百度语音识别api
2018/08/30 Python
python读写文件write和flush的实现方式
2020/02/21 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
综治宣传月活动总结
2014/04/28 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
在职证明书模板
2015/06/15 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书