html 倒计时毫秒,实现毫秒级倒计时

#### js文件

~~~

// indes.js

/**

* 需要一个目标日期，初始化时，先得出到当前时间还有剩余多少秒

* 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX

* 2.提供一个时钟，每10ms运行一次，渲染时钟，再总ms数自减10

* 3.剩余的秒次为零时，return，给出tips提示说，已经截止

// 定义一个总毫秒数，以一天为例

// var total_micro_second = 3600 * 1000*24;//这是一天倒计时

// var total_micro_second = 10 * 1000;//这是10秒倒计时

var total_micro_second = 3600 * 1000 * 1; //一个小时的倒计时

/* 毫秒级秒杀倒计时 */

function countdown(that) {

// 渲染倒计时时钟

that.setData({

clock: dateformat(total_micro_second)//格式化时间

});

if (total_micro_second <= 0) {

that.setData({

clock: "秒杀结束"

});

// timeout则跳出递归

return;

}

//settimeout实现倒计时效果

setTimeout(function () {

// 放在最后--

total_micro_second -= 10;

countdown(that);

}

, 10)//注意毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms

}

// 时间格式化输出，如1天天23时时12分分12秒秒12 。每10ms都会调用一次

function dateformat(micro_second) {

// 总秒数

var second = Math.floor(micro_second / 1000);

// 天数

var day = Math.floor(second / 3600 / 24);

// 总小时

var hr = Math.floor(second / 3600);

// 小时位

var hr2 = hr % 24;

// 分钟位

var min = Math.floor((second - hr * 3600) / 60);

// 秒位

var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;

// 毫秒位，保留2位

var micro_sec = Math.floor((micro_second % 1000) / 10);

return day + "天" + hr2 + "时" + min + "分" + sec + "秒" + micro_sec;

}

Page({

data: {

clock: ''

onLoad: function () {

countdown(this);

}

});

~~~

#### wxml

~~~

秒杀: {{clock}}

~~~

在小程序内部的方法里面调用，

~~~

// 自定义时间

let total_micro = 3600 * 1000 * this.data.examTime;

countdown(this, total_micro);

~~~

html 倒计时毫秒,实现毫秒级倒计时相关推荐

js实现倒计时，定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
js 实现倒计时（短信验证码倒计时）
思路: 1.设置一个倒计时的时间长度: 2.设置开始时间和当前时间: 3.结束时间是开始时间+倒计时间: ...
android倒计时录制视频下载,什么软件可以制作倒计时视频?安卓手机制作倒计时片头的方法...
注意此教程方案是『安卓手机端教程方案』如果在手机端操作不方便或对眼睛不好也可以用另外电脑端的教程方案操作:10秒倒计时视频[找更多方案] 今天要介绍怎样制作视频片头是在安卓手机上制作一段倒计时片头 ...
java怎样做倒计时,Java 中怎么实现倒计时
Java codepublic class 倒计时时钟 { //小时 private int hours; //分钟 private int min; //秒 private int second; ...
【安卓基础】倒计时按钮封装（验证码倒计时按钮）
验证码按钮在项目的使用频率应该是100%,现在大多数应用都会采用手机号码登陆,通常都会支持发送验证码登陆的功能. 我在项目中也遇到这样的功能,特别在忘记密码的界面,我注意到一点:当发送验证码之后,要6 ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
js中的时间与毫秒数互相转换,倒计时
1.日期格式转换成毫秒数 var oldTime = (new Date("2017-03-22 11:11:11")).getTime(); //得到毫秒数也可以支持 &qu ...
html中倒计时精确到毫秒,倒计时功能精确到毫秒
拷贝源码直接可以运行,如果不能运行,那就是没有Jquery.js文件,怎么改,你懂得了,哈哈在线演示地址:http://www.ui3g.com/code/uicode-653.html 1.[代码 ...
商城倒计时（时分秒倒计时、分秒毫秒倒计时）
1.布局用法引用项目coutdowntimelibrary的CountDownView 如下 <carraydraw.com.coutdowntimelibrary.countdown.Co ...

html 倒计时毫秒,实现毫秒级倒计时

html 倒计时毫秒,实现毫秒级倒计时相关推荐

最新文章

热门文章