资讯专栏INFORMATION COLUMN

javascript 实现一个简单的带毫秒的倒计时

Amos / 1247人阅读

摘要:最近做的一个微信端小游戏,通过摇一摇获得金币,这里有一个倒计时的几秒钟时间限制,带有毫秒。把时间看成是不断减少的数字,设定一个时间总数,如需要秒,总数就为,每隔毫秒减少分钟为总数除以得到的整数,毫秒为当前总数减去分钟数乘以

最近做的一个微信端小游戏,通过摇一摇获得金币,这里有一个倒计时的几秒钟时间限制,带有毫秒。

设计图毫秒采用小数点后三位,我觉得两位比较好看,所以改成了两位的。
实现之前,我还是先在网上搜索了一下各种实现方法,有很多,常见的都是利用日期时间对象来解决。
所以我觉得这种有些过于繁琐,毕竟这种小游戏时间单位数量级只有秒,就试着写了一种简单的方法。

https://jsfiddle.net/g35s9oy1/embedded/result,js,html,css/

这里使用了按钮触发,实际页面是检测手机摇晃触发,因此也不需要暂停、恢复, 有需要可以再添加。

思路解释一下:
1. 1000毫秒为1秒,我这里是分钟后面毫秒有两位数,所以定时器间隔时间就设为10毫秒。
2. 把时间看成是不断减少的数字,设定一个时间总数,如需要5秒,总数就为500,每隔10毫秒减少1
3. 分钟为总数除以100得到的整数,毫秒为当前总数减去分钟数乘以100.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85820.html

相关文章

  • setTimeout 或者 setInterval,关于 Javascript 计时器:你需要知道

    摘要:所以,我们可以将理解为计时结束是执行任务的必要条件,但是不是任务是否执行的决定性因素。的意思是,必须超过毫秒后,才允许执行。 先来回答一下下面这个问题:对于 setTimeout(function() { console.log(timeout) }, 1000) 这一行代码,你从哪里可以找到 setTimeout 的源代码(同样的问题还会是你从哪里可以看到 setInterval 的...

    Warren 评论0 收藏0
  • Javascript学习总结 - JS基础系列三

    摘要:案例每隔毫秒调用函数并显示时间。当点击按钮时,停止时间代码如下计时器每隔毫秒调用函数,并将返回值赋值给计时器计时器,在载入后延迟指定时间后去执行一次表达式仅执行一次。该值标识要取消的延迟执行代码块。 简述 本系列将持续更新Javascript基础部分的知识,谁都想掌握高端大气的技术,但是我觉得没有一个扎实的基础,我认为一切高阶技术对我来讲都是过眼云烟,要成为一名及格的前端工程师,必须把...

    zlyBear 评论0 收藏0
  • JS 异步实现

    摘要:由于引擎同一时间只执行一段代码这是由单线程的性质决定的,所以每个代码块阻塞了其它异步事件的进行。这意味着浏览器将等待着一个新的异步事件发生。异步的任务执行的顺序是不固定的,主要看返回的速度。 我们经常说JS是单线程的,比如node.js研讨会上大家都说JS的特色之一是单线程的,这样使JS更简单明了,可是大家真的理解所谓JS的单线程机制吗?单线程时,基于事件的异步机制又该当如何,这些知识...

    sihai 评论0 收藏0
  • javascript日期类型(Date)与php日期类型详解

    摘要:注意客户端与服务器日期进行传输的时候一般都是用大整数时间戳进行传输。 前言 一个网站的开发需要要UI、前端、后端三种工程师。现在的企业在招聘前端工程师的时候一般都要求其了解或者掌握一些后端的知识。因此,此文章主要介绍javascript的日期类型,也粗略的介绍一下php的日期类型,以及二者是如何交互数据的。 时间戳 什么是时间戳 时间戳是从格林威治时间1970年1月1日(00:0...

    chemzqm 评论0 收藏0
  • javascript日期类型(Date)与php日期类型详解

    摘要:注意客户端与服务器日期进行传输的时候一般都是用大整数时间戳进行传输。 前言 一个网站的开发需要要UI、前端、后端三种工程师。现在的企业在招聘前端工程师的时候一般都要求其了解或者掌握一些后端的知识。因此,此文章主要介绍javascript的日期类型,也粗略的介绍一下php的日期类型,以及二者是如何交互数据的。 时间戳 什么是时间戳 时间戳是从格林威治时间1970年1月1日(00:0...

    BDEEFE 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<