CSS를 사용하여 JavaScript 출력 스타일 지정하기

Question

자바 스크립트는 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

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/

Answer 2

보십시오, 당신의 자바 스크립트에이를 배치하여 setInterval은 decrementCounter마다 초를 호출합니다. decrementCounter에서 우리는 값이 인지 여전히 확인합니다. 그렇지 않으면 현재 창을 닫습니다. 있도록하지 않습니다, 당신은 decrementFunction의 범위를 벗어난 ProgressBar 구성 변수를 선언 할 수 있습니다

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

: 당신은 진행률 표시 줄에 바인딩 할 경우

var counter = 10; //time in seconds 

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

    setInterval(decrementCounter, 1000); 

당신은 < 진행의 HTML> 요소를 사용할 수 있습니다 각 호출시 DOM에서 해당 항목을 검색해야합니다. 그런 다음 JavaScript에서 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