zoukankan      html  css  js  c++  java
  • 【JavaScript】分秒倒计时器

    一、基本目标

    在JavaScript设计一个分秒倒计时器,一旦时间完毕使button变成不可点击状态

    详细效果例如以下图。为了说明问题。调成每50毫秒也就是每0.05跳一次表,


    真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000就可以。

    在时间用完之前,button还是能够点击的。

    时间用完之后。button就不能点击了。


    二、制作过程

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>time remaining</title>
    </head>
    <!--html部分非常easy,须要被javascript控制的行内文本与提交button都被编上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;
    		/*假设时间耗尽,那么。弹窗,使button不可用,停止不停调用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>


  • 相关阅读:
    Android应用开发学习笔记之事件处理
    [置顶] 炎炎夏日,给你一次极爽的开发体验!——统一开发环境功能升级优化,正式上线V2.0!
    POJ 3468 A Simple Problem with Integers (伸展树区间更新求和操作 , 模板)
    京东商城发现了一枚Bug
    iOS_40_核心动画
    SVN——库合并
    ORACLE 8i 遇到报错:ORA-01631: max # extents (505) reached in table
    HDU 5366:The mook jong 递推
    Linux平台下裸设备的绑定:
    CSP:使用CryptoAPI解码X509证书内容
  • 原文地址:https://www.cnblogs.com/yfceshi/p/7047111.html
Copyright © 2011-2022 走看看