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

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

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


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

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


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


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

1. var p= Forguncy.Page;
   
2. //获取当前页面名称
   
3. var pageName = p.getPageName();
   
4. if(pageName =="Print"){
   
5.         var count = 30;                          //此处设置倒计时时间，这里设置为30秒
   
6.         console.log(pageName)   
   
7.         var resend = setInterval(function(){     // 开启计时事件
   
8.                 if(Forguncy.Page.getPageName() =="Print"){
   
9.                     count--;
   
10.                         if (count > 0){
    
11.                                 // 分别给名为 RemindTitle 和 CountDown 的单元格设值
    
12.                                 p.getCell("RemindTitle").setValue("结束本次提交操作，"+count+"秒后将自动结束");
    
13.                                 p.getCell("CountDown").setValue("立即返回("+count+" s)");
    
14.                                 //$('#12c3p').click();
    
15.                         }else{
    
16.                                 // 点击事件
    
17.                                 $("[fgcname='CountDown'] button").click();
    
18.                                 clearInterval(resend);
    
19.                         }
    
20.                 }else{
    
21.                         window.clearInterval(resend);
    
22.                 }
    
23. 
    
24.         }, 1000);
    
25. }else{
    
26.         alert("OK");
    
27. }

复制代码

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

为了更加美观，所以给每个页面都设置了母版页。


看看效果如何~


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

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

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

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


步骤二：
还是要借助JavaScript代码的强大，不过这里就不能再页面加载时命令中设置了，要在这个命令按钮中设置JavaScript命令。

1. var p= Forguncy.Page;
   
2. //获取当前页面名称
   
3. var pageName = p.getPageName();
   
4. if(pageName =="Verify"){
   
5.         var count = 30;
   
6.         console.log(pageName)
   
7.         var resend = setInterval(function(){
   
8.                 if(Forguncy.Page.getPageName() =="Print"){
   
9.                     count--;
   
10.                         if (count > 0){
    
11.                                 p.getCell("CountDown").setValue("重新发送时间("+count+" s)");
    
12.                         }else{
    
13.                                 p.getCell("CountDown").setValue("发送验证码");  // 计时结束后改变单元格的值，解除条件格式
    
14.                                 $("[fgcname='CountDown'] button").click();
    
15.                                 clearInterval(resend);
    
16.                         }
    
17.                 }else{
    
18.                         window.clearInterval(resend);
    
19.                 }
    
20. 
    
21.         }, 1000);
    
22. }else{
    
23.         alert("OK");
    
24. }

复制代码

步骤三：（重要~）
这里就要借助条件格式啦，因为我们要确保在计时的过程中命令为禁用状态，当计时结束后，命令按钮才可以点击。设置如图：


经过以上设置后，就可以实现我们想要的效果啦~来看看效果~


怎么样？各位学会了吗？
附件中是工程文件，供大家下载研究哈~