用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属性过滤选择器使用示例
Jun 18 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
浅谈开发eslint规则
Oct 01 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP积分兑换接口实例
2015/02/09 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP类的特性实例分析
2016/09/28 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python os.access()用法实例
2019/02/18 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python数据爬下来保存的位置
2020/02/17 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Python读写压缩文件的方法
2020/07/30 Python
《与象共舞》教学反思
2014/02/24 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
4s店活动策划方案
2014/08/25 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
讲解MySQL增删改操作
2022/05/06 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android