| Feex | 21.02.2016 00:01 |
рестарт не сработал (
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>
|
До конца дня осталось
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>
|
рони,
Супер!) То что надо:) Спасибо:thanks: P.S. проверю еще рестарт в 00.00, отпишусь, как он сработал) |
рестарт не сработал ( |
Feex,
немного исправил смотрите снова |
Цитата:
завтра еще разик рестарт проверю. |
Feex,
а часы перевести никак на 23:59:00 ? :) |
Цитата:
кстати, рестарт не пошел. тоже самое. |
Feex,
сначала установить время потом запустить скрипт |
Цитата:
вот только что сделал:  |
Feex,
скопируйте скрипт по новой и проверьте |
Цитата:
 |
Feex,
значит не судьба :)  |
Цитата:
|
Feex,
надо чтоб ещё кто-то протестировал :) |
Цитата:
вообще странно конечно..)) |
рони,
вот как это выглядит у меня:  у меня просьба к Вам, проверьте еще непосредственно мой сайт: http://feex.ru/progressbar2/ |
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()
, 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*10000|0)/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+"%</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();
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();
$("#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>
|
рони,
с этим кодом тоже самое... непонятная какая-то история)) по идее script от хоста независим... т.е если моя ссылка у Вас работает нормально, то это мой комп не хочет соображать правильно.. но таких компов может быть много, т.е. не у всех, получается, будет работать скрипт.... в общем, пока плохо соображаю что не так.. |
Feex,
пока ничего не могу добавить... |
рони,
знакомый проверил у себя:  всё норм. без понятия, что у меня именно не так.... на моем компе не хочет... Вам спасибо, скрипт по сути рабочий. Это у меня что-то не то..) |
До конца дня по Москве осталось на js
Feex,
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#bar {
position: absolute;
top: 0;
left: 0;
height: 1.4em;
background: red;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 1px 1px 6px 0px #333;
box-shadow: 1px 1px 6px 0px #333;
-o-transition: 1s width ease;
-ms-transition: 1s width ease;
-moz-transition: 1s width ease;
-webkit-transition: 1s width ease;
transition: 1s width ease;
width: 0;
overflow: hidden;
margin-top: 50px;
text-align: center;
color: #FFFFFF ;
font-size: .8em;
line-height: 1.4em;
}
#bar:before {
content: '';
display: block;
position: absolute;
width: 80px;
height: 100%;
-webkit-animation: trololo 8s linear infinite;
-moz-animation: trololo 8s linear infinite;
-o-animation: trololo 8s linear infinite;
animation: trololo 8s linear infinite;
background: -o-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: -moz-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: -webkit-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
margin-left: -25px;
}
@keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
@-webkit-keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
#show{
margin:0 auto ;
text-align: center;
}</style>
<div id="bar" class="zero-width"></div>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return two(c) + " " + hours(c) + " " + two(b) + " " + minutes(b) + " " + two(a) + " " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('секунда', 'секунды', 'секунд');
function Time() {
var data = Date.parse('01/01/2016') // дата начала 1 шестидневки строго "месяц/день/год"
data = new Date(data);
data.setMinutes((-180 - data.getTimezoneOffset()), 0, 0); //для коррекции запустить в зоне акции alert((new Date).getTimezoneOffset()) и поменять число
for (; (new Date).getTime() > data; ) {
data.setDate(data.getDate()+1)//через сутки +1 , через 6 дней +6
}
var a = data.getTime() - (new Date).getTime();
var pos = ((86400000-a)/86400000*10000|0)/100;
document.getElementById('bar').style.width= pos +'%';
document.getElementById("bar").innerHTML = pos +'%'
document.getElementById("show").innerHTML = "До конца дня по Москве осталось: " + formatTime(a);
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>
|
рони,
прикольно)) но все-таки интересует именно первоначальный вариант бара... я немного изменил Ваш вариант. Но это всё не то.. В общем, ладно.. не судьба значит
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
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;
margin-top: 25px;
}
#bar {
height:22px;
//width:550px!important;
text-align:center
position: absolute;
top: 0;
left: 0;
height: 1.5em;
background-image: url(http://feex.ru/progressbar2/pbar-ani.gif);
//background: red;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 1px 1px 6px 0px #333;
box-shadow: 1px 1px 6px 0px #333;
-o-transition: 1s width ease;
-ms-transition: 1s width ease;
-moz-transition: 1s width ease;
-webkit-transition: 1s width ease;
transition: 1s width ease;
width: 0;
overflow: hidden;
margin-top: 20px;
text-align: center;
color: #000;
font-size: 1.0em;
line-height: 1.5em;
font-weight:bold;
border-radius: 3px 3px 3px 3px;
border: 1px solid grey;
}
/*
#bar:before {
content: '';
display: block;
position: absolute;
width: 10px;
height: 100%;
-webkit-animation: trololo 8s linear infinite;
-moz-animation: trololo 8s linear infinite;
-o-animation: trololo 8s linear infinite;
animation: trololo 8s linear infinite;
background: -o-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: -moz-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: -webkit-linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
background: linear-gradient(45deg, transparent 15%, white 50%, transparent 85%);
margin-left: -25px;
}
@keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
@-webkit-keyframes trololo {
from {
left: 0;
}
to {
left: 100%;
}
}
*/
#show{
margin:5 auto ;
text-align: center;
}
</style>
<center>
<h1>PROGRESSBAR 2</h1></center>
<div id="bar" class="zero-width"></div>
<div id = 'show'></div>
<script type="text/javascript">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return two(c) + " " + hours(c) + " " + two(b) + " " + minutes(b) + " " + two(a) + " " + seconds(a)
};
// функция для склонения слов ( (1)"день", (2)"дня", (5)"дней")
function plural(str1,str2,str5){
return function ( n ) {return ((((n%10)==1)&&((n%100)!=11))?(str1):(((((n%10)>=2)&&((n%10)<=4))&&(((n%100)<10)||((n%100)>=20)))?(str2):(str5)))}
}
var hours = plural('час', 'часа', 'часов'),
minutes = plural('минута', 'минуты', 'минут'),
seconds = plural('сек.', 'сек.', 'сек.');
function Time() {
var data = Date.parse('01/01/2016') // дата начала 1 шестидневки строго "месяц/день/год"
data = new Date(data);
data.setMinutes((-180 - data.getTimezoneOffset()), 0, 0); //для коррекции запустить в зоне акции alert((new Date).getTimezoneOffset()) и поменять число
for (; (new Date).getTime() > data; ) {
data.setDate(data.getDate()+1)//через сутки +1 , через 6 дней +6
}
var a = data.getTime() - (new Date).getTime();
var pos = ((86400000-a)/86400000*10000|0)/100;
document.getElementById('bar').style.width= pos +'%';
document.getElementById("bar").innerHTML = pos +'%'
document.getElementById("show").innerHTML = "<b><font color=white style='text-shadow: 2px 2px 5px #000;'>До конца дня по Москве осталось: " + formatTime(a) + "</font></b>";
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:45. |