JS实现的倒计时提醒窗口
最编程
2024-02-22 20:16:12
...
layui.use(["okUtils", "okCountUp", 'layer', 'jquery', "okSweetAlert2", 'element'], function () {
var countUp = layui.okCountUp;
var okUtils = layui.okUtils;
var $ = layui.jquery;
var element = layui.element;
let okSweetAlert2 = layui.okSweetAlert2;
$("#TodaysMission").click(function () {
var i = 8;
layer.open({
type: 1,
title: "训练提示",
closeBtn: 0, // 无关闭按钮
anim: 5,
shade: 0.3, //遮罩透明度
scrollbar: true, //屏蔽浏览器滚动条
skin: 'yourclass',
content: '<div style="margin-top: 1em; margin-bottom: 1em; margin-left: 3em; margin-right: 3em;" > <div class="txt1">训练时长：5</div>' +
'<div class="txt1">训练得分：100</div>' +
'<div class="txt1">请在休息30秒后开始其他游戏！</div> </div>',
btn: [i + 1 +'s后可退出'], //按钮组
yes: function (index) {//layer.msg('yes'); //点击确定回调
if (i<=0) {
layer.close(index);
}
},
success: function () {
$(".layui-layer-btn0").css("backgroundColor", "#92B8B1");
var fn = function () {
$(".layui-layer-btn0").text(i + 's后可退出');
i--;
};
interval = setInterval(function () {
fn();
if (i === 0) {
$(".layui-layer-btn0").css("backgroundColor", "#019F95");
$(".layui-layer-btn0").text('退出');
clearInterval(interval);
}
}, 1000);
}
});
});
});
推荐阅读
-
使用 ganache 实现 Web3js 与区块链交互的步骤及问题解决方案：未找到命令 "express "等。
-
js 实现输入的 ID 号，以得出生日、年龄和性别
-
任何前端都无法抗拒的炫酷效果，带你一步步用 Three.js Shader 实现！
-
JS，如果没有方法的话。(在不使用任何 JS 方法的情况下实现圆形方法）
-
WPF 多窗口磁性对齐粘边功能的实现 - 讨论
-
对用户名、密码、按钮绑定多个事件、网页跳转进行正则表达式判断的 JS 实现
-
二十一点游戏的 JS 实现
-
使用 js 实现电话号码中的文本匹配，固定电话号码
-
使用 JS 解析 LRC 格式的歌词，实现歌词同步滚动效果
-
JS 实现简单的音乐播放器和歌词滚动效果｜ 青年培训中心