Показать сообщение отдельно
  #1 (permalink)  
Старый 20.02.2016, 20:42
Аспирант
Отправить личное сообщение для Feex Посмотреть профиль Найти все сообщения от Feex
 
Регистрация: 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>
Ответить с цитированием