基于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 相关文章推荐
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
js 对象使用的小技巧实例分析
Nov 08 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
JavaScript 自定义事件之我见
2017/09/25 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vuex入门最详细整理
2020/03/04 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
成教自我鉴定
2013/10/27 职场文书
经管应届生求职信
2013/11/17 职场文书
大学总结自我鉴定
2014/01/18 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
工程部部长岗位职责
2015/02/12 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
golang 如何用反射reflect操作结构体
2021/04/28 Golang
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL