小程序自学系列（零基础学小程序002）---小程序实现电商秒杀倒计时效果

2301_82241647

于 2024-05-03 06:44:04 发布

阅读量74

点赞数 2

分类专栏：程序员文章标签：小程序

本文链接：https://blog.csdn.net/2301_82241647/article/details/138408102

版权

程序员专栏收录该内容

200 篇文章 0 订阅

订阅专栏

其实实现挺简单


<!--index.wxml-->

<view class="container">

<text >秒杀: {{clock}}</text>

<text>{{micro_second}}</text>

</view>

下面是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秒倒计时

 

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

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位



### 最后

**我还通过一些渠道整理了一些大厂真实面试主要有：蚂蚁金服、拼多多、阿里云、百度、唯品会、携程、丰巢科技、乐信、软通动力、OPPO、银盛支付、中国平安等初，中级，高级Java面试题集合，附带超详细答案，希望能帮助到大家。**

![新鲜出炉的蚂蚁金服面经，熬夜整理出来的答案，已有千人收藏](https://img-blog.csdnimg.cn/img_convert/59ba21750e2193b2ec4fab81e43bdb28.webp?x-oss-process=image/format,png)

**还有专门针对JVM、SPringBoot、SpringCloud、数据库、Linux、缓存、消息中间件、源码等相关面试题。**

![新鲜出炉的蚂蚁金服面经，熬夜整理出来的答案，已有千人收藏](https://img-blog.csdnimg.cn/img_convert/b4f2e404df08a6d0608fab1c78259654.webp?x-oss-process=image/format,png)

存中...(img-PHTj3ZRZ-1714689833345)]

**还有专门针对JVM、SPringBoot、SpringCloud、数据库、Linux、缓存、消息中间件、源码等相关面试题。**

[外链图片转存中...(img-CtbBrEIh-1714689833345)]

> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/topics/618154847)收录**