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


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经典效果集锦
Jul 06 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
详解TypeScript的基础类型
Feb 18 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/02/08 PHP
使用php清除bom示例
2014/03/03 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery radio 操作代码
2011/03/16 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
js实现交通灯效果
2017/01/13 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python教程之全局变量用法
2016/06/27 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python安装scipy的步骤解析
2019/09/28 Python
Python中itertools的用法详解
2020/02/07 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
单身联谊活动方案
2014/01/29 职场文书
英语老师推荐信
2014/02/26 职场文书
万能检讨书2000字
2014/10/17 职场文书
技术员岗位职责
2015/02/04 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
详解JavaScript中Arguments对象用途
2021/08/30 Javascript