Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Progressbar с таймером. (https://javascript.ru/forum/dom-window/61496-progressbar-s-tajjmerom.html)

Feex 20.02.2016 20:42
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
До конца дня осталось
 
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>

Feex 20.02.2016 22:54
рони,
Супер!) То что надо:)
Спасибо:thanks:

P.S. проверю еще рестарт в 00.00, отпишусь, как он сработал)

Feex 21.02.2016 00:01

рестарт не сработал (

рони 21.02.2016 01:06
Feex,
немного исправил смотрите снова

Feex 21.02.2016 01:15
Цитата:
Сообщение от рони (Сообщение 408621)
Feex,
немного исправил смотрите снова
Спасибо)
завтра еще разик рестарт проверю.

рони 21.02.2016 01:16
Feex,
а часы перевести никак на 23:59:00 ? :)

Feex 21.02.2016 03:42
Цитата:
Сообщение от рони (Сообщение 408624)
Feex,
а часы перевести никак на 23:59:00 ? :)
можно и так)
кстати, рестарт не пошел. тоже самое.

рони 21.02.2016 08:19
Feex,
сначала установить время потом запустить скрипт

Feex 21.02.2016 11:16
Цитата:
Сообщение от рони (Сообщение 408638)
Feex,
сначала установить время потом запустить скрипт
я так и делаю)
вот только что сделал:


Часовой пояс GMT +3, время: 06:10.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице