我想显示倒数计时器和进度条。我有这个 javascript 代码,但我无法将 css、html 和进度条代码添加到我的 javascript 代码中。
<script>
var hoursleft = 3;
var minutesleft = 0;
var secondsleft = 0;
var finishedtext = "Countdown finished!";
var end1;
if(localStorage.getItem("end1")) {
end1 = new Date(localStorage.getItem("end1"));
} else {
end1 = new Date();
end1.setMinutes(end1.getMinutes()+minutesleft);
end1.setSeconds(end1.getSeconds()+secondsleft);}
var counter = function () {
var now = new Date();
var diff = end1 - now;
diff = new Date(diff);
var milliseconds = parseInt((diff%1000)/100)
var sec = parseInt((diff/1000)%60)
var mins = parseInt((diff/(1000*60))%60)
var hours = parseInt((diff/(1000*60*60))%24);
if (hours < 10) {
hours = "0" + hours;}
if (mins < 10) {
mins = "0" + mins;}
if (sec < 10) {
sec = "0" + sec;}
if(now >= end1) {
clearTimeout(interval);
localStorage.setItem("end", null);
localStorage.removeItem("end1");
localStorage.clear();
document.getElementById('divCounter').innerHTML = finishedtext;
if(confirm("TIME UP!"))
window.location.href= "result.php";
} else {
var value = hours+":" +mins + ":" + sec;
localStorage.setItem("end1", end1);
document.getElementById('divCounter').innerHTML = value;}}
var interval = setInterval(counter, 1000);
</script>
谁能帮我用这个倒数计时器添加 css 和进度条,如图所示?
最佳答案
也许我没有完全理解你的问题。但这里有一些我会想到的想法。
也许您的代码的 html 部分在将其复制到您的帖子中时丢失了。
我根据你的代码做了一个 super 简单的例子:
<html> <body> <progress id="progressBar" value="22" max="100"></progress> <div id="divCounter"></div> </body> </html> <script> var hoursleft = 0; var minutesleft = 5; var secondsleft = 0; var finishedtext = "Countdown finished!"; var end1; var progressBar = document.getElementById('progressBar') if(localStorage.getItem("end1")) { end1 = new Date(localStorage.getItem("end1")); } else { end1 = new Date(); end1.setHours(end1.getHours()+hoursleft); // Why is this line missing? end1.setMinutes(end1.getMinutes()+minutesleft); end1.setSeconds(end1.getSeconds()+secondsleft); } progressBar.max = end1 - new Date(); var counter = function () { var now = new Date(); var diff = end1 - now; diff = new Date(diff); var milliseconds = parseInt((diff%1000)/100) var sec = parseInt((diff/1000)%60) var mins = parseInt((diff/(1000*60))%60) var hours = parseInt((diff/(1000*60*60))%24); if (hours < 10) { hours = "0" + hours; } if (mins < 10) { mins = "0" + mins; } if (sec < 10) { sec = "0" + sec;} if(now >= end1) { clearTimeout(interval); localStorage.setItem("end", null); localStorage.removeItem("end1"); localStorage.clear(); document.getElementById('divCounter').innerHTML = finishedtext; if(confirm("TIME UP!")) window.location.href= "result.php"; } else { progressBar.value = progressBar.max - (end1-now); var value = hours+":" +mins + ":" + sec; localStorage.setItem("end1", end1); document.getElementById('divCounter').innerHTML = value; } } var interval = setInterval(counter, 1000); </script>
希望对您有所帮助。不要犹豫,让您的问题更清楚。
关于javascript - 使用 HTML 和 CSS 在 JS 中的倒计时时钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53226297/