How To Use CSS To Style The Output Of JavaScript

Question

The javascript is a timer that counts down how do I change the style using css?

(or any other alternative)

I need the script to close the window when the timers reaches 0 but it doesn't happen. what Is going wrong?

Is there any way to integrate the countdown as a progress bar?

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

You style it with CSS, just like you would any other element. Here's an example: http://jsfiddle.net/k9mN5/ — APAD1, Jul 17 '14 at 15:55
Not 100% sure what you're asking, but I think you're looking for the `.style` object on the `countdown` element. So do something like `countdown.style.display='none'` — freefaller, Jul 17 '14 at 15:55
@freefaller Do not use inline stylesheets. The code is much more flexible if one sets a class name that contains the used styling. For example `countdown.classList.add( 'hide' );` — feeela, Jul 17 '14 at 15:57
That are three questions in one: How to change styles using JS; how to close a window using JS and how to create a progress bar… — feeela, Jul 17 '14 at 15:58

score 0 · Answer 1 · answered Jul 17 '14 at 16:11

Try to place this in your javascript, the setInterval will call the decrementCounter every seconds. In the decrementCounter we check if the value is still positiv, if not we close the current window.

 var counter = 10; //time in seconds

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

  setInterval(decrementCounter, 1000);

If you want to bind to a progress bar you can use the < progress > element of Html:

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

You can declare progressBar variable outside the decrementFunction scope, so that you won't have to search for it in the DOM at each call. Then in you javascript you update the value attribute of the progress bar each time decrementCounter is called. Which gives you the following function :

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

Not totally sure about the syntax but that is the spirit. You can find some more information about progress element here

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

Alien · Accepted Answer · 2014-07-17T16:26:17.177

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

demo -->http://jsfiddle.net/Junkie/DEc4F/3/

Check out this question, maybe this will help you http://stackoverflow.com/questions/19761241/window-close-and-self-close-do-not-close-the-window-in-chrome — Alien, Jul 17 '14 at 17:21

How To Use CSS To Style The Output Of JavaScript

2 Answers2