用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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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 include_path设置技巧分享
2011/07/03 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
搭建vue开发环境
2018/07/19 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
python实现文件快照加密保护的方法
2015/06/30 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
小型女装店的创业计划书
2014/01/09 职场文书
食品安全处置方案
2014/06/14 职场文书
新学期标语
2014/06/30 职场文书
四风问题对照检查材料
2014/09/22 职场文书
法律意见书范文
2015/05/20 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
python之json文件转xml文件案例讲解
2021/08/07 Python
vue判断按钮是否可以点击
2022/04/09 Vue.js