用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 学习笔记(一)
Oct 13 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
Paypal支付不完全指北
Jun 04 Javascript
利用js canvas实现五子棋游戏
Oct 11 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php下MYSQL limit的优化
2008/01/10 PHP
php结合飞信 免费天气预报短信
2009/05/07 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Django数据库表反向生成实例解析
2018/02/06 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Django视图扩展类知识点详解
2019/10/25 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
2014年维修工作总结
2014/11/22 职场文书
承诺保证书格式
2015/02/28 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL