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

最新推荐文章于 2023-09-15 14:36:47 发布

原创最新推荐文章于 2023-09-15 14:36:47 发布 · 3.9k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

layui篇

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

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("倒计时执行完成");
                });
            });

标签

#layui倒计时