html 倒计时弹出框,javascript实现倒计时提示框

本文展示了如何使用JavaScript创建一个全屏提示框,并实现倒计时关闭功能。当点击按钮时,提示框会显示并开始倒计时,从5秒开始递减,直到计时结束自动关闭。同时,用户也可以点击提示框上的关闭按钮提前关闭提示框。
摘要由CSDN通过智能技术生成

本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下

90a21b131ca7085a1ed60774533a6944.png

代码:

全屏提示框

#button{

width: 150px;

height: 50px;

background-color: greenyellow;

}

.fullScreenDiv{/* 全屏div */

display: none;

position: absolute;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.4);

}

.promptDiv{/* 提示框div */

display: none;

position: absolute;

left: 50%;

top: 50%;

transform: translateX(-50%) translateY(-50%);

width: 30%;

height: 30%;

border-radius: 20px;

background-color:white;

text-align: center;

}

.close{

height: 34px;

line-height: 34px;

margin: 0px;

text-align: right;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

background-color: cornflowerblue

}

.X{

padding: 2px 6px;

margin-right: 8px;

color: white;

cursor: pointer;

}

.countDown{/*倒计时关闭提示框*/

color: red;

font-size: 28px;

}

window.οnlοad=function(){

document.getElementById("button").addEventListener("click",function(){

document.getElementsByClassName("fullScreenDiv")[0].style.display="block";

document.getElementsByClassName("promptDiv")[0].style.display="block";

for(var i=5;i>=0;i--){

(function(i){

setTimeout(function(){

var j=Math.abs(i-5);//如果i为0,那么被定时0s,则要输出abs(0-5)=5 ,如果i为5,那么被定时5s,则要输出abs(i-5)=0

if(j==0){

document.getElementsByClassName("fullScreenDiv")[0].style.display="none";

document.getElementsByClassName("promptDiv")[0].style.display="none";

}else{

document.getElementsByClassName("countDown")[0].innerHTML=j;

}

},i*1000);//每次间隔时间为1s

})(i);

}

});

document.getElementsByClassName("X")[0].addEventListener("click",function(){

document.getElementsByClassName("fullScreenDiv")[0].style.display="none";

document.getElementsByClassName("promptDiv")[0].style.display="none";

});

}

打开全屏提示框

X

我是全屏提示框我是全屏提示框我是全屏提示框

倒计时关闭

5

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值