基于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中匿名函数,函数直接量和闭包
May 08 Javascript
js常见表单应用技巧
Jan 09 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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留言本实例代码
2010/05/09 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
Express.JS使用详解
2014/07/17 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
python中函数默认值使用注意点详解
2016/06/01 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
pyspark 随机森林的实现
2020/04/24 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python基于execjs运行js过程解析
2020/11/27 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
实习生求职自荐信
2014/02/07 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
防暑降温通知书
2015/04/27 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书