Question

javascript是一个计时器，可以倒计时如何使用css更改样式？

（或任何其他替代方案）

我需要脚本在定时器达到0时关闭窗口，但不会发生。出了什么问题？

有没有办法将倒计时整合为进度条？

<span id="countdown"></span>
<script type="text/javascript">
    // set the date we're counting down to
    var target_date = new Date().getTime();
    var delay = 10;
    // variables for time units
    var days, hours, minutes, seconds;

    // get tag element
    var countdown = document.getElementById("countdown");

    // update the tag with id "countdown" every 1 second
    setInterval(function () {

        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (current_date - target_date) / 1000;
        var a = (delay - seconds_left);
        // do some time calculations


        minutes = parseInt(a / 60);
        seconds = parseInt(a % 60);

        // format countdown string + set tag value
        countdown.innerHTML = minutes + "m: " + seconds + "s";

        if (seconds_left > delay) {
            setTimeout(action(), 10);
        }

    }, 1000);
    var action = function () {
        close();
    }
</script>

Answer 1

尝试将其放在你的javascript中，setInterval会每秒钟调用一次减量计数器。在减量计数器中，我们检查值是否为仍然是积极的，如果不是我们关闭当前窗口。

 var counter = 10; //time in seconds

 var decrementCounter = function() {
   if (counter > 0)
      counter--;
   else
      window.close();
  }

  setInterval(decrementCounter, 1000);

如果要绑定到进度条，可以使用＆lt;进展＆gt; Html元素：

 <progress id="myProgessBar" value="0" max="10"></progress>

您可以在decrementFunction范围之外声明progressBar变量，这样您就不必在每次调用时在DOM中搜索它。然后在你的javascript中更新进度条的value属性每次调用减量计数器。这为您提供了以下功能：

  var decrementCounter = function() {
   if (counter > 0) {
      counter--;
      var progresBar = document.getElementBYId('myProgressBar');
      progressBar.value += 1;
   }
   else
      window.close();
  }

不完全确定语法，但这就是精神。您可以在此处找到有关进度元素的更多信息

http://www.alsacreations.com/article/lire/1416-html5-meter-progress.html

Answer 2

HTML：

<div id="countdown" style="background:gray"></div>

js code：

// set the date we're counting down to
var target_date = new Date().getTime();
 var delay=10;
// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (current_date - target_date) / 1000;
    var a=(delay-seconds_left);
    // do some time calculations


    minutes = parseInt(a / 60);
    seconds = parseInt(a % 60);
    var progress = a/delay*100;


    // format countdown string + set tag value
    countdown.innerHTML = '<div style="background:red; width:'+progress+'%">'+minutes + "m: " + seconds + "s" + '</div>';  

    if(seconds_left>delay)
    {setTimeout(action(),10);}

    if(a < 0)
    {
        countdown.innerHTML = 'END';  
        window.close();     
    }

}, 1000);
var action=function()
{
close();
}

演示 - ＆gt; http://jsfiddle.net/Junkie/DEc4F/3/

如何使用CSS来设置JavaScript的输出样式

2 个答案: