倒计时自定义弹出界面

本文介绍了一个使用HTML、CSS和JavaScript实现的居中弹窗效果及简单的倒计时功能。通过jQuery简化DOM操作,实现了弹窗的显示与隐藏,并在提示信息中加入了动态更新的倒计时。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<style type="text/css"> 
.window{ 
    width:250px; 
    background-color:#d0def0; 
    position:absolute; 
    padding:2px; 
    margin:5px; 
    display:none; 
    } 
.content{ 
    height:150px; 
    background-color:#FFF; 
    font-size:14px; 
    overflow:auto; 
    } 
    .title{ 
        padding:2px; 
        color:#0CF; 
        font-size:14px; 
        } 
.title img{ 
        float:right; 
        } 
</style> 
<script type="text/javascript" src="/selfservice/front/inc/index/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#btn_center").click(function () {
            popCenterWindow();
        });
    }); 
</script> 
</head> 
<body onload="settime()">
	
 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
<input type="button" value="居中窗口" id="btn_center" /> 
</div>
   <div class="window" id="center"> 
<div id="title" class="title"><img src="" alt="关闭" />温馨提示</div> 
<div class="content">温馨提示:请先收好您的身份证!<span id="shijian"></span>	
</div> 
</div> 
   
   
  <script type="text/javascript">
  //获取窗口的高度 
var windowHeight; 
//获取窗口的宽度 
var windowWidth; 
//获取弹窗的宽度 
var popWidth; 
//获取弹窗高度 
var popHeight; 
function init(){ 
   windowHeight=$(window).height(); 
   windowWidth=$(window).width(); 
   popHeight=$(".window").height(); 
   popWidth=$(".window").width(); 
} 
//关闭窗口的方法 
function closeWindow(){ 
    $(".title img").click(function(){ 
        $(this).parent().parent().hide("slow"); 
        }); 
    } 
    //定义弹出居中窗口的方法 
    function popCenterWindow(){ 
        init(); 
        //计算弹出窗口的左上角Y的偏移量 
    var popY=(windowHeight-popHeight)/2; 
    var popX=(windowWidth-popWidth)/2; 
    //设定窗口的位置 
    $("#center").css("top",popY).css("left",popX).slideToggle("slow");  
    closeWindow(); 
    } 
    
    var countdown=6;
function settime() {
      
        if (countdown == 0) {  
           alert("时间到");
        } else {  
           document.getElementById("shijian").innerHTML=countdown;
            countdown--;  
            setTimeout(function() {  
                settime()  
            },1000)  
        }  
  
 } 
//首页的时间设置
function settimeindex() {
           document.getElementById("shijian").innerHTML=countdown;
            countdown--;  
            setTimeout(function() {  
                settime()  
            },1000)  
        }  
  
    </script>
  </body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨爵爷谈AI架构编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值