用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的inputlimiter 实现字数限制功能
May 30 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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缓存技术详细总结
2013/08/07 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python中防止sql注入的方法详解
2017/02/25 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python实现网站微信登录的示例代码
2019/09/18 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
学校消防演习方案
2014/02/19 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript