用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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javascript常用方法汇总
Dec 02 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
javascript 用函数实现继承详解
May 28 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
angular异步验证器防抖实例详解
Mar 31 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
php集成动态口令认证
2016/07/21 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
CSS3 边框效果
2019/11/04 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
网络体系结构及协议的定义
2014/03/13 面试题
教师党员自我剖析材料
2014/09/29 职场文书
工作年限证明模板
2014/11/01 职场文书
导游词300字
2015/02/13 职场文书
爱心捐助活动总结
2015/05/09 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
django 认证类配置实现
2021/11/11 Python
Python经常使用的一些内置函数
2022/04/11 Python