发表日期:2021-02-15 18:35文章编辑:jianzhan浏览次数: 标签:
一、基本总体目标
在JavaScript设计方案一个分秒倒数计时器,一旦時间进行使按键变为不能点一下情况
实际实际效果以下图,以便表明难题,调成每50毫秒也便是每0.05跳一次表
真实应用的情况下,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000就可以。
在時间用完以前,按键還是能够点一下的。
時间用完以后,按键也不能点一下了。
二、制作全过程
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title time remaining /title
/head
!--html一部分非常简单,必须被javascript操纵的内行人文字与递交按键都被编上ID--
body
剩下時间: span id="timer" /span
input id="go" type="submit" value="go" /
/body
/html
script
/*主涵数要应用的涵数,开展申明*/
var clock=new clock();
/*偏向记时器的指针*/
var timer;
window.onload=function(){
/*主涵数就在每50秒启用1次clock涵数中的move方式就可以*/
timer=setInterval("clock.move()",50);
}
function clock(){
/*s是clock()中的自变量,非var那类全局性自变量,意味着剩下秒数*/
this.s=140;
this.move=function(){
/*輸出前先启用exchange涵数开展秒到分秒的变换,由于exchange并不是在主涵数window.onload应用,因而不用开展申明*/
document.getElementById("timer").innerHTML=exchange(this.s);
/*每被启用一次,剩下秒数就自减*/
this.s=this.s-1;
/*假如時间耗光,那麼,弹出窗口,使按键不能用,终止不断启用clock涵数中的move()*/
if(this.s 0){
alert("時间到");
document.getElementById("go").disabled=true;
clearTimeout(timer);
}
}
}
function exchange(time){
/*javascript的除法是浮点除法,务必应用Math.floor取其整数金额一部分*/
this.m=Math.floor(time/60);
/*存有取余计算*/
this.s=(time%60);
this.text=this.m+"分"+this.s+"秒";
/*传回来的方式主要参数time不必应用this,而其他在本涵数应用的自变量则务必应用this*/
return this.text;
}
/script