基于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 相关文章推荐
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
$.extend 的一个小问题
Jun 18 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
AngularJS 教程及实例代码
Oct 23 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 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
一个用于网络的工具函数库
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python实现八大排序算法(1)
2017/09/14 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python装饰器语法糖
2019/01/02 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
Python 线程池用法简单示例
2019/10/02 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
双创工作实施方案
2014/03/26 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL