一看就会，超有用活字格技能：九十八、倒计时跳转和验证码发送倒计时

收藏

本帖最后由 Erik.Xue 于 2020-7-27 15:04 编辑

倒计时功能想必各位一定不陌生吧。前端实现的话，懂点儿JavaScript的小伙伴们一定会随手两行代码就可以解决了。

今天的话，想教给各位两种场景下，倒计时在活字格中是怎么玩的~

场景一：
当我们提交信息完成后，一般会跳转页面，显示提交成功，提示多少秒后自动跳转到某个页面。大家肯定都经历过这种“场面”吧。那么，在活字格中是怎么实现的呢？

come on，baby~
步骤1：
在新建的页面Index中，放置一个命令按钮，同时在另一个新建页面Print上，同样的位置上也放置同样大小的命令按钮。如图：
image.png275536803.png

步骤2：
给Index页面的命令设置页面跳转命令。
image.png736940612.png

步骤3：（重中之重！）
既然要实现倒计时的效果，此时就少不了引入JavaScript代码了。我们要在Index页面跳转的页面中编辑页面加载时命令，加入JavaScript命令。

var p= Forguncy.Page;
//获取当前页面名称
var pageName = p.getPageName();
if(pageName =="Print"){
var count = 30; //此处设置倒计时时间，这里设置为30秒
console.log(pageName)
var resend = setInterval(function(){ // 开启计时事件
if(Forguncy.Page.getPageName() =="Print"){
count--;
if (count > 0){
// 分别给名为 RemindTitle 和 CountDown 的单元格设值
p.getCell("RemindTitle").setValue("结束本次提交操作，"+count+"秒后将自动结束");
p.getCell("CountDown").setValue("立即返回("+count+" s)");
//$('#12c3p').click();
}else{
// 点击事件
$("[fgcname='CountDown'] button").click();
clearInterval(resend);
}
}else{
window.clearInterval(resend);
}
}, 1000);
}else{
alert("OK");
}

复制代码

通过以上的代码，我们就可以在页面实现倒计时和提前退后页面的效果啦~

为了更加美观，所以给每个页面都设置了母版页。
u=2096880903,862447744&fm=26&gp=0.jpg

看看效果如何~

OK，我们再来看看场景二。

场景二：
在做的每位大佬应该都注册过各大网站的账号，或者短信验证登录时。当我们点击发送验证码后，验证码输入框旁边的按钮就会自动灰掉，此时只能等待倒计时完成，才可以继续点击重新发送验证码。那么，我就来教教大家如何用活字格实现这样的效果吧~

步骤一：其实如果大家有举一反三的能力，那么这个场景也是从场景一引申出来滴~怎么搞呢？

这个场景下，我们只需要一个页面就可以。同样在Verify页面上，我们新建一个命令按钮，并给这个单元格起名为“CountDown”。
image.png863137817.png