用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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
js操作二级联动实现代码
Jul 27 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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检查日期函数checkdate用法实例
2015/03/19 PHP
php intval函数用法总结
2019/04/14 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python获取标准北京时间的方法
2015/03/24 Python
Python计算字符宽度的方法
2016/06/14 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python线程指南详细介绍
2017/01/05 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
python和c语言的主要区别总结
2019/07/07 Python
Python的Lambda函数用法详解
2019/09/03 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
python入门教程之基本算术运算符
2020/11/13 Python
python 基于opencv操作摄像头
2020/12/24 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
创建文明学校实施方案
2014/03/11 职场文书
学校安全责任书
2014/04/14 职场文书
建筑横幅标语
2014/10/09 职场文书
致青春观后感
2015/06/09 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android