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

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>

//确定我们倒计时的日期
var target_date=new date（）.getTime（）；
无功延迟=10；
//时间单位变量
var天、小时、分钟、秒；
//获取标记元素
var countdown=document.getElementById（“倒计时”）；
//每1秒更新id为“倒计时”的标签
setInterval（函数（）{
//找出从现在到目标之间的“秒数”
var current_date=new date（）.getTime（）；
var秒数左=（当前日期-目标日期）/1000；
变量a=（延迟-剩余秒数）；
//做一些时间计算
分钟=分钟（a/60）；
秒=parseInt（a%60）；
//格式化倒计时字符串+设置标记值
countdown.innerHTML=分钟数+m:+秒数+s；
如果（剩余秒>延迟）{
setTimeout（action（），10）；
}
}, 1000);
var action=函数（）{
close（）；
}

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

 var counter = 10; //time in seconds

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

  setInterval(decrementCounter, 1000);

如果要绑定到进度条，可以使用Html的元素：

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

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

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

//设置我们倒计时的日期
var target_date=new date（）.getTime（）；
无功延迟=10；
//时间单位变量
var天、小时、分钟、秒；
//获取标记元素
var countdown=document.getElementById（“倒计时”）；
//每1秒更新id为“倒计时”的标签
setInterval（函数（）{
//找出从现在到目标之间的“秒数”
var current_date=new date（）.getTime（）；
var秒数左=（当前日期-目标日期）/1000；
var a=（延迟-秒/左）；
//做一些时间计算
分钟=分钟（a/60）；
秒=parseInt（a%60）；
var进度=a/延迟*100；
//格式化倒计时字符串+设置标记值
countdown.innerHTML=''+minutes+“m:''+seconds+“s”+''；
如果（剩余秒>延迟）
{setTimeout（action（），10）；}
if（a<0）
{
countdown.innerHTML='END'；
window.close（）；
}
}, 1000);
var action=function（）
{
close（）；
}

---

演示-->

您可以使用CSS对其进行样式设置，就像其他元素一样。这里有一个例子：不是100%确定你在问什么，但我认为你在寻找

倒计时

元素上的

.style

对象。因此，请执行类似于

countdown.style.display='none'

@freefiller的操作，不要使用内联样式表。如果设置一个包含所用样式的类名，代码将更加灵活。例如

countdown.classList.add（'hide'）这是一个三个问题：如何使用JS更改样式；如何使用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();
}