js时间 怎么开始,也怎么停止?

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

<div id="time"></div>



 <button onclick="stops()">时光停留</button>

 <button onclick="start()">开始流走</button>

<script>

var stop=document.getElementById("stop");

var int=self.setInterval("clock()",50);

var stop=0;

function clock(){

  var t=new Date();

  var s=t.toLocaleTimeString();

  document.getElementById("time").innerHTML=s;

}


function start(){

   int=setTimeout("clock()",50);

}

function stops(){

   clearTimeout(int);

}

</script>

</body>

</html>

我的思路如何随意在停止按钮 不动。
然后在开始按钮 一动, 时间就可以走。 
由于jsbin打不开。 请见谅。

慕斯王
浏览 756回答 1
1回答

HUWWW

试试看:jsfiddle<div&nbsp;id="time"></div><button&nbsp;id="stopBtn">时光停留</button><button&nbsp;id="startBtn">开始流走</button>var&nbsp;stop=document.getElementById("stop");var&nbsp;intervalId;function&nbsp;clock(){&nbsp;&nbsp;var&nbsp;t=new&nbsp;Date();&nbsp;&nbsp;var&nbsp;s=t.toLocaleTimeString();&nbsp;&nbsp;document.getElementById("time").innerHTML&nbsp;=&nbsp;s; }document &nbsp;&nbsp;&nbsp;&nbsp;.querySelector('#startBtn') &nbsp;&nbsp;&nbsp;&nbsp;.addEventListener('click',&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;intervalId&nbsp;=&nbsp;setInterval(clock,&nbsp;50);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.disabled&nbsp;=&nbsp;true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('#stopBtn').disabled&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;false);&nbsp;&nbsp;&nbsp;&nbsp; document &nbsp;&nbsp;&nbsp;&nbsp;.querySelector('#stopBtn') &nbsp;&nbsp;&nbsp;&nbsp;.addEventListener('click',&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(intervalId);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.disabled&nbsp;=&nbsp;true;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.querySelector('#startBtn').disabled&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;false);
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript