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


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如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
js格式化时间小结
Nov 03 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 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函数
2006/10/09 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
destoon数据库表说明汇总
2014/07/15 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python3.6数独问题的解决
2019/01/21 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
关于爱情的广播稿
2014/01/16 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis