用js实现每隔一秒刷新时间的实例(含年月日时分秒)


Posted in Javascript onOctober 25, 2017

原理:使用定时器,即setInterval(fn,i),每隔i秒执行fn。

下面给出具体的代码

1.代码如下:

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>用js实现每隔一秒刷新时间(含年月日时分秒)</title>
<style>
#time{background:#33F;
   color:white;
	 height:30px;
	 line-height:30px;
	 padding:20px;
	 font-size:18px;
	 width:400px;
	 text-align:center;
	 margin:0 auto;
	 margin-top:200px;}
</style>
</head>
<body>
	<div id="time"></div>
	<script type="text/javascript"> 
	 setInterval(function(){
		 var time=new Date();
		 var year=time.getFullYear(); //获取年份
		 var month=time.getMonth()+1; //获取月份
		 var day=time.getDate();  //获取日期
		 var hour=checkTime(time.getHours());  //获取时
		 var minite=checkTime(time.getMinutes()); //获取分
		 var second=checkTime(time.getSeconds()); //获取秒
		 /****当时、分、秒、小于10时,则添加0****/
		 function checkTime(i){
			 if(i<10) return "0"+i;
			 return i;
		 }
		 var box=document.getElementById("time");
		 box.innerHTML=year+"年"+month+"月"+day+"日 "+hour+":"+minite+":"+second;		 
		},1000);   //setInterval(fn,i) 定时器,每隔i秒执行fn
</script>
</body>
</html></span><span style="font-size:32px;">
</span>

2.效果图:

用js实现每隔一秒刷新时间的实例(含年月日时分秒)

以上这篇用js实现每隔一秒刷新时间的实例(含年月日时分秒)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
Javascript 数组排序详解
Oct 22 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue实现扫码功能
Jan 17 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
JS获取当前地理位置的方法
Oct 25 #Javascript
JavaScript 异步调用
Oct 25 #Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 #Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 #Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 #Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 #Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 #Javascript
You might like
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python requests指定出口ip的例子
2019/07/25 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
个人工作主要事迹
2014/05/08 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
本科应届生自荐信
2014/06/29 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书