创建一个简单的10秒倒计时
Create a simple 10 second countdown
我想要一行写着：
Your download will begin in (10, 9, 8, etc. Beginning on page load) seconds.
我已经设置了10秒的下载文本，并且我已经查看了其他stackoverflow帖子。它们都包括CSS和Jquery。我想要一个Javascript/HTML计时器。
对于一行简单的"您的下载将在x秒内开始"，没有其他请求。我该怎么做？
JavaScript内置了一个名为setInterval的函数，它接受两个参数——一个函数callback和一个整数timeout。调用时，setInterval将每隔timeout毫秒调用一次您赋予它的函数。
例如，如果您想每500毫秒创建一个警报窗口，可以执行以下操作。
function makeAlert(){
alert("Popup window!");
};
setInterval(makeAlert, 500);
但是，您不必为函数命名或单独声明它。相反，您可以像这样内联定义您的函数。
setInterval(function(){ alert("Popup window!"); }, 500);
一旦调用了setInterval，它就会运行，直到您对返回值调用clearInterval为止。这意味着前面的示例将无限运行。我们可以把所有这些信息放在一起，制作一个进度条，每秒更新一次，10秒后停止更新。
var timeleft = 10;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
}
document.getElementById("progressBar").value = 10 - timeleft;
timeleft -= 1;
}, 1000);<progress value="0" max="10" id="progressBar"></progress>或者，这将创建一个文本倒计时。
var timeleft = 10;
var downloadTimer = setInterval(function(){
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "Finished";
} else {
document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
}
timeleft -= 1;
}, 1000);<div id="countdown"></div>这在文本中完成。
<p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p>
<script type="text/javascript">
var timeleft = 10;
var downloadTimer = setInterval(function(){
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if(timeleft <= 0)
clearInterval(downloadTimer);
},1000);
</script>使用Promises的解决方案，包括进度条和；文本倒计时。
ProgressCountdown(10, 'pageBeginCountdown', 'pageBeginCountdownText').then(value => alert(`Page has started: ${value}.`));
function ProgressCountdown(timeleft, bar, text) {
return new Promise((resolve, reject) => {
var countdownTimer = setInterval(() => {
timeleft--;
document.getElementById(bar).value = timeleft;
document.getElementById(text).textContent = timeleft;
if (timeleft <= 0) {
clearInterval(countdownTimer);
resolve(true);
}
}, 1000);
});
}<div class="row begin-countdown">
<div class="col-md-12 text-center">
<progress value="10" max="10" id="pageBeginCountdown"></progress>
<p> Begining in <span id="pageBeginCountdownText">10 </span> seconds</p>
</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
ProgressCountdown(10, "pageBeginCountdownText");
function ProgressCountdown(timeleft, text) {
return new Promise((resolve, reject) => {
var countdownTimer = setInterval(() => {
timeleft--;
document.getElementById(text).textContent = timeleft;
if (timeleft <= 0) {
clearInterval(countdownTimer);
resolve(true);
}
}, 1000);
});
}
</script>
<style>
.dot {
height: 100px;
width: 100px;
border-style: solid;
border-width: 2px;
border-radius: 50%;
display: inline-block;
text-align: center;
}
.clock {
text-align: center;
}
.pp {
text-align: center;
}
</style>
<div class="row begin-countdown">
<div class="col-md-12 text-center">
<div class="dot" style="position: center">
<h3 id="pageBeginCountdownText" class="clock">10</h3>
<p class="pp">Seonds</p>
</div>
</div>
</div>
</body>
</html>var seconds_inputs = document.getElementsByClassName('deal_left_seconds');
var total_timers = seconds_inputs.length;
for ( var i = 0; i < total_timers; i++){
var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var cal_seconds = seconds_inputs[i].getAttribute('value');
eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
}
function timer() {
for ( var i = 0; i < total_timers; i++) {
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);
if (eval('seconds_'+ seconds_prod_id) == 0) {
clearInterval(countdownTimer);
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
} else {
var value = eval('seconds_'+seconds_prod_id);
value--;
eval('seconds_' + seconds_prod_id + '= ' + value + ';');
}
}
}
var countdownTimer = setInterval('timer()', 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="deal_left_seconds" data-value="1" value="10">
<div class="box-wrapper">
<div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
</div>
<div class="box-wrapper">
<div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
</div>
<div class="box-wrapper">
<div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
</div>
<div class="box-wrapper hidden-md">
<div class="seconds box"> <span class="key" id="deal_sec_1">00</span> <span class="value">SEC</span> </div>
</div>var seconds_inputs = document.getElementsByClassName('deal_left_seconds');
var total_timers = seconds_inputs.length;
for ( var i = 0; i < total_timers; i++){
var str_seconds = 'seconds_'; var str_seconds_prod_id = 'seconds_prod_id_';
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var cal_seconds = seconds_inputs[i].getAttribute('value');
eval('var ' + str_seconds + seconds_prod_id + '= ' + cal_seconds + ';');
eval('var ' + str_seconds_prod_id + seconds_prod_id + '= ' + seconds_prod_id + ';');
}
function timer() {
for ( var i = 0; i < total_timers; i++) {
var seconds_prod_id = seconds_inputs[i].getAttribute('data-value');
var days = Math.floor(eval('seconds_'+seconds_prod_id) / 24 / 60 / 60);
var hoursLeft = Math.floor((eval('seconds_'+seconds_prod_id)) - (days * 86400));
var hours = Math.floor(hoursLeft / 3600);
var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
var minutes = Math.floor(minutesLeft / 60);
var remainingSeconds = eval('seconds_'+seconds_prod_id) % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = pad(days);
document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = pad(hours);
document.getElementById('deal_min_' + seconds_prod_id).innerHTML = pad(minutes);
document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(remainingSeconds);
if (eval('seconds_'+ seconds_prod_id) == 0) {
clearInterval(countdownTimer);
document.getElementById('deal_days_' + seconds_prod_id).innerHTML = document.getElementById('deal_hrs_' + seconds_prod_id).innerHTML = document.getElementById('deal_min_' + seconds_prod_id).innerHTML = document.getElementById('deal_sec_' + seconds_prod_id).innerHTML = pad(0);
} else {
var value = eval('seconds_'+seconds_prod_id);
value--;
eval('seconds_' + seconds_prod_id + '= ' + value + ';');
}
}
}
var countdownTimer = setInterval('timer()', 1000);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="deal_left_seconds" data-value="1" value="10">
<div class="box-wrapper">
<div class="date box"> <span class="key" id="deal_days_1">00</span> <span class="value">DAYS</span> </div>
</div>
<div class="box-wrapper">
<div class="hour box"> <span class="key" id="deal_hrs_1">00</span> <span class="value">HRS</span> </div>
</div>
<div class="box-wrapper">
<div class="minutes box"> <span class="key" id="deal_min_1">00</span> <span class="value">MINS</span> </div>
</div>
<div class="box-wrapper hidden-md">
<div class="seconds box"> <span class="key" id="deal_sec_1">0p0</span> <span class="value">SEC</span> </div>
</div>相关文章：
- 定时循环，间隔10秒
- 加载页面每10秒显示一条不同的消息
- 我想每隔10秒刷新一个wordpress网站
- 如果页面加载时间超过 10 秒，如何刷新页面
- 如何每 10 秒调用一次 JS 函数，然后以角度激活一个函数
- 10秒后停止自动播放-环岛
- 试图修复一个倒计时计时器问题，该问题导致计时器运行，然后在使用Javascript时崩溃约10秒
- 每10秒调用一次页面加载事件
- 10秒后添加类
- 在函数完成后10秒重复运行该函数(JavaScript）
- 简单的秒计时器使用javascript并显示在我的html中
- 如何制作每 10 秒刷新一次的 jquery 表
- 10秒后关闭弹出窗口
- 引导模式在单击时打开并保持打开状态 10 秒
- 如何在页面加载 10 秒后显示弹出窗口
- 如何在页面加载 10 秒后自动播放 YouTube 视频
- 我应该在此代码中添加什么以使弹出窗口在 10 秒后出现
- 如何满足内置读取操作的新要求，以便在加载页面 10 秒后生成操作
- 在 10 秒 javascript 后停止页面加载
- 创建一个简单的10秒倒计时
