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. .NET：之前用过的一个技术架构

  2. [Git ] Git 使用规范流程

    reference : http://www.ruanyifeng.com/blog/2015/08/git-use-process.html 团队开发中,遵循一个合理.清晰的Git使用流程,是非常重 ...

  3. there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    建表语句: create table test_table(   id integer not null auto_increment primary key,   stamp_created tim ...

  4. C/C++中printf/cout 计算顺序与缓冲区问题

    1.printf/cout在同一个语句中都是从右向左计算的. 看如下的代码: #include <stdio.h> int main() { ; printf("%d %d&qu ...

  5. Android 跳转到系统应用管理

    Intent i = new Intent("android.settings.APPLICATION_DETAILS_SETTINGS");String pkg = " ...

  6. 简单使用CSS3实现炫酷读者墙效果

    读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头 ...

  7. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  8. 为什么谷歌的JSON响应以while(1);开头？

    问题(QUESTION): 我有个问题一直很好奇就是:为什么谷歌的JSON响应以while(1);开头?举个例子,当把谷歌日历打开和关掉时,会返回这样的JSON对象: while(1);[['u',[ ...

  9. Quartz2D-二维画图引擎 、自己定义UI控件

    // // MyDraw.m // 绘图 #import "MyDraw.h" @implementation MyDraw //Quartz2D 是一个二维绘图引擎 //自己定义 ...

  10. Linq-System.Data.Linq.DataContext不包含采用“0”个参数的构造函数

    解决方法: 打开linq to sql 的db文件***.designer.cs,加上下面的代码: 加上这些构造函数之后重新生成就可以了.