个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我只想向弹出窗口添加一个 10 秒的倒数计时器，之后弹出窗口将关闭。
加载弹出窗口后，我需要在弹出窗口中显示 10 秒倒计时。一旦 10 秒过去，弹出窗口应该关闭。
这是我到目前为止尝试过的代码:
<html>
<head>
<title>Popup Box DIV</title>
<style type="text/css">
#popup_box {
display: none; /* Hide the DIV */
position: fixed;
_position: absolute; /* hack for internet explorer 6 */
height: 500px;
width: 500px;
background:;
left: 400px;
top: 50px;
z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 25px;
/* additional features, can be omitted */
border: 2px;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px;
-webkit-box-shadow: 0 0 5px;
box-shadow: 0 0 5px;
}
#container {
background:; /*Sample*/
width: 100%;
height: 100%;
}
a {
cursor: pointer;
text-decoration: none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
font-size: 20px;
line-height: 15px;
right: 5px;
top: 5px;
position: absolute;
color: #6fa5e2;
font-weight: 500;
}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
});
</script>
</head>
<body>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<h1>it closed after 10 sec</h1>
<a id="popupBoxClose">Close</a> </div>
<div id="container"> <!-- Main Page -->
<h1></h1>
</div>
</body>
</html>
最佳答案
您需要使用setInterval。这将每隔 x 时间触发一个函数(在本例中为 1000 毫秒或 1 秒)。此函数负责减少计数器变量，直到它达到 0，此时它卸载弹出窗口并使用 clearInterval 停止间隔再次运行。
http://jsfiddle.net/chrissp26/8ygva6hm/
像这样给 H1 添加一个 ID:
<h1 id="countDown">it closed after 10 sec</h1>
并将您的 JavaScript 更改为:
$(document).ready( function() {
// When site loaded, load the Popupbox First
loadPopupBox();
$('#popupBoxClose').click( function() {
unloadPopupBox();
});
$('#container').click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
var counter = 10;
var id;
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "0.3"
});
id = setInterval(function() {
counter--;
if(counter < 0) {
clearInterval(id);
unloadPopupBox();
} else {
$("#countDown").text("it closed after " + counter.toString() + " seconds.");
}
}, 1000);
}
});
这里有一个您可能会喜欢的不同版本。该脚本是完全封装的，因此更加整洁。它还具有更平滑的动画过渡等。
关于jquery - 如何将 10 秒倒数计时器添加到弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25197035/
24
4
0
如果我有一个变量 8589934592 示例: var a = (8589934592 | 0); //a is 0 var b = (8589934591223 | 0); //b
随着我们提高音阶，音符频率增加； #define A4 440 // These are the frequencies of the notes in herts #define A
我有一个这样组织的列表: [('down', 0.0098000000000000309), ('up', 0.0015000000000000568), ('down', 0.00890000000
如果我有一个多项式 P，有没有办法计算 P^-1 模 Q，即 Q 是另一个多项式？我知道这两个多项式的系数都属于以 z 为模的整数域，即 z 是一个整数。 我不确定 SymPy 是否已经在其 galo
对于给定的文件，我可以向后计算行数吗？即从 EOF 开始，计算行数直到开始？ 我可以 fseek 到文件末尾。从那里开始，继续寻找新行字符(新行的指示)并继续增加我的 line_number 计数。但
有什么方法可以编写带除法的 C 代码来命令编译器在代码中需要常规除法精度的几个特定位置不使用快速除法(通过倒数数学)，即使在全局允许倒数数学的情况下也是如此？ 理想情况下，有一种方法不是特定于编译器的
我正在尝试将照片从我计算机上的本地文件导入到我的 HTML 文件中。我已经设法做到了，但它是按升序排列的。我尝试添加一个变量 JavaScript $(document).ready( functio
我正在尝试使用 commons-math 计算 2 尾学生分布的逆。我正在使用 Excel 来比较值并验证结果是否正确。 所以使用excel计算TINV，自由度为5，我使用95.45% =TINV(0
我有一个 jQuery 相机插件，它使用以下命令来拍摄快照。 这是它运行的代码。 function take_snapshot() { // take snapshot and get i
我刚刚学会了训练 brain.js network 并且只是在玩它。然后我很好奇是否可以采取相反的方式 - 从输出预测输入？ 这是我的代码 const brain = require('brain.j
如果精度不重要，有什么方法可以提高速度的倒数(X 的除法 1)？ 所以，我需要计算 1/X。是否有一些解决方法让我失去精度但做得更快？ 最佳答案 𝗛𝗲𝗿𝗲𝗛𝗲𝗿𝗲𝗛𝗼𝘄𝗧𝗼?
令 N 为整数。如果N = 2536，则反转N为6352。如果N = 1000000，则反转N为1。 给定一个整数 M，其中 1 <= M <= 10^(100000)。 我们需要找到一个整数 N 是
我是一名优秀的程序员,十分优秀！