Javascript 使用HTML和CSS的JS倒计时时钟_Javascript_Html_Css

Javascript 使用HTML和CSS的JS倒计时时钟

javascript html css

Javascript 使用HTML和CSS的JS倒计时时钟,javascript,html,css,Javascript,Html,Css,我想显示一个倒计时计时器和进度条。我有这个javascript代码，但我不能将css、html和进度条形码添加到我的javascript代码中 var Hourslft=3； var minutesleft=0； var secondsleft=0； var finishedtext=“倒计时完成！”； var end1； if（localStorage.getItem（“end1”））{ end1=新日期（localStorage.getItem（“end1”）； }否则{ end1=新日

我想显示一个倒计时计时器和进度条。我有这个javascript代码，但我不能将css、html和进度条形码添加到我的javascript代码中


var Hourslft=3；
var minutesleft=0；
var secondsleft=0；
var finishedtext=“倒计时完成！”；
var end1；
if（localStorage.getItem（“end1”））{
end1=新日期（localStorage.getItem（“end1”）；
}否则{
end1=新日期（）；
end1.setMinutes（end1.getMinutes（）+minutesleft）；
end1.setSeconds（end1.getSeconds（）+secondsleft）；}
变量计数器=函数（）{
var now=新日期（）；
var diff=end1-现在；
diff=新日期（diff）；
var毫秒=parseInt（（差异%1000）/100）
var sec=parseInt（（差异/1000）%60）
var mins=parseInt（（差/（1000*60））%60）
var小时=parseInt（（差/（1000*60*60））%24）；
如果（小时<10）{
小时数=“0”+小时数；}
如果（分钟<10）{
分钟=“0”+分钟；}
如果（秒<10）{
sec=“0”+sec；}
如果（现在>=end1）{
清除超时（间隔）；
setItem（“end”，null）；
localStorage.removietem（“end1”）；
localStorage.clear（）；
document.getElementById（'divCounter'）。innerHTML=finishedtext；
如果（确认（“超时！”）
window.location.href=“result.php”；
}否则{
var值=小时+“：”+分钟+“：”+秒；
setItem（“end1”，end1）；
document.getElementById（'divCounter'）。innerHTML=value；}
var间隔=设置间隔（计数器，1000）；

也许我不完全理解你的问题。但这里有一些想法，我会想出

可能是由于将代码的html部分复制到您的帖子中而丢失了
我想你明白了

我根据您的代码制作了一个超级简单的示例：

<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>


var hoursleft=0；
var minutesleft=5；
var secondsleft=0；
var finishedtext=“倒计时完成！”；
var end1；
var progressBar=document.getElementById（'progressBar'）
if（localStorage.getItem（“end1”））{
end1=新日期（localStorage.getItem（“end1”）；
}否则{
end1=新日期（）；
end1.setHours（end1.getHours（）+hoursleet）；//为什么缺少这一行？
end1.setMinutes（end1.getMinutes（）+minutesleft）；
end1.setSeconds（end1.getSeconds（）+secondsleft）；
}
progressBar.max=end1-新日期（）；
变量计数器=函数（）{
var now=新日期（）；
var diff=end1-现在；
diff=新日期（diff）；
var毫秒=parseInt（（差异%1000）/100）
var sec=parseInt（（差异/1000）%60）
var mins=parseInt（（差/（1000*60））%60）
var小时=parseInt（（差/（1000*60*60））%24）；
如果（小时<10）{
小时数=“0”+小时数；
}
如果（分钟<10）{
分钟=“0”+分钟；
}
如果（第10节）{
sec=“0”+sec；}
如果（现在>=end1）{
清除超时（间隔）；
setItem（“end”，null）；
localStorage.removietem（“end1”）；
localStorage.clear（）；
document.getElementById（'divCounter'）。innerHTML=finishedtext；
if（confirm（“TIME UP！”）window.location.href=“result.php”；
}否则{
progressBar.value=progressBar.max-（现在结束1）；
var值=小时+“：”+分钟+“：”+秒；
setItem（“end1”，end1）；
document.getElementById（'divCounter'）。innerHTML=value；
}
}
var间隔=设置间隔（计数器，1000）；

我希望这有帮助。不要犹豫，把你的问题说得更清楚。

当你已经在做

document.getElementById（'divCounter'）时，你说不能添加是什么意思
我有一个没有css的计时器，你能帮我用这个倒计时计时器添加一个进度条吗？只需添加
谢谢你的努力，但是当时间到期时，“result.php”显示为空（将查询从当前页面发送到result.php页面不起作用）！！有什么想法吗？