Javascript弹出倒计时提示框的问题。倒计时提示框。倒计时提示框。倒计时提示框。
实现5分钟无点击或者键盘事件,弹出框提示,提示框倒计时30秒关闭,并跳转链接提示框要显示倒计时。30，29，28……...
实现5分钟无点击或者键盘事件,弹出框提示,提示框倒计时30秒关闭,并跳转链接
提示框要显示倒计时。30，29，28…… 展开
提示框要显示倒计时。30，29，28…… 展开
2个回答
展开全部
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
#alert{
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
border: 1px solid black;
border-radius: 5px;
text-align: center;
line-height: 100px;
font-size: 20px;
display: none;
}
</style>
</head>
<body>
<div id="alert"></div>
<script type="text/javascript">
var timer1,
timer2,
count1 = 0,
count2 = 0,
min = 5,
sec = 30,
str = '倒计时：',
url = 'http://www.baidu.com',
ele = document.getElementById('alert');
window.onmousedown = window.onkeydown = function () {
clearInterval(timer1);
clearInterval(timer2);
count1 = 0;
count2 = 0;
ele.style.display = 'none';
timer1 = setInterval(listen, 1000);
}
timer1 = setInterval(listen, 1000);
function listen() {
count1++;
if (count1 === min * 60) {
clearInterval(timer1);
alert();
}
}
function alert() {
ele.innerHTML = str + sec;
ele.style.display = 'block';
timer2 = setInterval(countDown, 1000);
}
function countDown() {
count2++;
if (count2 === sec) {
location.href = url;
}
else {
ele.innerHTML = str + (sec - count2);
}
}
</script>
</body>
更多追问追答
追问
你这根本不对呀
追答
你运行过没？你没跑过就说不对？
因为是5分钟，时间太长，所以你要等5分钟才能看到弹框
如果5分钟之内你点了鼠标，或者按了键盘，就要从头开始计时
上面有个变量min=5，是5分钟的意思，你可以改成0.1也就是6秒钟测试下
sec=30，是30秒的意思，是倒计时30秒，你也可以改成任意值
url是连接，随便你改
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<meta charset="utf-8"/>
<title>倒计时</title>
<script src="jquery.js"></script>
<style>
body{
padding:0;
margin:0;
}
.dd{
position:fixed;
z-index:1;
width:30%;
height:240px;
background:#eee;
top:30%;
left:30%;
border-radius:10px;
display:none;
}
.d{
position: absolute;
border-radius:5px;
background:green;
width:100px;
height:40px;
color:#fff;
text-align:center;
border:0;
left:42%;
bottom:15px;
}
b{
color:red;
}
.c{
position: absolute;
text-align:center;
bottom:120px;
left:42%;
}
</style>
</head>
<body>
<div class="a">
<b id="s1">3</b><label>秒后弹出提示框</label>
</div>
<div class="dd">
<div class="c">
<b id="s2">10</b><label>秒后将跳转</label>
</div>
<button class="d">确定</button>
</div>
</body>
<script type="text/javascript">
$(function(){
var to1;
var iv2;
to1 = setTimeout(function(){
$(".dd").fadeIn("slow");
iv2 = setInterval(function(){
$("#s2").text(Number($("#s2").text())-1);
if($("#s2").text() == "0"){
clearInterval(iv2);
alert("发送ajax请求");
//这里发送请求
// $.post("",{
// },function(t,s){
// });
}
},1000);
},1000);//这里是10s，要5分钟就是1000*60*5
if($(".dd").css("display")=="block"){
clearTimeout(to1);
}
$(".d").click(function(){
if($("#s2").text() != "0"){
$(".dd").hide();
clearInterval(iv2);
}
});
$(document).on("mousedown keydown", function(){
console.info("点击了鼠标或键盘");
clearTimeout(to1);
clearInterval(iv2);
});
});
</script>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
