logo
電話:13843226952
 
工作時間:周一至周六:8:30-5:00  周日可聯系客服QQ
   
  建站咨詢㈠ 建站咨詢㈡ 售后服務 售前咨詢  
關于陽光,吉林市網站建設,吉林市網站制作,網絡公司
 當前位置:本站首頁 >>> 網站優化

【JavaScript】分秒倒計時器

日期:2016/12/31    來自:吉林市陽光網絡科技有限公司   作者:Admin   去百度查找  去Google查找

一、基本目標
在JavaScript設計一個分秒倒計時器,一旦時間完成使按鈕變成不可點擊狀態
具體效果如下圖,為了說明問題,調成每50毫秒也就是每0.05跳一次表

真正使用的時候,把window.onload=function(){...}中的setInterval("clock.move()",50);從50調成1000即可。
在時間用完之前,按鈕還是可以點擊的。
時間用完之后,按鈕就不能點擊了。

二、制作過程
<!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部分很簡單,需要被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>

 
上一篇:對于一個新手來說如何做好網站優化?
下一篇:PHP學習知識流程
  陽光新聞 更多>>>
吉林網站建設_吉林網頁制作-陽光新聞
移動建站的優勢在哪?
如何規劃網站的主題
網站優化注意事項
網站建設的趨勢
網站建設對企業發展有哪些助力
小程序未來的市場前景
  招賢納士 更多>>>
誠聘銷售精英合作伙伴
誠招吉林市網站建設商務經理
招聘吉林市網站建設技術員
公司招收吉林市網站開發學員
因業務發展需要特誠聘商務代表
  網站建設專題 更多>>>
陽光科技為您提供網站改版服務
為什么網頁設計要簡練?
如何在百度提交收錄,怎樣讓自己的網站排名
什么樣的網站最受訪客喜歡?
吉林市網站建設形式與內容應統一
網站管理與團隊經營的秘訣
優質的單頁網站如何創建
 
Copyright © 2008-2019 www.867440.tw, All Rights Reserved    
電話:13843226952  聯系人:王經理
ICP備案號:吉ICP備10003760號   技術支持:吉林網站建設
打造好的吉林網絡公司!我們為您提供有品質的吉林網站建設吉林市網站建設吉林網站制作吉林網頁制作吉林網站優化吉林seo服務!
pc蛋蛋刷蛋注册号