用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 相关文章推荐
基于jQuery的左右滚动实现代码
Dec 03 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
vuex的简单使用教程
Feb 02 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
PHP xpath()函数讲解
2019/02/11 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python机器学习之神经网络(三)
2017/12/20 Python
Python多继承顺序实例分析
2018/05/26 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
区域总监的岗位职责
2013/11/21 职场文书
中专生自我鉴定
2013/12/17 职场文书
公益活动邀请函
2014/02/05 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
个人合伙协议书范本
2014/10/14 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
转学证明范本
2015/06/19 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers