小程序实现列表倒计时功能


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了小程序实现列表倒计时的具体代码,供大家参考,具体内容如下

效果

小程序实现列表倒计时功能

HTML代码

<view class="hbMpBox" wx:for="{{mpThing}}" data-goodsId="{{item.goods_id}}" data-id="{{index}}" bindtap="navSeceGroup">
    <view class="hbMpBox_l">
      <image src="{{item.goods_img}}"></image>
    </view>
    <view class="hbMpBox_r">
      <view class="hbMpBox_r_head">{{item.goods_name}}</view>
      <view class="hbMpBox_r_time">
        <view class="syTime_tx " style="font-weight: 600;">距结束:</view>
        <view class="syTime_day">{{item.goods_time[0]}}天</view>
        <view class="syTime_time syTime_time1">{{item.goods_time[1]}}</view>
        <view class="syTime_time1">:</view>
        <view class="syTime_time syTime_time2">{{item.goods_time[2]}}</view>
        <view class="syTime_time1">:</view>
        <view class="syTime_time syTime_time3">{{item.goods_time[3]}}</view>
 
      </view>
      <view class="hbMpBox_r_price">
        <view class="hbMpBox_r_price_l">
          <view class="hbMpBox_r_price_l_box onFontNow" style="max-width: 400rpx;">
            <text style="color: #999;">拼团价:</text><text style="color: #d13d4b;font-size: 34rpx;">¥{{item.secs_price}}</text>
          </view>
           
        </view>
        <view class="hbMpBox_r_price_r">
          趣拼团
        </view>
      </view>
    </view>
  </view>
  <view class="indexMptxBox" wx:if="{{mpThing[0]}}" bindtap="secondGroupNav">
    点击查看更多
</view>

CSS代码

/*秒拼样式书写*/
.hbMpBox{
  padding: 20rpx;
  background: #fff;
  display: flex;
  border-bottom: 2rpx #eee solid;
}
.hbMpBox .hbMpBox_l{
  width: 155rpx;
  height: 140rpx;
  min-width: 155rpx;
 
}
.hbMpBox .hbMpBox_l image{
  width: 100%;
  height: 100%;
}
.hbMpBox .hbMpBox_r{
  width: 540rpx;
  margin-left: 20rpx;
  color: #333;
  font-size: 22rpx;
  position: relative;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_bb{
  display: flex;
  position: relative;
  margin-top: 10rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2{
  position: relative;
  max-width: 270rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_hh{
  font-size: 28rpx;
  max-width: 270rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_h{
  font-size: 40rpx;
 
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_des{
  width: 100%;
  margin-right: 20rpx;
  margin-top: 10rpx;
  color: #a8a8a8;
  line-height: 35rpx;
  height: 70rpx;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_text{
  font-weight: 600;
  color: #d13d4b;
  margin-top: 10rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_head{
  font-size: 28rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_des{
  margin-top: 4rpx;
  color: #999;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time{
  font-size: 20rpx;
  color: #bdbdbd;
  word-spacing: 5rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time .fontTime{
  font-weight: 900;
  font-size: 26rpx;
  color: #7c7d7f;
}
.hbMpBox_r .hbMpBox_r_r2{
  min-width: 210rpx;
  max-width: 48%;
  border: 2rpx #d13d4b solid;
  border-radius: 10rpx;
  max-height: 110rpx;
  position: absolute;
  right: 0rpx;
  height: 100%;
 
}
.hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in{
  height: 54rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rpx 10rpx;
  line-height: 54rpx;
}
.hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in1{
  background: #d13d4b;
  color: #fff;
}
.hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in2{
  color: #d13d4b;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_time{
  margin-top: 15rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}
 
.syTime_time{
  padding: 3rpx 6rpx;
  background: #444;
  text-align: center;
  color: #fff;
  border-radius: 5rpx;
  margin: 0rpx 5rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_price{
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_price .hbMpBox_r_price_r{
  background: #d13d4b;
  color: #fff;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border-radius: 5rpx;
}
.indexMptxBox{
  padding: 20rpx;
  text-align: center;
  font-size: 24rpx;
}

JS代码(得到后台数据查询用FIND方法插入字段,直接遍历会有问题)

mpThing.find(function(v){
        var aa = v.goods_time;
        var bb = util.dayTimeArr(aa);
        v.goods_time = bb
        that.setData({
         mpThing:mpThing,
        })
        var ref = setInterval(function(){
          aa--
          var timeArr = util.dayTimeArr(aa);
          v.goods_time = timeArr
          that.setData({
           mpThing:mpThing,
          })
        },1000);
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 #Javascript
vue监听键盘事件的相关总结
Jan 29 #Vue.js
javascript实现拼图游戏
Jan 29 #Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 #Javascript
Javascript实现打鼓效果
Jan 29 #Javascript
JS实现点击掉落特效
Jan 29 #Javascript
Javascript实现关闭广告效果
Jan 29 #Javascript
You might like
PHP中读写文件实现代码
2011/10/20 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
JavaScript使用localStorage存储数据
2019/09/25 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
python中将字典转换成其json字符串
2014/07/16 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
学校门卫工作职责
2013/12/07 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
员工趣味活动方案
2014/08/27 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
中秋节慰问信
2015/02/15 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
教你利用python实现企业微信发送消息
2021/05/23 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers