SCSS_CODE
//Countdown Timer Styles
.limited_edt { color: #464646; margin-top: 11px; margin-bottom: -11px; text-transform: uppercase; font-size: 23px; text-align: center; } .progressbar .meter { height: 11px; position: relative; margin: 20px 0 5px 0; padding: 0px; background: #EEE; border-radius: 7px 7px 7px 7px; height: 11px; } .progressbar .meter .inside { background-color: #f50000; border-radius: 7px 7px 7px 7px; height: 11px; } .limited_edt span.num { color: #d60404; font-weight: bold; } .clearfix:after { content: ""; display: table; clear: both; } #countdown { width: 100%; display: block; padding-top: 15px; } .counting { width: 25%; } .counting { text-align: center; font-family: PT Sans; font-family: 700; color: #0a0a0a; line-height: 1; font-size: 48px; float: left; } .counting span { font-size: 12px; display: block; text-align: center; color: #0a0a0a; } .countdown-message { font-weight: bold; clear: both; padding: 20px 0 0 0; text-align: center; display: block; margin: 0; font-size: 16px; } |
HTML_JS_CODE
<!------------------- Start Countdown Timer ------------------->
<div class="progressbar below"></div>
<div class="countdown clearfix">
<span id="countdown"></span>
<p class="countdown-message">The sale will be over once the timer hits zero</p>
</div>
<hr>
<script>
function getRandomizer(bottom, top) {
return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
}
function setCookie(cname, cvalue, seconds) {
var d = new Date();
d.setTime(d.getTime() + (seconds * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
var product_timer_top_text_enable = true;
var product_progressbar_enable = true;
if(!progressbar_message) var progressbar_message = "ONLY [num] LEFT AT THIS PRICE";
var percentage=80;
var totalStock=50;
var prevStock = 0;
var rollDie = parseInt(getCookie("random_7963458115"));
if(!rollDie) rollDie = getRandomizer(5,30);
function showStock() {
if(rollDie >= 6) rollDie = rollDie-(0.0005*(rollDie-4)*(rollDie-4));
var intRollDie = parseInt(rollDie);
if (prevStock != intRollDie) {
setCookie("random_7963458115", intRollDie, 24*60*60);
var percentagetoshow = parseInt(intRollDie/totalStock*100);
var html = '';
if(product_timer_top_text_enable) html += '<p class="limited_edt"><span>'+ progressbar_message.replace('[num]', '<span class="num">'+intRollDie+'</span>') +'</span></p>';
if(product_progressbar_enable) html += '<div class="meter red"><div class="inside" style="width: '+percentagetoshow+'%"></div></div>';
$('.progressbar').html(html);
if (prevStock > 0) {
$('.progressbar span.num').addClass('flash');
setTimeout(function () {
$('.progressbar span.num').removeClass('flash');
}, 1500);
}
prevStock = intRollDie;
}
}
showStock();
setInterval(showStock, 1000);
var time_left = parseInt("10800");
var target_date = parseInt(getCookie("timer_7963458115")) || new Date().getTime()/1000 + time_left;
setCookie("timer_7963458115", target_date, 24*60*60);
setInterval(function () {
var days, hours, minutes, seconds;
var current_time = new Date().getTime()/1000;
var seconds_left = target_date - current_time;
if(seconds_left <= 0){
target_date = new Date().getTime()/1000 + time_left;
seconds_left = target_date - current_time;
setCookie("timer_7963458115", target_date, 24*60*60);
}
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
$('#countdown').html('<div class="counting">'+days+'<span>Days</span></div><div class="counting">'+hours+'<span>Hours</span></div><div class="counting">'+minutes+'<span>Minutes</span></div><div class="counting">'+seconds+'<span>Seconds</span></div>');
}, 1000);
</script>
<!------------------- End Countdown Timer ------------------->
<div class="progressbar below"></div>
<div class="countdown clearfix">
<span id="countdown"></span>
<p class="countdown-message">The sale will be over once the timer hits zero</p>
</div>
<hr>
<script>
function getRandomizer(bottom, top) {
return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
}
function setCookie(cname, cvalue, seconds) {
var d = new Date();
d.setTime(d.getTime() + (seconds * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
var product_timer_top_text_enable = true;
var product_progressbar_enable = true;
if(!progressbar_message) var progressbar_message = "ONLY [num] LEFT AT THIS PRICE";
var percentage=80;
var totalStock=50;
var prevStock = 0;
var rollDie = parseInt(getCookie("random_7963458115"));
if(!rollDie) rollDie = getRandomizer(5,30);
function showStock() {
if(rollDie >= 6) rollDie = rollDie-(0.0005*(rollDie-4)*(rollDie-4));
var intRollDie = parseInt(rollDie);
if (prevStock != intRollDie) {
setCookie("random_7963458115", intRollDie, 24*60*60);
var percentagetoshow = parseInt(intRollDie/totalStock*100);
var html = '';
if(product_timer_top_text_enable) html += '<p class="limited_edt"><span>'+ progressbar_message.replace('[num]', '<span class="num">'+intRollDie+'</span>') +'</span></p>';
if(product_progressbar_enable) html += '<div class="meter red"><div class="inside" style="width: '+percentagetoshow+'%"></div></div>';
$('.progressbar').html(html);
if (prevStock > 0) {
$('.progressbar span.num').addClass('flash');
setTimeout(function () {
$('.progressbar span.num').removeClass('flash');
}, 1500);
}
prevStock = intRollDie;
}
}
showStock();
setInterval(showStock, 1000);
var time_left = parseInt("10800");
var target_date = parseInt(getCookie("timer_7963458115")) || new Date().getTime()/1000 + time_left;
setCookie("timer_7963458115", target_date, 24*60*60);
setInterval(function () {
var days, hours, minutes, seconds;
var current_time = new Date().getTime()/1000;
var seconds_left = target_date - current_time;
if(seconds_left <= 0){
target_date = new Date().getTime()/1000 + time_left;
seconds_left = target_date - current_time;
setCookie("timer_7963458115", target_date, 24*60*60);
}
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
$('#countdown').html('<div class="counting">'+days+'<span>Days</span></div><div class="counting">'+hours+'<span>Hours</span></div><div class="counting">'+minutes+'<span>Minutes</span></div><div class="counting">'+seconds+'<span>Seconds</span></div>');
}, 1000);
</script>
<!------------------- End Countdown Timer ------------------->