设为首页 加入收藏

TOP

JavaScript Timing 事件及两种时钟写法(二)
2019-07-05 18:10:39 】 浏览:146
Tags:JavaScript Timing 事件 时钟 写法
的变量:


myVar = setInterval(function, milliseconds);
clearInterval(myVar);
实例
类似上例,但是我们添加了一个“停止时间”按钮:


<p id="demo"></p>


<button onclick="clearInterval(myVar)">停止时间</button>


<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>


完整实例:


<!DOCTYPE html>
<html>
<body>
 
<p>此页面上的脚本启动这个时钟:</p>
 
<p id="demo"></p>
 
<button onclick="clearInterval(myVar)">停止时间</button>
 
<script>
var myVar = setInterval(myTimer ,1000);
function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
 
</body>
</html>


更多实例


另一个简单的计时


<!DOCTYPE html>
<html>
<body>
 
<button onclick="timedText()">试一试</button>
 
<p id="demo">点击“试一试”。我将在两秒,四秒和六秒过后显示。</p>
 
<script>
function timedText() {
  setTimeout(myTimeout1, 2000)
  setTimeout(myTimeout2, 4000)
  setTimeout(myTimeout3, 6000)
}
function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 秒";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 秒";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 秒";
}
</script>
 
</body>
</html>


由计时时间创建的时钟


<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =
  h + ":" + m + ":" + s;
  var t = setTimeout(startTime, 500);
}
function checkTime(i) {
  if (i < 10) {i = "0" + i};  // 在数字 < 10 之前加零
  return i;
}
</script>
</head>
 
<body onload="startTime()">
 
<div id="txt"></div>
 
</body>
</html>


 


首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Java集合类的数据结构 下一篇Java 软引用和弱引用

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目