扬州网站商城建设价格表,太原做淘宝网站的,harry louis做受网站,专业网站建设常州之前做过电商网站倒计时的效果#xff0c;今天在倒计时的基础上#xff0c;把代码修改了一下#xff0c;改为计时器效果#xff0c;实现了以下功能#xff1a; 1.点击“开始”后#xff0c;按秒计时且“开始”文字变为“停止”#xff1b; 2.点击“停止”#xff0c;计…之前做过电商网站倒计时的效果今天在倒计时的基础上把代码修改了一下改为计时器效果实现了以下功能 1.点击“开始”后按秒计时且“开始”文字变为“停止” 2.点击“停止”计时停止文字变为“开始” 3.再点击“开始”计时器从0开始重新计时。 效果如图所示 “开始”和“停止”使用div标记实现利用innerHTML改变其中的文字内容。
div classstartTime开始/div !-- 单击开始再单击停止 --
div classdispTime/div !-- 显示计时器的部分 --完整代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8title计时器/titlestyle typetext/css.startTime {cursor: pointer;font-size: 30px;border: 1px solid #ccc;border-radius: 10px;width: 120px;margin: 10px auto;text-align: center;}.startTime:hover{background-color: aliceblue;}.dispTime {position: absolute;font-size: 60px;left: 50%;top: 30%;transform: translate(-50%, -50%);color:red;}/style/headbodydiv classstartTime开始/div !-- 单击开始再单击停止 --div classdispTime/div !-- 显示计时器的部分 --scriptvar startTime document.querySelector(.startTime);var dispTime document.querySelector(.dispTime);var times 0; //全局变量从0开始计时初始值为0var timer null; //全局变量,初始值为空startTime.addEventListener(click, function(){if(this.innerHTML开始){times 0; //清除之前的时间从0开始重新 计时timer setInterval(countTime, 1000); //开启定时器前面不能加关键字var ,那会变成局部变量定时器不能清除不会从0开始this.innerHTML停止; //文本设置为停止}else{clearInterval(timer); //停止定时器this.innerHTML开始; //文本设置为开始}});//countTime()函数把总秒数显示为时、分、秒效果function countTime() {var hh parseInt(times / 60 / 60 );hh hh 10 ? 0 hh : hh;var mm parseInt(times / 60 % 60);mm mm 10 ? 0 mm : mm;var ss parseInt(times % 60);ss ss 10 ? 0 ss : ss;dispTime.innerHTML hh : mm : ss;times;}/script/body
/html在这段代码中刚开始实现的时候没有把timer设置为全局变量而是在函数中使用了var关键字这样timer是局部变量结果定时器无法停止。后来去掉关键字vartimer成为全局变量好了于是最后把timer放在函数外直接定义为全局变量这样程序可读性好一些。 var timer setInterval(countTime, 1000);
