用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实现浏览器菜单命令
Sep 05 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
javascript实现点击产生随机图形
Jan 25 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
基于empty函数的输出详解
2013/06/17 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python机器学习之神经网络(二)
2017/12/20 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
大学生逃课检讨书
2015/05/04 职场文书
深入理解python协程
2021/06/15 Python