用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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
深入理解vue路由的使用
Mar 24 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
layUI实现列表查询功能
Jul 27 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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 FLEA中二叉树数组的遍历输出
2012/09/26 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
php桥接模式应用案例分析
2019/10/23 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
快速了解Python开发环境Spyder
2020/06/29 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
早餐连锁店计划书
2014/01/08 职场文书
新教师工作感言
2014/02/16 职场文书
保密承诺书范文
2014/03/27 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
升学宴家长致辞
2015/07/27 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle