1、效果图：

2、页面仅仅利用了JS的相关功能，包含：wxml、js、wxss

2.1wxml页面代码：

<text>绑定手机</text>

<form bindsubmit="bindMobile">

<view class="form_group">

        <text>手  机：</text>

        <input type="number" placeholder="请输入手机号" maxlength="11" name="data_phone" value="" auto-focus="true" bindblur="blur_mobile" />

        <button type="button" class="{{is_show?'show':'hide'}}" bindtap="clickVerify">获取验证码</button>

        <button type="button" class="{{is_show?'hide':'show'}}">重新发送{{last_time}}秒</button>

    </view>

<input type="number" placeholder="请输入验证码" maxlength="6" name="data_verify" value=""/>

<button class="save_btn" form-type="submit">确认绑定</button>

</form>

2.2 js页面代码：

var countdown = 60;

var settime = function (that) {

  if (countdown == 0) {

    that.setData({

      is_show: true

    })

    countdown = 60;

    return;

  } else {

    that.setData({

      is_show:false,

      last_time:countdown

    })

    countdown--;

  }

  setTimeout(function () {

    settime(that)

  }

    , 1000)

}

Page({

  /**

   * 页面的初始数据

   */

  data: {

    last_time:'',

    is_show:true

  },

  clickVerify:function(){

    var that = this;

 // 将获取验证码按钮隐藏60s，60s后再次显示

      that.setData({

        is_show: (!that.data.is_show)   //false

      })

      settime(that);

  }

})

2.3 wxss页面代码：

/* 发送验证码按钮隐藏，并展示倒数60s提示 */

.hide{

 display: none;

}

.show{

 display: block;

}

3、上面讲的是微信小程序的，那么我们一般web端或者移动端的应该是什么样呢？

其实，方法都差不多，这里也贴出来仅供大家参考

<!-- 这段代码(html)是从脚本之家挪过来的，信誉度应该是很高的，大家可以放心使用 -->

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

var countdown=60;

function settime(obj) {

if (countdown == 0) {

obj.removeAttribute("disabled");

obj.value="免费获取验证码";

countdown = 60;

return;

} else {

obj.setAttribute("disabled", true);

obj.value="重新发送(" + countdown + ")";

countdown--;

}

setTimeout(function() {

settime(obj) }

,1000)

}

</script>

<body>

<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

</body>

</html>

原创：微信小程序+WEB使用JS实现注册【60s】倒计时功能的更多相关文章

  1. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  2. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  3. 从微信小程序到鸿蒙js开发【11】——页面路由

    目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...

  4. 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...

  5. 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...

  6. 从微信小程序到鸿蒙js开发【15】——JS调用Java

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...

  7. 微信小程序结合原生JS实现电商模板（二）

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  8. 微信小程序一键生成源码 在线制作定制功能强大的微信小程序

    微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...

  9. 1_python小程序之实现用户的注册登陆验证功能

    python小程序之实现用户的注册登陆验证功能 程序扼要简述:  一.程序流程:1.程序开始2.判断本地文件/数据库是否已存在用户信息,存在则跳转到登陆,否则跳转到注册,注册成功后后跳转到登陆3.判断 ...

随机推荐

  1. 重载 UINavigationController 设置左侧返回按钮的文字为图片

    UINavigationController 导航栏控制器的左侧返回按钮如果需要设置成图片,仅使用系统的是无法实现的,需要重载系统的导航栏控制器,在控制器推出之前替换掉leftBarButtonIte ...

  2. DWZ SSH2 菜单树--使用Struts2 标签（iterator/set/if 组合使用）

    最近在研究DWZ框架,然后要写一个菜单树,后台我使用了SSH2,然后想把菜单通过后台传过来的对象展示出来. 但是,发现应用样式的时候,如果子菜单在子循环中为空的话,会多出一对空标签“<ul> ...

  3. Ladda 应用提交表单的时候显示loading载入中 包含不同位置，不同效果

    Ladda 应用提交表单的时候显示loading载入中 包含不同位置,不同效果 不同大小.位置,效果,进度条等 演示 XML/HTML Code <article class="exa ...

  4. Latex：表格制作全攻略

    给出一个制作复杂表格的例子,制作表格主要用到multicolumn,multirow和cline,其中,要使用multirow,必须usepackage{multirow} 如果要制作出如下图所示的表 ...

  5. OpenCV学习(27) 直方图(4)

    我们可以利用OpenCV的直方图,backproject直方图和meanshift算法来跟踪物体.下面通过简单的例子来说明如何实现跟踪算法,我们有两幅狒狒的图片,如下图所示:我们首先在左图中框选狒狒的 ...

  6. maven选包算法（两个相同的包）

    引入了两个相同groupId和artifactId的jar,但是版本不同,选择层级最浅的包,层级可以通过依赖树来看

  7. 第二章 eclipse中m2e插件问题

    1.当引入一个maven项目到eclipse中时,这时候可能会出现找不到一个插件的问题,例如: <plugin> <groupId>org.apache.maven.plugi ...

  8. 解析KML文件并提取coordinates中的经纬度坐标信息

    从googleEarh导出的kml文件 <?xml version="1.0" encoding="UTF-8"?><kml xmlns=&q ...

  9. Composite 组合模式 树 递归 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. window.open()页面之间函数传值

    项目中遇到的问题,使用window.open()开一个页面之后,cookie会消失,所以无法一键切肤不管作用,解决方案如下: window.open()总结: window.open("sU ...