微信小程序动态显示项目倒计时效果

2024-10-19 03:04:07

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码，供大家参考，具体内容如下

1、一般我们说的显示秒杀都是指的单条数据，循环我没做。

效果：

2、wxml代码：

<p>
<block wx:if="{{total_micro_second<=0}}">剩余时间：已经截止</block>
<block wx:if="{{clock!='已经截止'}}">剩余时间：{{clock}}</block>
</p>

3、.js文件代码：

function countdown(that) {
 var EndTime = that.data.end_time || [];
 var NowTime = new Date().getTime();
 var total_micro_second = EndTime - NowTime || [];
 console.log('剩余时间：' + total_micro_second);
  // 渲染倒计时时钟
  that.setData({
  clock: dateformat(total_micro_second)
  });
  if (total_micro_second <= 0) {
  that.setData({
   clock: "已经截止"
  });
  //return;
  }
  setTimeout(function () {
  total_micro_second -= 1000;
  countdown(that);
  }
  , 1000)
 }

 // 时间格式化输出，如11:03 25:19 每1s都会调用一次
 function dateformat(micro_second) {
  // 总秒数
  var second = Math.floor(micro_second / 1000);
  // 天数
  var day = Math.floor(second/3600/24);
  // 小时
  var hr = Math.floor(second/3600%24);
  // 分钟
  var min = Math.floor(second/60%60);
  // 秒
  var sec = Math.floor(second%60);
  return day + "天" + hr + "小时" + min + "分钟" + sec+"秒";
 }

Page({

 /**
 * 页面的初始数据
 */
 data: {
 id:'',
 result:[],
 end_time:'',
 clock:''
 },/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 wx.request({
  url: 'https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//不含富文本html
  data: {},
  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  header: {
  'Content-Type': 'application/json'
  },
  success: function (res) {
  that.setData({
   common: res.data, //一维数组，全部数据
   end_time: res.data.end_time //项目截止时间，时间戳，单位毫秒
  })
  console.log(that.data.common);
  console.log('结束时间：' + that.data.end_time);
  },
  fail: function (res) { },
  complete: function (res) { },
 }),
//调用上面定义的递归函数，一秒一刷新时间
 countdown(that);
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序倒计时组件实现代码

功能: 适用于电商应用的限时团购.商品秒杀等先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second
微信小程序电商常用倒计时实现实例

微信小程序电商常用倒计时实现实例 wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second if (second == 0) { // console.log("Time Out..."); that.setData({ second: &q
Android中微信小程序支付倒计时功能

看效果由于web 经验弱爆- - 一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练思路: onLoad:function(options)调用倒计时方法函数定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格
微信小程序之发送短信倒计时功能

点击后代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo
微信小程序注册60s倒计时功能使用JS实现注册60s倒计时功能

微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubmit="bindMobile"> <view class="form_group"> <text>手机:</text> <input type="
微信小程序实现倒计时60s获取验证码

本文实例为大家分享了微信小程序倒计时获取验证码的具体代码,供大家参考,具体内容如下 1.工具类(引用微信小程序提供的工具类) countdown.js class Countdown { constructor(options = {}) { Object.assign(this, { options, }) this.__init() } /** * 初始化 */ __init() { this.page = getCurrentPages()[getCurrentPages().length
微信小程序动态显示项目倒计时效果

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p> <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block> <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>
微信小程序动态显示项目倒计时

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.展示的效果如下 2.wxml代码:  <text wx:if="{{clock!=''}}">仅剩{{clock}}</text> <text wx:if="{{clock==''}}">已经截止</text> 3.js代码: 在拼团项目中获取到活动结束时间的格式为一下格式因该格式无法正常计算时
微信小程序实现验证码倒计时效果

本文实例为大家分享了微信小程序验证码倒计时效果的具体代码,供大家参考,具体内容如下如果写过js的倒计时,那么小程序中使用也是差不多的: 代码: data: { daojishi:60, inter:'' }, daojishi: function () { this.data.inter = setInterval((res) => { this.fun(); }, 1000); }, fun: function () {
微信小程序商城项目之商品属性分类（4）

续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view>  <view class="commodity_a
微信小程序顶部可滚动导航效果

需求是小程序做头部做导航分类的效果顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type
微信小程序实现批量倒计时功能

本文实例为大家分享了微信小程序实现批量倒计时的具体代码,供大家参考,具体内容如下 //适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */ 1.展示效果如下: 2.wxml代码: <p class="promotion-label-tits">仅{{item.endtime}}</p> 3.js代码: //封装的倒计时方法 //批量倒计时 function grouponcountdown(that, end_
微信小程序实现订单倒计时

本文实例为大家分享了微信小程序实现订单倒计时的具体代码,供大家参考,具体内容如下之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路求出发起拼团时间与拼团结束时间的时间差再将时间差格式化得到我们想要的格式如: 时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数,让这个函数每隔一秒执行一次. 效果图: 2.实现中的难点若是要实现单个倒计时如60s
微信小程序实现简单倒计时功能

本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下任务描述: 计时器任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白界面,过2秒后才显示计时界面,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时. 实现效果:根据案例描述做出如下图效果,初始显示空白界面,2秒后显示计时界面(图1),数字为60,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时(图2). index.wxml <!--index.wxm
微信小程序实战项目之富文本编辑器实现

目录前言 1. 实现效果 2. 创建发布页面,实现基本布局 3. 实现编辑区操作栏的功能 3.1. 实现文本加粗.斜体.文本下划线.左对齐.居中对齐.右对齐 3.2. 实现撤销.恢复.插入图片.删除操作 4. 参考总结前言这是我参加掘金启航计划的第三篇文章,这次总结的是实现一个简单的富文本编辑器,相信阅读文章后,观众老爷们,能够实现富文本编辑器,在微信小程序中发布自己的文章,希望观众老爷们多多支持! 1. 实现效果实现的效果如下图: 实现的功能点如下: 文本加粗.斜体.下划线,对齐方式
微信小程序canvas写字板效果及实例

微信小程序canvas写字板效果及实例写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

微信小程序动态显示项目倒计时效果

相关推荐

随机推荐