用js如何编辑一个倒计时提示框？
发布时间：2022-04-07 16:20:53 所属栏目：语言 来源：互联网
导读：倒计时提示框在网页设计中是比较常见的，可应用作自动弹窗，自动关闭，那么究竟要如何实现倒计时提示框呢？下面是基于javascript实现倒计时提示框的介绍，实现效果如下： 代码： !DOCTYPE html html lang=en head meta charset=UTF-8 meta name=viewport con
|
倒计时提示框在网页设计中是比较常见的，可应用作自动弹窗，自动关闭，那么究竟要如何实现倒计时提示框呢？下面是基于javascript实现倒计时提示框的介绍，实现效果如下： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>全屏提示框</title> <style> #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 </script> </head> <body> <div> <button id="button">打开全屏提示框</button> </div> <div class="fullScreenDiv"> <div class="promptDiv"> <h4 class="close"><span class="X">X</span></h4> <p>我是全屏提示框我是全屏提示框我是全屏提示框</p> <p>倒计时关闭</p> <span class="countDown">5</span> </div> </div> </body> </html> 以上就是关于使用js实现倒计时提示框的介绍，有需要的朋友可以参考上述代码自己动手实现一下，希望文本对大家学习有帮助，想要了解更多使用JS的方法技巧，可以关注其他文章。 （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
