uniapp毫秒倒计时

毫秒倒计时

文章目录

毫秒倒计时
- template
- js

template

<view class="count-down-wrap fcc"><view>{{ countdown }}</view>
</view>

js

<script>var unpackTimeId = null;var total_micro_second = 0; // 总毫秒数export default {data() {return {countdown: ''}},onLoad(options) {// 测试let currentTime = 1647065671;let startTime = 1647069271;this.isDiffTime(currentTime, startTime);},methods: {/*** @param {Object} current 当前时间* @param {Object} start 开奖时间*/isDiffTime(current, start) {let diffTime = start - current;// 抽奖中： 活动开奖时间 < 当前时间if (start < current) {this.activityInfo.flagLottery = 1;return;}// 活动开始倒计时 【秒转为毫秒】total_micro_second = diffTime * 1000;// 开奖倒计时this.unpackCountDown();},/*** 开奖倒计时* 注意：毫秒时间频率，这里以100ms的频率*/unpackCountDown() {// 格式化时间、渲染数据this.dateFormat(total_micro_second);unpackTimeId = setInterval(() => {total_micro_second -= 100;// 倒计时结束if (total_micro_second < 0) {clearInterval(unpackTimeId);return;}// 格式化时间this.dateFormat(total_micro_second);}, 100)},/*** 格式化时间、处理数据* 根据需要封装方法*/dateFormat(micro_second) {// 总秒数var second = Math.floor(micro_second / 1000);var day = Math.floor(second / 3600 / 24); // 天数var hr = Math.floor(second / 3600); // 总小时// var hrDay = hr % 24; // 小时位var min = Math.floor((second - hr * 3600) / 60); // 分var sec = (second - hr * 3600 - min * 60); // 秒var micro_sec = Math.floor((micro_second % 1000) / 10); // 毫秒，保留2位// 根据需求返回格式// this.countdown = {//     h: formatNumber(hr),//  i: formatNumber(min),//     s: formatNumber(sec),//     ms: formatNumber(micro_sec)// };this.countdown = `${h}时${i}分${s}秒${ms}`;},}}
</script>

export const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}

uniapp毫秒倒计时相关推荐

商城倒计时（时分秒倒计时、分秒毫秒倒计时）
1.布局用法引用项目coutdowntimelibrary的CountDownView 如下 <carraydraw.com.coutdowntimelibrary.countdown.Co ...
Vue3毫秒倒计时（Countdown）
可自定义设置以下属性: 倒计时数值(countdown),必传,类型 number,单位ms,支持设置未来某时刻的时间戳或相对剩余时间,默认值 0 倒计时标题(title),类型 string | ...
html中倒计时精确到毫秒,倒计时功能精确到毫秒
拷贝源码直接可以运行,如果不能运行,那就是没有Jquery.js文件,怎么改,你懂得了,哈哈在线演示地址:http://www.ui3g.com/code/uicode-653.html 1.[代码 ...
uniapp实现倒计时
首先我们需要对时间戳进行格式化处理,处理成距离现在时间还有多少时分秒,00.00.00,小时.分钟.秒的格式,可以对格式转换做一个简单的封装处理 // 将时间戳转化为时分秒的格式,一般用作倒计时 fu ...
uniapp实现倒计时功能
随着网上购物平台不断增多,每个平台为了获得更多消费者的青睐,每个节日的福利秒杀成了必不可少的存在,微信小程序或者app中就常见到倒计时,本文实现了倒计时的功能. 实现效果: 实现上图图片中的倒计时功能 ...
uni-app活动倒计时功能
效果图实现原理:后端会给一个截止时间,前端获取当前时间,都转成时间戳,然后相减获得相差时间戳,然后转成天.小时.分钟.秒,通过定时器让他动起来就OK了.(需要注意的点是,当倒计时到达0的时候需要清除 ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
如何在前端编写一个精确到毫秒的倒计时
思路我之前在掘金上看到,有小天才的想法直接在倒计时的后面加一个gif.反正都看不清楚,所以只需要有个gif在固定的位置不停的播放就可以达到毫秒倒计时的效果. 真是小天才,我也是第一次看到竟然有这种解 ...
uni-app相关知识积累
uni-app笔记快捷键引入iconfont 本地引用远程引用使用iconfont 动态使用iconfont html获取用户IP地址和所属国家信息 html获取浏览器语言 html动态改变显 ...
【全网最短】实现倒计时：时分秒的功能
//计算时间差毫秒数 let t = Math.abs(new Date("2022-02-25 23:00:00") - new Date());//倒计时格式:天时分秒毫秒 l ...

uniapp毫秒倒计时

毫秒倒计时

文章目录

template

js

uniapp毫秒倒计时相关推荐

最新文章

热门文章