当前位置:首页 > 编程教程 > javascript技术文章 > 微信小程序实现商城倒计时

分享微信小程序实现商城倒计时代码实例

  • 发布时间:
  • 作者:码农之家
  • 点击:59

这篇文章主要知识点是关于微信小程序、倒计时、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript框架设计
JavaScript框架设计全书完整版
  • 类型:js框架大小:286.4 MB格式:PDF作者:司徒正美
立即下载

微信小程序实现商城倒计时

本文实例为大家分享了微信小程序实现商城倒计时的具体代码,供大家参考,具体内容如下

index.html:

<view class="countDownTimeView pull-left countDownAllView text-left">
 
   <text>倒计时:</text> 
   <text class="voteText countDownTimeText">{{countDownHour}}</text> : 
   <text class="voteText countDownTimeText">{{countDownMinute}}</text> : 
   <text class="voteText countDownTimeText">{{countDownSecond}}</text>
 
</view>

util.js :

const formatTime = date => {
 
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const day = date.getDate()
   const hour = date.getHours()
   const minute = date.getMinutes()
   const second = date.getSeconds()
 
   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
 
}
 
const formatNumber = n => {
   n = n.toString()
   return n[1] ? n : '0' + n
}
 
module.exports = {
   formatTime: formatTime
}

index.js:

var util = require('../../utils/util.js');    //调用微信小程序中时间格式化的js
 
Page: ({
 
    data: {
 
         countDownHour: 0, //倒计时 -时
         countDownMinute: 0, //倒计时 -分
         countDownSecond: 0, //倒计时-秒
 
     },
 
 
 
    // 页面渲染后 执行
 
    onLoad: function () {
 
        //设置倒计时时间,1s变换一次
        var interval = setInterval(function () {
           var d = new Date();  //获取系统日期和时间
           var nowHour = d.getHours(); //小时
           var nowMinutes = d.getMinutes(); //分
           var nowSeconds = d.getSeconds(); //秒
 
           // 显示在倒计时中的小时位
           var hour = 24 - nowHour;
 
           // 显示在倒计时中的分钟位
           var minutes = 60 - nowMinutes;
 
           // 显示在倒计时中的秒数
           var seconds = 60 - nowSeconds;
 
 
           //当小时、分钟、秒都为0时,活动结束,倒计时显示为00:00:00
           if (hour == 0 && minutes == 0 && seconds == 0) {
 
              clearInterval(interval);
              wx.showToast({
                title: '活动已结束',
              });
              console.log(totalSecond);
 
              this.setData({
                countDownHour: '00',
                countDownMinute: '00',
                countDownSecond: '00',
              });
           }
 
 
           //当小时位、分钟位、秒位小于10时,用字符串拼接的方式显示,例如:06:08:02
 
           if (hour < 10) {
             hour = "0" + hour;
           }
           if (minutes < 10) {
             minutes = "0" + minutes;
           }
           if (seconds < 10) {
             seconds = "0" + seconds;
           }
           this.setData({
             countDownHour: hour,
             countDownMinute: minutes,
             countDownSecond: seconds,
           });
        }.bind(this), 1000);
   },
})

最终实现效果图如下:

微信小程序实现商城倒计时

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.677571

微信小程序项目实践之验证码倒计时功能

效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击, codeIsCanClick = true , 默认是可以点击的 写下界面代码: wxml文件中 view class='centerRow' view class='inputLabel'动态码:/view input class='inputStyle' bindinput="bindKeyInput" placeholder="短信动态码" adjust-position='false' confirm-type='search'/input button class="emailCode" hidden='{{!codeIsCanClick}}' size="mini" bindtap='clickCode'获取动态码/button button class="emailCodeSend" hidden='{{codeIsCanClick}}' size="mini"{{last_time}}秒后重新发送/button/view 对应样式 wxss文件: .centerRow{ display: flex; flex-direction: row; align-items: center; height: 44px; padding-left: 16px; padding-right: 16px; border-bottom: 1rpx solid #D9D9D9; border-top: 1rpx solid #D9D9D9;}.inputStyle{ border-radius:4px; color:#D9D9D9; outline:0; padding-left: 4px; margin-left: 4px;……

网友NO.682388

微信小程序的注册页面包含倒计时验证码、获取用户信息

1、页面展示 2、wxml代码 !--pages/register/register.wxml--scroll-view image src='/images/register.png' mode='widthFix' class="topImage"/image view class='input-top' input id="telphone" maxlength='11' type="text" placeholder="请输入手机号" bindinput="inputPhoneNum"/ text wx:if="{{!send}}" bindtap='sendMsg' class="sendMsg"获取验证码/text text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg"{{second+"s"}}/text /view view class="input-buttom" input id="captcha" type="number" maxlength="4" placeholder="请输入4位验证码" bindinput="inputCode"/ /view button class="btn" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo" lang="zh_CN"立即用伞/button view class='protocol' text class="protocol-left"点击立即用伞即表示同意/text text class="protocol-right"《共享雨伞租赁服务协议》/text /view/scroll-view 3、wxss代码 page{ background: #f0eff4;}.topImage { width: 100%; height: auto;}.input-top, .input-buttom { font-size: 30rpx; padding-left: 30……

网友NO.492211

详解微信小程序用定时器实现倒计时效果

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用。 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑。 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例。 WXML代码 view class='countDown'倒计时:text style='color:red'{{countDownNum}}/texts/view JS代码: Page({ /** * 页面的初始数据 */ data: { timer: '',//定时器名字 countDownNum: '60'//倒计时初始值 }, onShow: function(){ //什么时候触发倒计时,就在什么地方调用这个函数 this.countDown(); }, countDown: function () { let that = this; let countDownNum = that.data.countDownNum;//获取倒计时初始值……

网友NO.498278

微信小程序之发送短信倒计时功能

点击后 代码 form bindsubmit="formSubmit" bindreset="formReset" view class="fidpas" input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号" name="phonenumber" / input type="number" class="fidpas_inp2"placeholder-class="lgin_place" placeholder="请输入短信验证码" name="msg" / button class="{{sendmsg}}" bindtap="sendmessg"{{getmsg}}/button /view button class="lgbut" formType="submit"下一步/button /form data: { sendmsg: "sendmsg", getmsg:"获取短信验证码", }, /** * 获取短信验证码 */ sendmessg:function(e){ if (timer==1){ timer=0 var that=this var time=60 that.setData({ sendmsg:"sendmsgafter", }) var inter=setInterval(function(){ that.setData({ getmsg: time + "s后重新发送", }) time-- if(time0){ timer=1 clearInterval(inter) that.setData({ sendmsg: "sendmsg", getmsg: "获取短信验证码", }) } },1000)} }, 思路:将BUTTON后样式和内容设为变量,点击之后setData将其改变即可 总结 以上所述是……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com