用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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
angular.bind使用心得
Oct 26 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
vue全局使用axios的操作
Sep 08 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
vue使用element-ui实现表单验证
Dec 13 Vue.js
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 彩色文字实现代码
2009/06/29 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
javascript中神奇的 Date对象小结
2017/10/12 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python中的闭包总结
2014/09/18 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python保存网页图片到本地的方法
2018/07/24 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python批量修改ssh密码的实现
2019/08/08 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
有个性的自我评价范文
2013/11/15 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
青年文明号服务承诺
2014/03/31 职场文书
教师节宣传方案
2014/05/23 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
停车场管理协议书范本
2014/10/08 职场文书
python实现过滤敏感词
2021/05/08 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL