关于微信小程序使用JS实现注册60s倒计时功能和微信小程序使用js实现注册60s倒计时功能的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Android中微信小程序支付倒计时功能、Flut
关于微信小程序使用JS实现注册60s倒计时功能和微信小程序使用js实现注册60s倒计时功能的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Android中微信小程序支付倒计时功能、Flutter之Timer实现短信验证码获取60s倒计时功能的代码、js倒计时小程序、js倒计时小程序实现代码等相关知识的信息别忘了在本站进行查找喔。
本文目录一览：- 微信小程序使用JS实现注册60s倒计时功能（微信小程序使用js实现注册60s倒计时功能）
- Android中微信小程序支付倒计时功能
- Flutter之Timer实现短信验证码获取60s倒计时功能的代码
- js倒计时小程序
- js倒计时小程序实现代码
微信小程序使用JS实现注册60s倒计时功能（微信小程序使用js实现注册60s倒计时功能）
这篇文章主要介绍了微信小程序注册60s倒计时功能，以及使用JS实现注册60s倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下微信小程序+WEB使用JS实现注册【60s】倒计时功能开发步骤：
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>
Android中微信小程序支付倒计时功能
看效果
由于web 经验弱爆- - 一开始我的思路是找事件，但是看了半天API 基本都是点击触摸，通过物理触发- -
我居然忽略了生命周期，生命周期+线程不就完全OK吗～
事实证明，线程还是王道啊，一开始就应该这么搞嘛～
度娘上面也看了很多都是用js写的，but，可能刚做没几天吧，我对js与微信小程序掌握还不够熟练
思路：
- onLoad:function(options)调用倒计时方法函数
- 定义线程进行数据动态现实
1. 日期转化成毫秒
2.定义线程动态显示
3.渲染倒计时
1.毫秒转成固定格式
2. 处理分秒位数不足的补0
看代码了
wxml:
<view>
<image src="{{imgurls_pay_time}}"></image>
<text>支付剩余时间：</text>
<text>{{clock}} </text>
</view>
wxjs:
// pages/order/take_order/pay/pay.js
var app = getApp()
Page({
data: {
imgurls_pay_time: '/image/icon_orderstatus_countdown.png',"productName": "","productPrice": "","payDetail": [],"wxPayMoneyDesc": "","expireTime": "",clock: ''
},onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
new app.Wetoast()
var that = this;
that.count_down();
},onReady: function () {
// 页面渲染完成
},onShow: function () {
// 页面显示
},onHide: function () {
// 页面隐藏
},onUnload: function () {
// 页面关闭
},/* 毫秒级倒计时 */
count_down: function () {
var that = this
//2016-12-27 12:47:08 转换日期格式
var a = that.data.expireTime.split(/[^0-9]/);
//截止日期：日期转毫秒
var expireMs = new Date(a[0],a[1] - 1,a[2],a[3],a[4],a[5]);
//倒计时毫秒
var duringMs = expireMs.getTime() - (new Date()).getTime();
// 渲染倒计时时钟
that.setData({
clock: that.date_format(duringMs)
});
if (duringMs <= 0) {
that.setData({
clock: "支付已截止，请重新下单"
});
// timeout则跳出递归
return;
}
setTimeout(function () {
// 放在最后--
duringMs -= 10;
that.count_down();
},10)
},/* 格式化倒计时 */
date_format: function (micro_second) {
var that = this
// 秒数
var second = Math.floor(micro_second / 1000);
// 小时位
var hr = Math.floor(second / 3600);
// 分钟位
var min = that.fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
// 秒位
var sec = fill_zero_prefix(second % 60);// equal to => var sec = second % 60;
return hr + ":" + min + ":" + sec + " ";
},/* 分秒位数补0 */
fill_zero_prefix: function (num) {
return num < 10 ? "0" + num : num
}
})
tip:
如果不进行位数补0
将会显示如下
以上所述是小编给大家介绍的Android中微信小程序支付倒计时功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！
Flutter之Timer实现短信验证码获取60s倒计时功能的代码
先看下效果：
两种需求场景：
1.广告页3s后跳转到首页
2.短信验证码60s倒计时
第一种的话，根据需求我们可以知道，我们想要的效果就是3s结束做出一个动作。
factory Timer(Duration duration, void callback()) {
if (Zone.current == Zone.root) {
// No need to bind the callback. We know that the root''s timer will
// be invoked in the root zone.
return Zone.current.createTimer(duration, callback);
}
return Zone.current
.createTimer(duration, Zone.current.bindCallbackGuarded(callback));
}
两个参数，第一个参数超时时间，即多久后执行你想要的动作，第二个参数callback回调方法，即超时后你想要执行的动作是什么，比如跳转到首页。
第二种的话就是需要不断的做出倒计时的动作。
factory Timer.periodic(Duration duration, void callback(Timer timer)) {
if (Zone.current == Zone.root) {
// No need to bind the callback. We know that the root''s timer will
// be invoked in the root zone.
return Zone.current.createPeriodicTimer(duration, callback);
}
var boundCallback = Zone.current.bindUnaryCallbackGuarded<Timer>(callback);
return Zone.current.createPeriodicTimer(duration, boundCallback);
}
这种调用方式和上面的方式的区别是：第一种只会回调一次，就是超时时间到了之后执行callback回调方法，而Timer.periodic调用方式是循环不断的调用，比如说通过这种方式，你设置的超时时间是1s的话，那就会每隔1s调用一次callback的回调方法，也就是通过这种方式来实现我们的短信验证码60s倒计时获取。
看下具体用法吧：
Timer _timer; int _timeCount = 60;
触发事件：
onTap: () {
_startTimer();
},
处理方法：
void _startTimer() {
ToastUtil.showTips(''短信验证码已发送，请注意查收'');
_timer = Timer.periodic(Duration(seconds: 1), (Timer timer) => {
setState(() {
if(_timeCount <= 0){
_autoCodeText = ''重新获取'';
_timer.cancel();
_timeCount = 60;
}else {
_timeCount -= 1;
_autoCodeText = "$_timeCount" + ''s'';
}
})
});
}
到此这篇关于Flutter之Timer实现短信验证码获取60s倒计时功能的代码的文章就介绍到这了,更多相关Flutter短信验证码倒计时内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
您可能感兴趣的文章:
- Flutter获取ListView当前正在显示的Widget信息(应用场景)
- 详解如何在Flutter中获取设备标识符
- 使用Flutter定位包获取地理位置
- Flutter 重构属性透传及函数透传使用示例
- Flutter与WebView通信方案示例详解
- flutter中的资源和图片加载示例详解
- flutter的导航和路由使用示例详解
- flutter优雅实现扫码枪获取数据源示例详解
js倒计时小程序
我们这里只要自己定义一下s与urodz的值就可以随意定义任何日期或节日的倒计时功能了，各位朋友可加以修改。
精确到天的倒计时
<script language="JavaScript">
<!-- // (c) Henryk Gajewski
var urodz= new Date("09/19/2013");
var s="中秋节";
var Now = new Date();
var ile = urodz.getTime() - Now.getTime();
var dni = Math.floor(ile / (1000 * 60 * 60 * 24));
if (dni > 1)
document.write(""+s+"还有"+dni +"天")
else if (dni == 1)
document.write("只有2天啦！")
else if (dni == 0)
document.write("只有1天啦！")
else
document.write("好象已经过了哦！");
// -->
精确到秒的javascript倒计时代码
HTML代码:
<form name="form1">
<div align="center" align="center">
<center>离2010年还有:<br>
<input type="textarea" name="left" size="35">
</center>
</div>
</form>
<script LANGUAGE="javascript">
startclock()
var timerID = null;
var timerRunning = false;
function showtime() {
Today = new Date();
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowMonth = Today.getMonth();
var NowDate = Today.getDate();
var NowYear = Today.getYear();
var NowSecond = Today.getSeconds();
if (NowYear <2000)
NowYear=1900+NowYear;
Today = null;
Hourleft = 23 - NowHour
Minuteleft = 59 - NowMinute
Secondleft = 59 - NowSecond
Yearleft = 2009 - NowYear
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate
if (Secondleft<0)
{
Secondleft=60+Secondleft;
Minuteleft=Minuteleft-1;
}
if (Minuteleft<0)
{
Minuteleft=60+Minuteleft;
Hourleft=Hourleft-1;
}
if (Hourleft<0)
{
Hourleft=24+Hourleft;
Dateleft=Dateleft-1;
}
if (Dateleft<0)
{
Dateleft=31+Dateleft;
Monthleft=Monthleft-1;
}
if (Monthleft<0)
{
Monthleft=12+Monthleft;
Yearleft=Yearleft-1;
}
Temp=Yearleft+'年,'+Monthleft+'月,'+Dateleft+'天,'+Hourleft+'小时,'+Minuteleft+'分,'+Secondleft+'秒'
document.form1.left.value=Temp;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
var timerID = null;
var timerRunning = false;
function stopclock () {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
// -->
</script>
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
