layer弹出层倒计时关闭的实现方法

前端之家收集整理的这篇文章主要介绍了layer弹出层倒计时关闭的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部分:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  9. <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
  10. <script>
  11. function func1() {
  12. var i = 9;
  13. var interval;
  14. layer.confirm('是否提交?',{
  15. btn: [i+1+'s后可提交','退出'],//按钮
  16. skin: 'layui-layer-molv',success: function(a,b){
  17. $(".layui-layer-btn0").css("backgroundColor","#92B8B1");
  18. var fn = function() {
  19. // layer.title(i+' 秒后,系统将自动退出关闭。',b);
  20. $(".layui-layer-btn0").text(i+'s后可提交');
  21. i--;
  22. };
  23. interval = setInterval(function(){
  24. fn();
  25. if(i === 0){
  26. $(".layui-layer-btn0").css("backgroundColor","#019F95");
  27. $(".layui-layer-btn0").text('提交');
  28. clearInterval(interval);
  29. }
  30. },1000);
  31. },end:function(){
  32. clearInterval(interval);
  33. }
  34. },function(){
  35. if(i<=0) {
  36. layer.msg('已提交',{icon: 1});
  37. }
  38.  
  39. },function(){
  40. clearInterval(interval);
  41. layer.msg('已关闭',{icon: 1});
  42.  
  43. });
  44. }
  45. </script>
  46. <button id="func1" onclick="func1();">询问框</button>
  47. </body>
  48. </html>

layer弹出层倒计时关闭的实现方法


以上这篇layer弹出层倒计时关闭实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

猜你在找的JavaScript相关文章