专注国内外云服务器
分享建站技术教程

使用JavaScript实现简单的秒表效果

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

吾上云WORDPRESS教程最新“使用JavaScript实现简单的秒表效果”

想要实现一个简单的秒表,点击启动按钮时开始计时,随后启动按钮变为暂停,点击暂停暂停计时,点击复位回到最初始状态。今天就分享一个使用JavaScript实现简单的秒表效果。

效果:

JavaScript代码如下:



 Title
 #showTime
 {
  width: 300px;
  height: 60px;
  font-size: 60px;
  line-height: 60px;
 }
 
00:00:00
//—————— var time,showTime,startBn,restBn,pauseDate; //布尔开关 var bool=false; //暂停的累计时间 var pauseTime=0; init(); function init() { showTime=document.getElementById("showTime"); startBn=document.getElementById("startBn"); restBn=document.getElementById("restBn"); startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮 restBn.addEventListener("click",clickHandler);//复位按钮 setInterval(animation,16); } //转化时间函数 function animation() { if(!bool) return; //前时间减去上次开启时间减去暂停累计时间 var times=new Date().getTime()-time-pauseTime; var minutes=Math.floor(times/60000);//毫秒转化为分钟 var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟 将time减去分钟 除去1000得出 秒 var ms=Math.floor((times-minutes*60000-seconds*1000)/10);// showTime.innerHTML= (minutes<10 ? "0" +minutes : minutes)+":" +(seconds<10 ? "0"+seconds :seconds)+":" +(ms<10 ? "0"+ms : ms); } //点击时的事件 function clickHandler(e) { e= e || window.event; if(this===startBn){ bool=!bool; if(bool){ this.innerHTML="暂停"; //如果我们上一次暂停时间是空,表示没有暂停过,因此,直接返回0 //如果上次的暂停时间是有值得,用当前毫秒数减去上次的毫秒数,这样就会得到暂停时间 pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate); if(time) return; time=new Date().getTime(); return;//是为bool判断跳出 } this.innerHTML="启动"; pauseDate=new Date().getTime(); return;//是为this是否等于startBn判断跳出 } startBn.innerHTML="启动"; pauseTime=0; pauseDate=null; bool=false; time=0; showTime.innerHTML="00:00:00"; }

以上就是使用JavaScript实现简单的秒表效果方法。

文章来源于互联网WORDPRESS教程:使用JavaScript实现简单的秒表效果,
阿里云服务器89元起,点击购买
腾讯云服务器95元/年起 点击购买

相关推荐: WordPress 5.6版本Simone已正式发布,附中英文版下载地址

WordPress 5.6 被命名为 Simone,是为了纪念尼娜·西蒙妮(Nina Simone),已于 2020 年 12 月 8 日正式对外发布。WordPress 5.6 版本为我们带来了无数种自由释放想法并将其付诸实践的方法,它使用全新的默认主题犹如…

赞(0)
未经允许不得转载:吾上云 » 使用JavaScript实现简单的秒表效果
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们