广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现验证码倒计时
  • 977
分享到

微信小程序实现验证码倒计时

2024-04-02 19:04:59 977人浏览 安东尼
摘要

本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'>   <fORM

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

wxml代码:

<view class='container'>
  <fORM bindsubmit='denglu'>
    <view class='list'>
      <view class='left'>
        <label>手机号:</label>
        <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='请输入手机号'></input>
      </view>
      <view class='right'></view>
    </view>
    <view class='list border'>
      <view class='left'>
        <label>验证码:</label>
        <input type='number' name="code" placeholder='请输入验证码'></input>
      </view>
      <view class='right'>
        <button class='send' wx:if="{{isshow}}" catchtap='send'>发送验证码</button>
        <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒后重新发送</button>
      </view>
    </view>
    <button form-type='submit' class='btn'>登录</button>
  </form>
</view>

js代码:

const app = getApp()
Page({
 
  
  data: {
    countdown: 60,
    isShow:true
  },
  //倒计时
  count:function(that){
    var interval = setInterval(function () {
      var countdown = that.data.countdown;
      if (countdown == 0) {
        that.setData({
          isShow: true,
          countdown: 60
        })
        clearInterval(interval)
      } else {
        countdown--;
        that.setData({
          isShow: false,
          countdown: countdown
        })
      }
    }, 1000)
  },
  //设置手机号
  shj: function (e) {
    this.setData({
      tel: e.detail.value
    })
  },
  //获取验证码
  send: function () {
    var that=this;
    wx.showToast({
      title: '验证码发送成功',
      icon: 'none',
      duration: 1000,
      success: function () {
        that.count(that)
      }
    })
  }, 
  //登录
  denglu:function(e){
     console.log(e.detail.value)
  },
  
  onLoad: function (options) {
    
  },
 
})

wxss代码:

.list{
  background-color: white;
  font-size: 32rpx;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center
}
.border{
  border-top: 1rpx solid #f4f4f4
}
.left{
  display: flex;
  align-content: center;
  align-items: center
}
.left>label{
  width: 140rpx
}
.left>input{
  font-size: 30rpx
}
.right{
  width:240rpx;
  text-align: right;
  color: #ff9900;
  font-size: 30rpx
}
.send{
  background-color: #3296fa;
  color: white;
  line-height: 60rpx;
  font-size: 30rpx;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0
}
.btn{
  background-color: #3296fa;
  color: white;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 0;
  margin-top: 100rpx;
}

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

--结束END--

本文标题: 微信小程序实现验证码倒计时

本文链接: https://www.lsjlt.com/news/149507.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现验证码倒计时
    本文实例为大家分享了微信小程序实现验证码倒计时的具体代码,供大家参考,具体内容如下 wxml代码: <view class='container'>   <form...
    99+
    2022-11-13
  • 微信小程序实现短信验证码倒计时
    本文实例为大家分享了微信小程序实现短信验证码倒计时的具体代码,供大家参考,具体内容如下 初始效果 当点击按钮时候设置禁止点击效果:如下图 话不多说,直接上代码 1.wxml部分 ...
    99+
    2022-11-13
  • 微信小程序实现验证码倒计时效果
    本文实例为大家分享了微信小程序验证码倒计时效果的具体代码,供大家参考,具体内容如下 如果写过js的倒计时,那么小程序中使用也是差不多的; 代码: data: {       daoj...
    99+
    2022-11-13
  • 微信小程序实现发送短信验证码倒计时
    本文实例为大家分享了微信小程序发送短信验证码倒计时的具体代码,供大家参考,具体内容如下 效果图 WXML文件 <view class="container"> ...
    99+
    2022-11-12
  • 微信小程序如何实现短信验证码倒计时
    这篇文章主要讲解了“微信小程序如何实现短信验证码倒计时”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何实现短信验证码倒计时”吧!初始效果当点击按钮时候设置禁止点击效果:如下图话不...
    99+
    2023-06-30
  • 微信小程序如何实现验证码倒计时效果
    这篇文章主要介绍了微信小程序如何实现验证码倒计时效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序如何实现验证码倒计时效果文章都会有所收获,下面我们一起来看看吧。如果写过js的倒计时,那么小程序中使用...
    99+
    2023-06-30
  • 微信小程序实现手机获取验证码倒计时60s
    本文实例为大家分享了微信小程序实现手机获取验证码倒计时的具体代码,供大家参考,具体内容如下 功能展示: WXML: <view class="all">   <!...
    99+
    2022-11-13
  • 微信小程序实现倒计时
    本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下 大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。 直接上代码吧 <view cl...
    99+
    2022-11-13
  • 小程序实现简单验证码倒计时
    本篇文章主要讲关于小程序验证码倒计时的功能实现,供大家参考,具体内容如下 首先是wxml部分 <form bindsubmit="regist">     <v...
    99+
    2022-11-13
  • 微信小程序获取验证码60秒倒计时功能
    目录效果图index.wxmlindex.jsindex.wxss效果图 index.wxml <view class="Info"> ...
    99+
    2023-05-17
    微信小程序60秒倒计时 微信小程序验证码倒计时
  • 微信小程序实现答题倒计时
    想做一个答题的计时器效果,本文为大家分享了微信小程序实现答题倒计时的具体代码,供大家参考,具体内容如下 思路 利用canvas不停的画弧线 效果 代码 wxml <view...
    99+
    2022-11-13
  • 微信小程序如何实现倒计时
    这篇文章主要介绍“微信小程序如何实现倒计时”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序如何实现倒计时”文章能帮助大家解决问题。直接上代码吧<view class=&quo...
    99+
    2023-06-30
  • iOS实现短信验证码倒计时
    在开发中,经常在需要用户注册的时候会需要实现验证码倒计时的功能,下面是解决这个问题的两种思路(使用UIButton控件) 一、利用NSTimer计时器 新建一个UIButton按钮...
    99+
    2022-05-30
    iOS 短信 验证码
  • 小程序验证码倒计时如何获取
    本篇内容介绍了“小程序验证码倒计时如何获取”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!.wxml <button ...
    99+
    2023-06-26
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2022-11-13
  • 微信小程序实现接收验证码
    本文实例为大家分享了微信小程序实现接收验证码的具体代码,供大家参考,具体内容如下 效果如下图: wxml部分如下: <!--验证码-->   <view clas...
    99+
    2022-11-13
  • 微信小程序实现随机验证码
    本文实例为大家分享了微信小程序实现随机验证码的具体代码,供大家参考,具体内容如下 废话不多说,直接上图看效果 一、实现功能 1、点击灰色底的验证码图片可以更换一张验证码 2、验证输...
    99+
    2022-11-13
  • 微信小程序实现图形验证码
    本文实例为大家分享了微信小程序实现图形验证码的具体代码,供大家参考,具体内容如下 1.wxml页面 <canvas canvas-id="canvas" bindtap='ch...
    99+
    2022-11-13
  • 微信小程序实现动态验证码
    目录一、创建自定义组件verification-code二、在index页面使用本文实例为大家分享了微信小程序实现动态验证码的具体代码,供大家参考,具体内容如下 一、创建自定义组件...
    99+
    2022-11-13
  • 微信小程序电商常用倒计时实现实例
    微信小程序电商常用倒计时实现实例wxml文件放个text<text>second: {{second}} micro second:{{micro_second}}</text>在js文件中调用function co...
    99+
    2023-05-31
    微信小程序 倒计时 信小
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作