JS定时器，获取当前时间显示在页面并每秒刷新

最新推荐文章于 2024-04-29 17:54:33 发布

ZPD_zpd

最新推荐文章于 2024-04-29 17:54:33 发布

阅读量5.6k

点赞数 9

文章标签： javascript

本文链接：https://blog.csdn.net/ZPD_zpd/article/details/110070733

版权

setInterval()

setInterval(code,millisec,lang)

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

参数：

code：必需。要调用的函数或要执行的代码串。
millisec：必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang：可选。 JScript | VBScript | JavaScript

clearInterval() 方法

clearInterval(id_of_setinterval)

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

参数：

id_of_setinterval：由 setInterval() 返回的 ID 值。

例子1：倒计时

//倒计时
<body>
 <div>10秒倒计时</div>
 <div id="box">10</div>
 <button type="button" id="btn">开始倒计时</button>

 //JS代码
 <script type="text/javascript">
  //获取元素
  var box = document.getElementById("box");
  var btn = document.getElementById("btn");

  //点击事件
  btn.onclick = function time() {
	  //点击后定时器事件开始
	  var timer = window.setInterval(function() {
		  box.innerHTML--;
		  //当box内数值为0时，停止定时器
		  if (box.innerHTML == 0) {
			  window.clearInterval(timer);
		  }
	  }, 1000);
  }
 </script>
</body>

例子2：显示当前时间，要求天数时间等都是两位数，页面每秒刷新

<body>
<div id="box2"></div>

 <script type="text/javascript">
  //现在是 2020年11月24日11：24:01(星期二)，欢迎您的到访
  //创建Date对象
  var date = new Date();
  var box2 = document.getElementById("box2");
  //调用函数
  timemove();
  
  //定义函数
  function timemove() {
      //定义个个时间变量
	  var date = new Date();
	  var year = date.getFullYear();
	  var mth = date.getMonth() + 1;
	  var d = date.getDate();
	  var h = date.getHours();
	  var m = date.getMinutes();
	  var s = date.getSeconds();
	  var week = date.getDay();
	  
	  //定义拼接变量,变量调用转换两位数函数
	  var time = "现在是" + year + "年" + fn(mth) + "月" + fn(d) + "日" + fn(h) + ":" + fn(m) +  ":" + fn(s) +"（星期"+week+"）";
	  
	  //定义函数，将一位数"1"转为两位数"01"
	  function fn(str) {
		  str < 10 ? str = "0" + str : str;
		  return str;
	  }
	  //定义定时器，调用函数，每秒刷新
	  setInterval(timemove, 1000);
	  //拼接变量显示在页面
 	  box2.innerHTML = time;
  }
 </script>
</body>

ZPD_zpd

关注

9
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
JS定时器，获取当前时间显示在页面并每秒刷新

setInterval()setInterval(code,millisec,lang)code：必需。要调用的函数或要执行的代码串。millisec：必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。lang：可选。 JScript | VBScript | JavaScript
复制链接

扫一扫