layui中layer.msg弹出层倒计时功能

原创于 2019-07-17 11:03:43 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layui倒计时

layui篇专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用layui框架实现页面上的倒计时功能。通过设置初始时间和回调函数，可以轻松地在弹窗中显示倒计时，并在倒计时结束后执行指定的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

laiyui做一个倒计时功能，直接贴js代码了

layui.use('layer',function(){
              //20S倒计时，一般time的值跟i值保持一致，例如倒计时5s，=5,time=5,i只是起始的数字
                layer.msg("正在执行，倒计时", {
                    time: 20000,
                    shade: 0.6,
                    success: function (layero, index) {
                        var msg = layero.text();
                        var i = 20;
                        var timer = null;
                        var fn = function () {
                            layero.find(".layui-layer-content").text(msg + '(' + i + ')');
                            if (!i) {
                                layer.close(index);
                                clearInterval(timer);
                            }
                            i--;
                        };
                        timer = setInterval(fn, 1000);
                        fn();
                    },
                }, function () {
                    //倒计时完成后需要执行的代码
                    alert("倒计时执行完成");
                });
            });