Countdown script hours countdown Percentage goes Down

Question

I am new to programming and have been trying to to create a graphical countdown script that reduces the discount on a price as time goes by.

As the hours countdown the percentage discount reduces and adjusts the price.

So, it may start at £100 with 70% discount and as the hours go down the discount reduces so so at 69 hours it is 69%discount and 30 hours 30% etc.

I found a couple of nice graphical snippets How to create a circular countdown timer using HTML, CSS or JavaScript?

http://jsfiddle.net/lloydhester/4PKEB/204/

<div id="progressBar">
  <div></div>
</div>

<a href="https://stackoverflow.com/q/24530908/1238019" class="solink" target="_blank">Div CSS Transition Direction</a>

function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(timeleft + " Time to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(180, 180, $('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

The script to do the countdown in % http://jsfiddle.net/gS4Rr/1/

<div id="counter">
    <p><span>100</span>%</p>
</div>


var stop = 6;

function decrease(){
    var percent = Number($('#counter span').text());
    if(percent > stop){
        $('#counter span').text(--percent);
        var t = setTimeout(decrease,10000);
    }
}
setTimeout(decrease,1000);

I can find an example code to increase the price by a fixed %. but not by a varying %.

Any help would be very gratefully received.

Please take a look at my answer and tell me if that what you want to acheive or not. — Zakaria Acharki, Aug 02 '15 at 16:26

Zakaria Acharki · Answer 1 · 2015-08-02T16:47:50.603

I'm not sure if that what you want to acheive but take a look at Fiddle Example.

Using :

((timeleft/timetotal)*100).toFixed(1)

To show the countdown with percent.

Js :

 function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;

    $element.find('div').animate({ 
        width: progressBarWidth }, 500).html(((timeleft/timetotal)*100).toFixed(1) + "% Time to go");
    if(timeleft > 0) {
        setTimeout(function() {
            progress(timeleft - 1, timetotal, $element);
        }, 1000);
    }
};

progress(180, 180, $('#progressBar'));

Hope that help.

Countdown script hours countdown Percentage goes Down

1 Answers1