20.02.2016, 20:42
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 84
|
|
|
Progressbar с таймером.
Всем доброго времени суток.
Есть таймер с прогрессбаром, считает сколько осталось до заданной в скрипте даты (до нового года, например).
Возможно ли сделать так, чтобы таймер считал сколько осталось до конца дня, т.е. до 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>
|
|
20.02.2016, 21:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
До конца дня осталось
Feex,
<html><head>
<title>Progressbar</title><meta charset="utf-8">
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.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 = (86400000-ms)/86400000*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(2)+"%</font></b>");
$("#progresstext").html("<b><font color=white style='text-shadow: 2px 2px 5px #000;'>До конца дня осталось: "+vHours+":"+vMin+":"+vSec+"</font></b>");
$(t).children(".ui-progressbar-value").css("width", percent+"%");
if(percent >= 100){
time = new Date();
time.setMinutes(time.getMinutes()+m,0,0);
opts.start = time;
opts.finish = (new Date()).setHours(24, m, 0, 0);
}
}
,opts.interval);
});
}
var m = -180 - (new Date()).getTimezoneOffset(); // alert((new Date()).getTimezoneOffset()); алерт запустить в московской зоне -- сейчас -180
var time = new Date();
time.setMinutes(time.getMinutes()+m,0,0)
$("#progressbar").progress({start: time, finish: (new Date()).setHours(24, m, 0, 0), interval: 100});
});
</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>
Последний раз редактировалось рони, 21.02.2016 в 01:12.
|
|
20.02.2016, 22:54
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 84
|
|
рони,
Супер!) То что надо 
Спасибо 
P.S. проверю еще рестарт в 00.00, отпишусь, как он сработал)
|
|
21.02.2016, 00:01
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 84
|
|
рестарт не сработал ( |
|
21.02.2016, 01:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Feex,
немного исправил смотрите снова
|
|
21.02.2016, 01:15
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 84
|
|
Сообщение от рони
|
Feex,
немного исправил смотрите снова
|
Спасибо)
завтра еще разик рестарт проверю. |
|
21.02.2016, 01:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Feex,
а часы перевести никак на 23:59:00 ?
|
|
21.02.2016, 03:42
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 84
|
|
|
Сообщение от рони
|
Feex,
а часы перевести никак на 23:59:00 ?
|
можно и так)
кстати, рестарт не пошел. тоже самое. |
|
21.02.2016, 08:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Feex,
сначала установить время потом запустить скрипт
|
|
21.02.2016, 11:16
|
|
Аспирант
|
|
Регистрация: 30.12.2015
Сообщений: 84
|
|
|
Сообщение от рони
|
Feex,
сначала установить время потом запустить скрипт
|
я так и делаю)
вот только что сделал:
 |
|
|
|
