Всем доброго времени суток.
Есть таймер с прогрессбаром, считает сколько осталось до заданной в скрипте даты (до нового года, например).
Возможно ли сделать так, чтобы таймер считал сколько осталось до конца дня, т.е. до 00.00, и после 00.00 перезапускался заново сам? Соответственно и прогрессбар тоже.
В идеале - еще чтобы можно было выставлять таймзону. Например, чтобы считал время по МСК.
<html><head>
<title>Progressbar</title>
<style type="text/css">
body {
background: repeating-linear-gradient(-45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px) fixed;
font-family: "Helvetica Neue",Arial,sans-serif;
color: #fff;
}
h1 {
color:#fff;text-shadow:0px 1px 0px #C7C8CA, 0px 2px 0px #B1B3B6, 0px 3px 0px #9D9FA2, 0px 4px 0px #8A8C8E, 0px 5px 0px #77787B, 0px 6px 0px #636466, 0px 7px 0px #4D4D4F, 0px 8px 7px #001135;
font-size: 35px;
}
</style>
<script type="text/javascript" src="http://feex.ru/progressbar/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://feex.ru/progressbar/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.fn.progress = function (options){
var defaults = {
start: new Date(),
finish: new Date().setTime(new Date().getTime()+60000),
interval: 123
}
var opts = jQuery.extend(defaults, options), t = this;
return this.each(function(){
var allMs = opts.finish - opts.start
, plus = opts.interval/allMs*100
, devInterval;
$(t)
.progressbar()
.before('<div id="progresspercent"></div>')
.after('<div id="progresstext"></div>');
devInterval = setInterval(function(){
var ms = opts.finish - new Date()
, wasMs = new Date() - opts.start
, days = parseInt(ms/86400000)
, hours = parseInt((ms - (days*86400000))/3600000)
, min = parseInt((ms - (days*86400000) - (hours*3600000))/60000)
, sec = parseInt((ms - (days*86400000) - (min*60000)- (hours*3600000))/1000)
, msec = parseInt(ms - (days*86400000) - (sec*1000) - (min*60000)- (hours*3600000))
, percent = wasMs/allMs*100;
if(percent >= 100){
percent = 100;
}
var vHours = hours > 9 ? hours : "0" + hours,
vMin = min > 9 ? min : "0" + min,
vSec = sec > 9 ? sec : "0" + sec,
vMsec = msec >= 100 ? msec : "0" + msec,
vMsec = msec > 10 ? vMsec : "0" + vMsec;
$("#progresspercent").html("<b><font color=black>"+percent.toFixed(4)+"%</font></b>");
$("#progresstext").html("<b><font color=white style='text-shadow: 2px 2px 5px #000;'>До Нового года осталось: "+days+" дн. "+vHours+":"+vMin+":"+vSec+"."+vMsec+" мс</font></b>");
$(t).children(".ui-progressbar-value").css("width", percent+"%");
if(percent >= 100){
clearInterval(devInterval);
$("#progresstext").html("<b>С новым 2017 годом!!!</b>");
}
}
,opts.interval);
});
}
$("#progressbar").progress({start: new Date(2016, 0, 1), finish: new Date(2017, 0, 1), interval: 100});
});
$('head').append('<link rel="stylesheet" type="text/css" href="http://feex.ru/progressbar/jquery-ui-1.8.14.custom.css" />');
</script>
<style type="text/css">
#progressbar .ui-progressbar-value { background-image: url(http://feex.ru/progressbar/pbar-ani.gif);display:block!important}
#progresspercent {position:relative;left:3px;top:22px;}
.ui-progressbar {height:20px!important;width:550px!important;text-align:left}
body{overflow:hidden;}
</style>
</head>
<body>
<center>
<br>
<h1>PROGRESSBAR</h1>
<div id="progressbar"></div>
</center>
</body>
</html>