html计时器可暂停,JS实现可暂停秒表计时器的效果（图文详解）

JavaScript是前端开发中必不可少的一部分，很多效果的实现离不开JS，正在学习JavaScript的小伙伴，你会用JS制作秒表计时器吗？这篇文章就和大家如何用JS实现秒表计时器的效果，并且点击按钮可以停止计时，最后将js秒表计时器的代码分享给大家，感兴趣的朋友可以参考借鉴一下。

用JS写可停止的秒表计时器需要用到很多JavaScript知识，比如点击事件，function，if函数等等，如有不清楚的同学可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程，一定要把基础学好啊！

实例详解：如何用JavaScript制作秒表计时器，并且可以点击按钮停止计时。

HTML部分：

在form表单中，用input创建一个开始计时按钮(点击按钮开始计时，时间以秒为单位)，一个停止按钮(点击可停止计时)，一个文本框(用于显示时间)，具体代码如下：

单击开始计时按钮，输入框将从0开始一直计时。以秒计算

单击停止按钮，停止计时，再次点击开始按钮，又再次开始计时。

JavaScript部分：

页面已经搭建好了，接下来用JavaScript让其实现效果。分别给开始按钮和停止按钮一个点击事件，当点击停止后，计时暂停(停止后时间不清零)，用setTimeout设置计时单位为秒，具体代码如下：var c=0;

var t;

var timer_is_on=0;

function timedCount(){

document.getElementById('txt').value=c;

c=c+1;

t=setTimeout(function(){timedCount()},1000);

}

function start(){

if (!timer_is_on){

timer_is_on=1;

timedCount();

}

function stop(){

clearTimeout(t);

timer_is_on=0;

}

效果图：

JavaScript秒表计时器的效果如上图所示，以上只截了一张图，大家可以动手尝试，看看你的代码能不能实现计时的效果，教程介绍比较详细，希望可以帮助到你！

更多相关教程请访问 JavaScript中文参考手册

html计时器可暂停,JS实现可暂停秒表计时器的效果（图文详解）相关推荐

html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
Node.js中的不安全跳转如何防御详解
为什么80%的码农都做不了架构师?>>> Node.js中的不安全跳转如何防御详解导语: 早年在浏览器大战期间,有远见的Chrome认为要运行现代Web应用,浏览器必须有一个 ...
Node.js卸载与重装，zip与msi安装详解
Node js卸载与重装,zip与msi安装详解文章目录 Node js卸载与重装,zip与msi安装详解卸载安装选择msi下载安装第一步: 第二步: 第三步: 选择zip压缩包安装(选择m ...
new Date将字符串转化成日期格式兼容IE，ie8如何通过new Date将字符串转化成日期格式，js中如何进行字符串替换， replace() 方法详解
new Date将字符串转化成日期格式兼容IE,ie8如何通过new Date将字符串转化成日期格式,js中如何进行字符串替换, replace() 方法详解 //获得年月日时分秒 //传入日期// ...
matlab合并有序数组,《数组合并》JS合并两个数组的3种方法详解
这篇文章主要介绍了JS合并两个数组的3种方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一个包解决你所有的JS问题,点击获取需要将两个数组 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
php秒表计时器,JS实现可暂停秒表计时器的效果（图文详解）
JavaScript是前端开发中必不可少的一部分,很多效果的实现离不开JS,正在学习JavaScript的小伙伴,你会用JS制作秒表计时器吗?这篇文章就和大家如何用JS实现秒表计时器的效果,并且点击按 ...
c2064 项不会计算为接受0个参数的函数_【JS必知必会】高阶函数详解与实战
本文涵盖前言高级函数概念函数作为参数的高阶函数 map filter reduce sort详解与实战函数作为返回值的高阶函数 isType函数与add求和函数如何自己创建高阶函数前言一 ...
php引入路径配置,require.js的路径配置和css的引入方法详解
这篇文章主要介绍了详解require.js配置路径的用法和css的引入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前 ...

html计时器可暂停,JS实现可暂停秒表计时器的效果（图文详解）

html计时器可暂停,JS实现可暂停秒表计时器的效果（图文详解）相关推荐

最新文章

热门文章