<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			body{position:relative;height:800px;}

			#wrap{width:300px;height:200px;background:#fafafa;box-shadow:5px 5px 5px #C9C9C9;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;}

			#close{position:absolute;right:0;font-size:20px;right:15px;top:5px;cursor:pointer;}

			.txt{max-height:100px;padding-top:30px;text-align:center;line-height:150px;}

			.tip{position:absolute;bottom:0;text-align:center;border-top:1px solid #ccc;padding:6px 0;width:100%;}

			#time{color:red;}

		</style>

	</head>

	<body>

		<div id="wrap">

			<div class="txt">弹窗文字内容</div>

			<div id="close">x</div>

			<div class="tip">倒计时<span id="time"></span>s自动关闭</div>

		</div>

		<script>

			window.onload=function(){

				var box=document.getElementById("wrap");

				var obj=document.getElementById("time");

				var close=document.getElementById("close");

				var num=10;

				obj.innerHTML=num;

				function timFn(){

					num--;

					obj.innerHTML=num;

					if(num == 0){

						box.style.display="none";

					}

				}

				setInterval(timFn,1000);

				close.onclick=function(){

					box.style.display="none";

				}

			}

		</script>

	</body>

</html>

　　

倒计时5S秒自动关闭弹窗的更多相关文章

  1. winfrom弹出窗口用timer控件控制倒计时20秒后关闭

    功能描述: 因为在程序退出时需要确认是否是误操作,所以加了密码输入的子窗体,子窗体在20秒内会自动关闭 代码如下: private int count; private void Form2_Load ...

  2. asp.net js 倒计时总秒数量 和 排序

    Edit in JSFiddle JavaScript HTML CSS Result h1 { font-family: "微软雅黑"; font-size: 40px; mar ...

  3. js 验证码 倒计时60秒

    js 验证码 倒计时60秒 <input type="button" id="btn" value="免费获取验证码" /> & ...

  4. iOS-验证码倒计时60秒

    一. 要求 1.点击获取验证码按钮,60秒倒计时,按钮变成不可点击状态,按钮文字变成倒计时的秒数. 2.当倒计时为0的时候,释放掉定时器NSTimer,按钮变成可以点击状态,按钮文字变成"获 ...

  5. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

  6. Android 实现简单 倒计时60秒，一次1秒

    倒计时功能如上图所示,其实就几行代码即可实现效果啦!!! /** 倒计时60秒,一次1秒 */ CountDownTimer timer = new CountDownTimer(60*1000, 1 ...

  7. js实现倒计时60秒的简单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  8. js 简单实现获取短信按钮倒计时60秒

    <!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content- ...

  9. js-弹框倒计时三秒后，自动关闭???

    效果: js: //弹出窗,三秒倒计时 countdown(){ //点击发布按钮后,三秒倒计时开始 $(".btn-pub").click(function(){ var cou ...

随机推荐

  1. centos7开放端口和防火墙设置

    centos7开放端口和防火墙设置. 查看防火墙状态: firewall-cmd --state 如果显示: not running 打开防火墙服务: systemctl start firewall ...

  2. LaTeX 公式编辑

    推荐一篇关于LaTeX的文档:<一份不太简短的LATEX 2ε介绍> 1. 常用数学公式符号: 求期望 $\mathbb{E}$ \mathbb{E} 正负无穷 $+\infty$,$-\ ...

  3. python接口自动化（十二）--https请求（SSL）（详解）

    简介 本来最新的requests库V2.13.0是支持https请求的,但是一般写脚本时候,我们会用抓包工具fiddler,这时候会 报:requests.exceptions.SSLError: [ ...

  4. 简单工厂模式--java代码实现

    简单工厂模式 工厂,生产产品的场所.比如农夫山泉工厂,生产农夫山泉矿泉水.茶π等饮料.矿泉水和茶π都属于饮料,都具有解渴的功能,但是每种饮料给人的感觉是不一样的.矿泉水和茶π在Java中相当于子类,饮 ...

  5. asp.net core系列 54 IS4用客户端凭据保护API

    一. 概述 本篇开始进入IS4实战学习,从第一个示例开始,该示例是 “使用客户端凭据保护API”,这是使用IdentityServer保护api的最基本场景.该示例涉及到三个项目包括:Identity ...

  6. Spring Boot 2.x整合Redis

    最近在学习Spring Boot 2.x整合Redis,在这里和大家分享一下,希望对大家有帮助. Redis是什么 Redis 是开源免费高性能的key-value数据库.有以下的优势(源于Redis ...

  7. 如何在ASP.NET Core中自定义Azure Storage File Provider

    文章标题:如何在ASP.NET Core中自定义Azure Storage File Provider 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p ...

  8. C#编写扫雷游戏

    翻看了下以前大学学习的一些小项目,突然发现有个项目比较有意思,觉得有必要把它分享出来.当然现在看来,里面有很多的不足之处,但因博主现在已经工作,没有时间再去优化.这个项目就是利用C#编写一个Windo ...

  9. MySQL查看数据库安装路径

    有时候在我们开发的过程中并不一定记得数据库的安装路径.比如要查看mysql 数据库的安装目录在哪里:我们可以通过mysql命令查看mysql的安装路径: # 以下两个sql任意一个可查询 select ...

  10. Java基础练习2(构造方法)

    1.以下关于面向对象概念的描述中,不正确的一项是() A.在构造方法中,this()只能出现在构造方法第一行位置 B.在构造方法中,super()只能出现在构造方法第一行位置 C.this()和sup ...