如何使用CSS样式输出的JavaScript

How To Use CSS To Style The Output Of JavaScript

本文关键字：JavaScript 输出 样式 何使用 CSS      更新时间：2023-09-26

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>

html:

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

js代码:

// 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();
}

演示——> http://jsfiddle.net/Junkie/DEc4F/3/

试着把它放在你的javascript中，setInterval会每秒钟调用一次递减计数器。在decrementCounter中，我们检查值是否为仍然是正的，否则我们关闭当前窗口。

 var counter = 10; //time in seconds
 var decrementCounter = function() {
   if (counter > 0)
      counter--;
   else
      window.close();
  }
  setInterval(decrementCounter, 1000);

如果你想绑定到一个进度条，你可以使用 

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

您可以在decrementFunction作用域之外声明progressBar变量，这样您就不必在每次调用时都在DOM中搜索它。然后在javascript中更新进度条的value属性每次调用decrementCounter。它提供了以下功能:

  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

相关文章：