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


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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
jquery实现pager控件示例
Apr 09 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
node crawler如何添加promise支持
Feb 01 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上传图片、删除图片实现代码
2010/05/12 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python元组操作实例解析
2014/09/23 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
详解python数据结构和算法
2019/04/18 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
爱情检讨书大全
2014/01/21 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
小学生安全责任书
2014/07/25 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
英文投诉信格式
2015/07/03 职场文书