美文网首页
wepy小程序倒计时

wepy小程序倒计时

作者: LJun_8251 | 来源:发表于2018-10-31 18:01 被阅读0次

<style lang="less">

</style>

<template>

  <view class="container">

    <text style="display: block;text-align: center;font-size: 30px;color: #f60;margin-top: 50px;">

  {{clock}} {{microSecond}}

</text>

  </view>

</template>

<script>

  import wepy from 'wepy'

  export default class me extends wepy.page {

    config = {

      navigationBarTitleText: 'me'

    }

    onLoad() {

      console.log('onLoad')

      countdown(this)

    }

    data={

      clock: ''

    }

  }

  var totalMicroSecond = 10000 * 1000

    /* 毫秒级倒计时 */

  function countdown(that) {

        // 渲染倒计时时钟

    that.setData({

      clock: dateformat(totalMicroSecond)

    })

    if (totalMicroSecond <= 0) {

      that.setData({

        clock: '已经截止'

      })

          // timeout则跳出递归

      return

    }

    setTimeout(function() {

          // 放在最后--

      totalMicroSecond -= 10

      countdown(that)

    }

      , 10)

  }

// 时间格式化输出,如03:25:19 86。每10ms都会调用一次

function dateformat(microSecond) {

    // 秒数

    var second = Math.floor(microSecond / 1000)

  // 小时位

    var hr = Math.floor(second / 3600)

  // 分钟位

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

  // 秒位

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

  // 毫秒位,保留2位

    var microSec = fillZeroPrefix(Math.floor((microSecond % 1000) / 10))

    return hr + ':' + min + ':' + sec + ' ' + microSec

}

// 位数不足补零

function fillZeroPrefix(num) {

    return num < 10 ? '0' + num : num

}

</script>

相关文章