关灯
开启左侧

微信小程序商品抢购倒计时

[复制链接]
doubleyong 发表于 2018-12-10 09:28:14 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
js部分
  1. // pages/qianggou/qianggou.js
  2. Page({

  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. goodsList:[
  8. { actEndTime: '2018-12-09 10:00:43' },
  9. { actEndTime: '2018-12-09 11:00:00' },
  10. { actEndTime: '2018-12-09 12:45:56' },
  11. { actEndTime: '2018-12-09 15:00:23' },
  12. { actEndTime: '2018-12-23 17:00:22' },
  13. { actEndTime: '2018-12-14 19:00:44' },
  14. { actEndTime: '2018-12-21 21:00:34' },
  15. { actEndTime: '2018-12-17 09:00:37' },
  16. { actEndTime: '2018-12-21 05:00:59' },
  17. { actEndTime: '2018-12-19 07:00:48' },
  18. { actEndTime: '2018-12-28 03:00:11' }
  19. ],
  20. countDownList:[], //最终渲染数据
  21. actEndTimeList: [] //存储结束时间
  22. },

  23. /**
  24. * 生命周期函数--监听页面加载
  25. */
  26. onLoad: function (options) {
  27. let EndTimeList = []; //存储结束时间
  28. //将存储时间存放在临时数组
  29. this.data.goodsList.forEach(data=>{
  30. EndTimeList.push(data.actEndTime)
  31. })
  32. this.setData({
  33. actEndTimeList:EndTimeList
  34. })
  35. this.countDown()
  36. },
  37. //处理时间为个位数,加0在前面
  38. timeFormat(param) {//小于10的格式化函数
  39. return param < 10 ? '0' + param : param;
  40. },
  41. //倒计时函数
  42. countDown(){
  43. //获取当前时间
  44. let newTime = new Date().getTime(); //getTime 返回的是格林威治时间
  45. let endTimeList = this.data.actEndTimeList; //获取时间
  46. let countDownArr = []; //存储时间
  47. let obj = null
  48. //对结束时间进行处理,并渲染到页面
  49. endTimeList.forEach(x=>{
  50. let EndTime = new Date(x).getTime();
  51. let time = (EndTime - newTime) / 1000; //获取结束时间总秒数
  52. //获取 天 时 分 秒
  53. let day = Math.round(time/(60*60*24));//取得天数
  54. let hou = Math.round(time % (60 * 60 * 2) / 3600); //取得小时
  55. let min = Math.round(time % (60 * 60 * 24) % 3600 / 60);//取得分钟
  56. let sec = Math.round(time % (60 * 60 * 24) % 3600 % 60); //取得秒数
  57. obj = {
  58. day: this.timeFormat(day),
  59. hou: this.timeFormat(hou),
  60. min: this.timeFormat(min),
  61. sec: this.timeFormat(sec)
  62. }
  63. countDownArr.push(obj);//将时间存入数组
  64. })
  65. this.setData({
  66. countDownList: countDownArr
  67. })
  68. setTimeout(this.countDown,1000)
  69. }
  70. })
复制代码
wxml部分
  1. <!--index.wxml--><view>
  2. <view class='tui-countdown-content' wx:for="pw_countDownList" wx:key="countDownList">剩余
  3. <text class='tui-conutdown-box'>pw_item.day</text>天<text class='tui-conutdown-box'>pw_item.hou</text>时
  4. <text class='tui-conutdown-box'>pw_item.min</text>分<text class='tui-conutdown-box tui-countdown-bg'>pw_item.sec</text>秒
  5. </view></view>
复制代码
实现原理:
1.首先通过getTime方法获取格林威治时间,然后用forEach循环出结束时间的格林威治时间
用结束时间去减去当前时间。然后通过转换的到秒数,最终渲染到页面上!


转自:http://bugshouji.com/shareweb/t638
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )