<!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. GC参考手册 —— GC 调优(基础篇)

    GC调优(Tuning Garbage Collection)和其他性能调优是同样的原理.初学者可能会被 200 多个 GC参数弄得一头雾水, 然后随便调整几个来试试结果,又或者修改几行代码来测试.其 ...

  2. asp.net core系列 60 Ocelot 构建服务认证示例

    一.概述 在Ocelot中,为了保护下游api资源,用户访问时需要进行认证鉴权,这需要在Ocelot 网关中添加认证服务.添加认证后,ReRoutes路由会进行身份验证,并使用Ocelot的基于声明的 ...

  3. Pycharm：书签的使用

    创建匿名书签 有时候我们的代码会写很长,为了查找方便,我们会在经常需要查看的地方插入一个书签.在 Pycharm 中,将光标移动到需要创建书签的行,按 F11 可以创建一个匿名书签,匿名书签的显示是行 ...

  4. 5.3Role和Claims授权「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,码字辛苦,如果你吃了蛋觉得味道不错,希望点个赞,谢谢关注. Role授权 这是一种Asp.Net常用的传统的授权方法,当我们在 ...

  5. python之循序渐进学习装饰器

    python装饰器的定义:在代码运行期间在不改变原函数定义的基础上,动态给该函数增加功能的方式称之为装饰器(Decorator) 装饰器的优点和用途: 1. 抽离出大量函数中与函数功能本身无关的的雷同 ...

  6. CentOS7中搭建cobbler自动装机服务

    一.实验环境 一台centos7 epel源网址 https://fedoraproject.org/wiki/EPEL?rd=Epel 使用nat模式 二.实验步骤 1.下载epel源后进行文件夹挂 ...

  7. Java的内存泄露

    Java的内存泄露 1.静态集合类引起内存泄漏 像HashMap.Vector等的使用最容易出现内存泄露,这些静态变量的生命周期和应用程序一致,他们所引用的所有的对象Object也不能被释放,因为他们 ...

  8. Restframe_work 回顾记忆集

    目录 Restframe_work 回顾记忆集 rest_framework主要功能介绍 rest_framework主要模块介绍 记忆集 错题集 混淆集 重点集 难点集 Restframe_work ...

  9. 文本输入框input text输入字母自动转大写

    现在需要把一个input输入框内的字母自动转变为大写. 查了下资料,目前收集到的方法有两种: 使用JavaScript,在input标签添加onkeyup方法,将字符转为大写. <input n ...

  10. Linux下使用ntpdate进行时间同步

    转摘自Linux下使用ntpdate进行时间同步https://www.cnblogs.com/zhi-leaf/p/6281549.html1.安装ntpdate,执行以下命令 # yum inst ...