我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

微信小程序+WEB使用JS实现注册【60s】倒计时功能开发步骤:

主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设、程序开发、微网站、微信小程序等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站制作、网站建设、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。

1、效果图: 

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

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

2.1wxml页面代码:

绑定手机
手 机:

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端或者移动端的应该是什么样呢?

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





 
 


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


文章标题:微信小程序注册60s倒计时功能使用JS实现注册60s倒计时功能
本文URL:http://mswzjz.cn/article/gpiejg.html

其他资讯