js如何实现计时器开始和停止,js设置计时器
javascript中如何通过一个按钮来实现开始和停止的功能？
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlechoujiang/title
script
var time=null;
var list="500万,直升飞机,宇宙飞船,豪华轿车,别墅".split(",");
var bol = false;
function startRun(){
var i=Math.random()*list.length;
i=Math.floor(i);
document.getElementById("award").innerText=list[i];
document.getElementById("cc").value="停止";
time=setTimeout("startRun()",100);
}
function stopRun(){
if(time!=null)
document.getElementById("cc").value="开始";
clearTimeout(time);
}
function startorstop(){
if(bol)
stopRun();
else
startRun();
bol = !bol;
}
/script
/head
body
恭喜您获得的奖品：
div id="award" style="font-size:100px; color:red"
/div
input type="button" id="cc" value="开始" onclick="startorstop()"
/body
/html
javascript定时器如何暂停及继续
//?html
div当前时间为:span?id="timeNow"/span?/div
button?id="timeBegin"计时开始/button
button?id="timeEnd"计时结束/button
button?id="timeClear"计时清除/button
//?Javascript
script?type="text/javascript"
????//定义初始值?计时器
????var?count?=?0;
????var?timer?=?"";
????//开始计时
????function?BeginTime(){
????????var?beginBtn?=?document.getElementById("timeBegin");
????????beginBtn.onclick?=?function(){
????????????timer?=?setInterval(function(){
????????????????count?++?;
????????????????document.getElementById("timeNow").innerHTML?=?count?/?100;
????????????},10)
????????}
????}
????//结束计时
????function?EndTime(){
????????var?endBtn?=?document.getElementById("timeEnd");
????????endBtn.onclick?=?function(){
????????????clearInterval(timer);
????????}
????}
????//计时清除
????function?ClearTime(){
????????var?clearBtn?=?document.getElementById("timeClear");
????????clearBtn.onclick?=?function(){
????????????document.getElementById("timeNow").innerHTML?=?"";
????????}
????}
????BeginTime();
????EndTime();
????ClearTime();
/script
//??The?Harder?You?Work,?The?Luckier?You?Will?Be.?（Jensonhui.com）
用javascript写一个计时器程序，有启动暂停和复位
#html:
input?type="button"?value="启动"?id="btnStart"?/
input?type="button"?value="复位"?id="btnReset"?/
label?id="lblTime"0:0:0:0/label
#javascript:
window.onload?=?function?()?{
????var?start?=?document.getElementById("btnStart");
????var?reset?=?document.getElementById("btnReset");
????var?time?=?document.getElementById("lblTime");
????
????var?h?=?0,?m?=?0,?s?=?0,?ms?=?0,?t;
????//开始计时
????start.onclick?=?function?()?{
????????bvalue?=?start.value;
????????if?(bvalue?==?"启动")?{
????????????t?=?window.setInterval(function?()?{
????????????????if?(ms?==??100)?{
????????????????????s?+=?1;
????????????????????ms?=?0;
????????????????}
????????????????if?(s?==??60)?{
????????????????????m?+=?1;
????????????????????s?=?0;
????????????????}
????????????????if?(m?==??60)?{
????????????????????h?+=?1;
????????????????????m?=?0;
????????????????}
????????????????time.textContent?=?h?+?":"?+?m?+?":"?+?s?+?":"?+?ms;
????????????????ms++;
????????????},?10);
????????????start.value?=?"暂停";
????????}
????????else?{
????????????window.clearInterval(t);
????????????start.value?=?"启动";
????????}
????}
????//复位
????reset.onclick?=?function?()?{
????????window.clearInterval(t);
????????time.textContent?=?0?+?":"?+?0?+?":"?+?0?+?":"?+?0;
????}
}
制作倒计时有开始和暂停按钮用js完整代码实现
!doctype?html
html?lang="en"
head
????meta?charset="UTF-8"
????titleDocument/title
/head
body
input?placeholder="请输入时间"?id="inp"
button??onclick="go()"start/buttonbutton?onclick="stop()"stop/buttonbutton?id="jixu"?onclick="jixu()"?style="display:?none;"continue/button
div?id="result"/div
script
????var?time,
????????????div=document.getElementById('result'),
????????????stopState?=?false;
????function?go(){
????????time?=?document.getElementById('inp').value;
????????timeout();
????}
????function?timeout(){
????????if(time?==''){
????????????alert('请输入时间')
????????????return;
????????}
????????setTimeout(function(){
????????????time--;
????????????div.innerText?=?time;
????????????if(time!==0??!stopState){
????????????????timeout();
????????????}
????????},1000);
????}
????function?jixu(){
????????time?=?Number(document.getElementById('result').innerText);
????????document.getElementById('jixu').style.display?=?'none';
????????stopState?=false;
????????timeout();
????}
????function?stop(){
????????document.getElementById('jixu').style.display?=?'';
????????stopState?=?true;
????}
/script
/body
/html