用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 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 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制作简单的内容采集器的原理分析
2008/10/01 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
javascript实现表单验证
2016/01/29 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python实现大学人员管理系统
2019/10/25 Python
python装饰器使用实例详解
2019/12/14 Python
Python常用类型转换实现代码实例
2020/07/28 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
校园学雷锋活动月总结
2014/03/09 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
股东合作协议书
2014/09/12 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书