用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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
常规表格多表头查询示例
Feb 21 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
shiro授权的实现原理
Sep 21 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
JS运算符简单用法示例
2020/01/19 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python中__call__用法实例
2014/08/29 Python
Python内置函数dir详解
2015/04/14 Python
python自定义类并使用的方法
2015/05/07 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python版简单工厂模式
2017/10/16 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python实现简单日期工具类
2019/04/24 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
新闻专业学生的自我评价
2014/02/13 职场文书
安全生产责任书
2014/03/12 职场文书
设计师求职信
2014/07/01 职场文书
小学教师年度个人总结
2015/02/05 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python