js秒表计时器代码（js毫秒计时器）

本篇文章给大家谈谈js秒表计时器代码，以及js毫秒计时器对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、怎样用javascript做一个计时器
• 2、自己用js写了一个计时器，原理就是先10秒钟倒计时到0的时候再自动倒计时5秒结束后又跳回倒计时10秒循环
• 3、js中计时器返回数值

怎样用javascript做一个计时器

计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器.

计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面.

那现在我们来完成这个界面

label计时:/label

input type="text" name="" id="timer"/

button onclick="pause(this)" id="pause" state="on"暂停/button

button onclick="restart()"重新开始/button

给标签元素一个ID是为了获取其中的标签, 然后加入了两个点击事件, 计数器的暂停, 和重新开始事件.

首先我们来完成开始计时的处理, 开始计时主要还是是用了setInterval的方法, 其中每隔1秒执行一次方法,

这样我们就可以对时间做处理, 就像开头所说60秒等于1分钟..., 所以这里就需要用判断来处理, 最后就将其中的得到的秒,分,时显示到输入框里.

var ele_timer = document.getElementById("timer");

var n_sec = 0; //秒

var n_min = 0; //分

var n_hour = 0; //时

//60秒 === 1分

//60分 === 1小时

function timer() {

return setInterval(function () {

var str_sec = n_sec;

var str_min = n_min;

var str_hour = n_hour;

if ( n_sec 10) {

str_sec = "0" + n_sec;

}

if ( n_min 10 ) {

str_min = "0" + n_min;

}

if ( n_hour 10 ) {

str_hour = "0" + n_hour;

}

var time = str_hour + ":" + str_min + ":" + str_sec;

ele_timer.value = time;

n_sec++;

if (n_sec 59){

n_sec = 0;

n_min++;

}

if (n_min 59) {

n_sec = 0;

n_hour++;

}

}, 1000);

}

var n_timer = timer();

我们用timer方法包装setInterval方法是为了,后面暂停和重新开始做处理.

用户点击了暂停, 计时器就停止计时, 用户继续点击这个按钮, 计时器继续计时. 所以这里有一个状态需要控制,这个状态我们给这个按钮一个属性.

//暂停和继续

function pause(self) {

var state = self.getAttribute("state");

if (state === "on") {

clearInterval(n_timer);

self.textContent = "继续";

self.setAttribute("state", "off");

} else {

n_timer = timer();

self.textContent = "暂停";

self.setAttribute("state", "on");

}

}

最后我们来看一下重新开始, 重新开始事件就更加简单了. 将计数器清0, 然后改变暂停按钮初始状态.

function restart() {

clearInterval(n_timer);

n_sec = 0;

n_min = 0;

n_hour = 0;

n_timer = timer();

var ele_pause = document.getElementById("pause");

ele_pause.textContent = "暂停";

ele_pause.setAttribute("state", "on");

}

这样就完成了计时的功能.效果如下

自己用js写了一个计时器，原理就是先10秒钟倒计时到0的时候再自动倒计时5秒结束后又跳回倒计时10秒循环

我简单写了个 你看看

html

head/head

body onload="time()"

script type="text/javascript"

var count = 11;

function time(){

count--;

if(count = 0){

count = 6;

time1();

return;

}

document.getElementById('msg').innerHTML = '购买倒计时还剩0分'+count+'秒';

setTimeout(time,1000);

}

function time1(){

count --;

if(count = 0){

count = 11;

time();

return;

}

document.getElementById('msg').innerHTML = '付款倒计时还剩0分'+count+'秒';

setTimeout(time1,1000);

}

/script

div id="msg"/div

/body

js中计时器返回数值

JS可以实现很多java代码不易完成的功能。这里学习一些js中的计时器事件。

JavaScript 一个设定的时间间隔之后来执行代码，称之为计时事件。

主要通过两个方法来实现：

1.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

2.setTimeout() - 暂停指定的毫秒数后执行指定的代码

并且，这两个方法都是window对象的方法。

首先，介绍setInterval()方法，该方法值得是间隔一定的毫秒数不停的执行指定的代码。

语法：window.setInterval(”js代码，函数等“，毫秒数);

实例1：每三秒弹出一个hello

setInterval(function(){alert("Hello")},3000);

实例2：显示当前时间，通过按钮实现时间的停止，开始

script type="text/javascript"

var myVar;

function startTimer(){

/*setInterval() 间隔指定的毫秒数不停地执行指定的代码*/

myVar=setInterval(function(){myTimer()},1000);

}

function myTimer()/* 定义一个得到本地时间的函数*/

{

var d=new Date();

var t=d.toLocaleTimeString();

document.getElementById("demo").innerHTML=t;

}

function stopTimer()

{/* clearInterval() 方法用于停止 setInterval() 方法执行的函数代码*/

clearInterval(myVar);

}

/script

setTimeout() 方法

在html或jsp中

body

h4 id="demo"/h4

input type="button" onclick="startTimer()" value="开始"

input type="button" onclick="stopTimer()" value="停止"

/body

对于setTimeout()方法，指的是指定的毫秒数后执行指定的代码或方法。

语法：window.setTimeout("javascript 函数",毫秒数);

实例1：3秒钟后弹出”hello“提示框

setTimeout(function(){alert("Hello")},3000);

实例2：三秒钟后跳转到前一个页面

script type="text/javascript"

setTimeout(function(){

window.history.back();

},3000);

/script

如何执行停止呢？

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。这里注意myVar必须是一个全局变量。实例如下：

var myVar;

function myFunction()

{

myVar=setTimeout(function(){alert("Hello")},3000);

}

function myStopFunction()

{

clearTimeout(myVar);

}

以上就把js计时器的基本功能简要介绍了，具体的使用场景，想要深刻理解，只有到项目用到时方可有新的理会。

js秒表计时器代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js毫秒计时器、js秒表计时器代码的信息别忘了在本站进行查找喔。