p图软件_如何给图片加水印_一键抠图软件在线制作_一键抠图免费软件_制作白底图
当前位置:建站首页 > 新闻资讯 > 最新签约 >

【JavaScript】分秒倒数计时器—吉林省企业网站建

发表日期: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

相关新闻

奥德森电梯轿厢

【主营业务商品/营销推广重要词】:青岛市食梯,青岛市食品类电梯轿厢,青岛市传菜电梯轿厢...

日期:2021-02-05 浏览次数:171

微信小程序常见问答_使用JavaScript完成拖拽改变元

运用JavaScript完成拖动更改原素尺寸 文中关键详细介绍了JavaScript完成拖动更改原素尺寸的...

日期:2021-01-12 浏览次数:157

家具网上商城企业如何从传统向转型过渡

【引言】传统式家俱家居家具公司根据电子商务互连网转型发展,为此连接大量样化的方式資...

日期:2021-01-11 浏览次数:51

三八节再成电商价格战硝烟战场【凡科】广州网

重要词:三八节再成电子商务价钱战硝烟竞技场 现有 4461 人访问 自打2013年天猫商城商城系统...

日期:2021-01-04 浏览次数:66

【广州网站建设】网站优化的具体实操【凡科】

重要词: 【广州市企业网站建设 】seo优化的实际实际操作 现有 214 人访问 seo优化详尽提升这些...

日期:2020-12-15 浏览次数:91

【广州网站建设】网站优化的具体实操【凡科】

重要词: 【广州市企业网站建设 】seo优化的实际实际操作 现有 214 人访问 seo优化详尽提升这些...

日期:2020-12-15 浏览次数:104