JS使用setInterval计时器实现挑战10秒

2025-09-26 00:20:48

JS实现挑战10秒，主要用到setInterval计时器，供大家参考，具体内容如下

效果图

## 完整代码

<html lang="en">
<head>
<meta charset="UTF-8">
<title>js计时器</title>
</head>
<body>
<p style="font-size: 2em;color: blue;font-style: italic;">挑战10.00秒</p>
<p id="time" style="font-size: 2em;color: red;">00:00</p>
<input type="button" value="开始" onclick="oStart()">
<input type="button" value="结束" onclick="oStop()">
<input type="button" value="重置" onclick="oReset()">
<script>
 var n= 0, timer=null;
 var txt=document.getElementById("time");
 //开始计时
 function oStart() {
  clearInterval(timer);
  timer=setInterval(function () {
   n++;
   var m=parseInt(n/60);
   var s=parseInt(n%60);
   txt.innerText=toDub(m)+":"+toDub(s);
  },1000/60);
 };
 //暂停并且清空计时器
 function oStop() {
  clearInterval(timer);
//  txt.innerText="我爱你";
 }
 //重置
 function oReset() {
   txt.innerText="00:00";
  n=0;
 }
 //补零
 function toDub(n){
  return n<10?"0"+n:n;
 }
</script>
</body>
</html>

更多关于倒计时的文章请查看专题：《倒计时功能》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

一个不错的js html页面倒计时可精确到秒

一个不错的js html页面倒计时可精确到秒,很简单,但和实用 <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span>
JS使用setInterval实现的简单计时器功能示例

本文实例讲述了JS使用setInterval实现的简单计时器功能.分享给大家供大家参考,具体如下: 使用setInterval实现计时,并且满60秒向分钟进一,满60分钟向小时进一. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS计时器</title> <script> window.onload =
js几秒以后倒计时跳转示例

复制代码代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css" /> <script language="javascript" type=
js代码实现点击按钮出现60秒倒计时

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现点击按钮倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
原生JS实现简单的倒计时功能示例

本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr
JS 倒计时实现代码(时、分，秒)

JS实现倒计时(时.分,秒) var interval = 1000; function ShowCountDown(year,month,day,divname) { var now = new Date(); var endDate = new Date(year, month-1, day); var leftTime=endDate.getTime()-now.getTime(); var leftsecond = parseInt(leftTime/1000); //var day1=
JS实现倒计时(天数、时、分、秒)

本文实例为大家解析了JS实现倒计时的详细过程,供大家参考,具体内容如下注释: parseInt() 函数可解析一个字符串,并返回一个整数. 语法: parseInt(string, radix) 例: parseInt("10"); //返回 10 parseInt("19",10); //返回 19 (10+9) parseInt("11",2); //返回 3 (2+1) parseInt("17",8); //返回 1
简单易用的倒计时js代码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20
JavaScript setInterval()与setTimeout()计时器

JavaScript是单线程语言,但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行.超时值是指在指定时间之后执行代码,间歇时间值是指每隔指定的时间就执行一次代码. 超时调用超时调用使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(代码执行前的等待时间).其中,第一个参数可以是一个字符串(和eval()中使用的字符串一样),也可以是一个函数. 第二个参数是一个表示等待多长时间的毫秒数,但是在该时间过去后代码并不一定执行.JavaSc
2种简单的js倒计时方式

一般倒计时的时间都是后台传来的然后渲染到页面,这里有2个简单的倒计时方式 //带天数的倒计时 function countDown(times){ var timer=null; timer=setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(times > 0){ day = Math.floor(times / (60 * 60 * 24)); hour = Math.floor(times / (

JS使用setInterval计时器实现挑战10秒

相关推荐

随机推荐