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


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判断对象是否相等实现代码
Mar 18 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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实现获取图片颜色值的方法
2014/07/11 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
利用python实现汉诺塔游戏
2021/03/01 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
社区七一党员活动方案
2014/01/25 职场文书
继承权公证书
2014/04/09 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
经销商年会策划方案
2014/05/29 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Java 超详细讲解hashCode方法
2022/04/07 Java/Android