[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: как сделать чтобы работали часы
Форум PHP программистов > PHP для начинающих
d4a1
4.08.2011 - 18:10
Добрый день. Вывожу время :
<p class="time">
                                                
                                                    <span class="day">{$detail[$team['id']]['left_day']}</span> д., 
                                                
                                                <span class="hours">{$detail[$team['id']]['left_hour']}</span>:
                                                <span class="minutes">{$detail[$team['id']]['left_minute']}</span>:
                                                <span class="secundes">{$detail[$team['id']]['left_time']}</span>

                                            </p>


Работают когда страницу обновляю.А как сделать чтобы просто работали?



Спустя 7 минут, 38 секунд (4.08.2011 - 17:18) kent666 написал(а):
)))
А ты как хотел. Тебе надо JS!!! Но часы будут тогда только дублировать время которое показывает часы компа, или AJAX - тогда будет показывать время твоего сервера

Спустя 33 минуты, 33 секунды (4.08.2011 - 17:52) Invis1ble написал(а):
d4a1
Цитата
А как сделать чтобы просто работали?

"Просто" это как?
Если без обновления - то кури в сторону JS.

Спустя 30 минут, 47 секунд (4.08.2011 - 18:22) killer8080 написал(а):
d4a1
В Js через setTimeout() или setInterval() вызывай функцию которая будет обновлять время.
тут справочник по объекту Date.

Спустя 9 минут, 6 секунд (4.08.2011 - 18:31) d4a1 написал(а):
JS подключил.
В этом коде работает. Но здесь условие , если дней больше 0, то секунды не показывает.
												<!--{if $team['close_time']}-->
                    <div class="deal-box deal-timeleft deal-off" id="deal-timeleft{$tindex}" curtime="{$now}000" diff="{$detail[$team['id']]['diff_time']}000">
						
						<div class="limitdate"><p class="deal-buy-ended">${date('Y-m-d', $team['close_time'])}<br>${date('H:i:s', $team['close_time'])}</p></div>
					</div>
					<!--{else}-->
                    <div class="deal-box deal-timeleft deal-on" id="deal-timeleft{$tindex}" curtime="{$now}000" diff="{$detail[$team['id']]['diff_time']}000">
						<h3>ВРЕМЯ</h3>
						<div class="limitdate"><ul id="counter{$tindex}">
						<!--{if $detail[$team['id']]['left_day']>0}-->
							<li><span>{$detail[$team['id']]['left_day']}</span>Дней</li><li><span>{$detail[$team['id']]['left_hour']}</span>Часов</li><li><span>{$detail[$team['id']]['left_minute']}</span>Минут</li>
						<!--{else}-->
							<li><span>{$detail[$team['id']]['left_hour']}</span>Часов</li><li><span>{$detail[$team['id']]['left_minute']}</span>Минут</li><li><span>{$detail[$team['id']]['left_time']}</span>Секунд</li>
						<!--{/if}-->
						</ul></div>
					</div>
					<!--{/if}-->




Нехватает знаний. <_<
Как его прикрутить к этому, но чтоб выводило и дни и секунды. Без <ul> - в строку.
                                        <td class="time-container1">
                                            <p class="time-h">ВРЕМЯ:</p>
                                            <p class="time">
					   
                                                    <span class="day">{$detail[$team['id']]['left_day']}</span> д., 
                                                
                                                <span class="hours">{$detail[$team['id']]['left_hour']}</span>:
                                                <span class="minutes">{$detail[$team['id']]['left_minute']}</span>:
                                                <span class="secundes">{$detail[$team['id']]['left_time']}</span>

                                            </p>
                                        </td>

Спустя 5 минут, 49 секунд (4.08.2011 - 18:37) Invis1ble написал(а):
Это где здесь интересно JS ?

Спустя 1 минута, 35 секунд (4.08.2011 - 18:39) d4a1 написал(а):
в этом куске JS нет, но он подключен. Всё работает в первом куске кода

Спустя 15 минут, 10 секунд (4.08.2011 - 18:54) killer8080 написал(а):
<td class="time-container1">
 <p class="time-h">ВРЕМЯ:</p>
 <p class="time">
					   
<span id="day" class="day"></span> д., 
                                                
<span id="hours" class="hours"></span>:
<span id="minutes" class="minutes"></span>:
<span id="seconds" class="secundes"></span>

</p>
</td>
<script type="text/javascript">
<!--
setInterval(
	function(){
		var date = new Date();
		document.getElementById("day").innerHTML = date.getDate();
		document.getElementById("hours").innerHTML = date.getHours();
		document.getElementById("minutes").innerHTML = date.getMinutes();
		document.getElementById("seconds").innerHTML = date.getSeconds();
	},
	1000
);

//-->
</script>

Спустя 3 минуты, 15 секунд (4.08.2011 - 18:57) d4a1 написал(а):
killer8080
Большое спасибо. smile.gif

Спустя 48 секунд (4.08.2011 - 18:58) killer8080 написал(а):
d4a1
да не за что smile.gif

Спустя 4 минуты, 12 секунд (4.08.2011 - 19:02) d4a1 написал(а):
Это совсем не то, что надо blink.gif извините
Это текущее время компа.

А надо второй скрипт , чтоб работал как первый, но показывал и дни и секунды

Спустя 4 минуты, 36 секунд (4.08.2011 - 19:07) killer8080 написал(а):
Цитата (d4a1 @ 4.08.2011 - 19:02)
А надо второй скрипт , чтоб работал как первый, но показывал и дни и секунды

А вот второй вариант категорически не советую! Представь какой шторм запросов будет идти на сервер от всех юзеров, открывших страницу. Перенапрягать сервак, ради чего?

Спустя 9 минут, 25 секунд (4.08.2011 - 19:16) d4a1 написал(а):
У меня других вариантов нет. Пусть будет как есть.
Вот этот скрипт всё ОК показывает если страницу обновлять. Если знаете, подскажите как лучше это сделать ?


 <td class="time-container1">
                                            <p class="time-h">ВРЕМЯ:</p>
                                            <p class="time">
					   
                                                    <span class="day">{$detail[$team['id']]['left_day']}</span> д., 
                                                
                                                <span class="hours">{$detail[$team['id']]['left_hour']}</span>:
                                                <span class="minutes">{$detail[$team['id']]['left_minute']}</span>:
                                                <span class="secundes">{$detail[$team['id']]['left_time']}</span>

                                            </p>
                                        </td>

Спустя 5 минут, 25 секунд (4.08.2011 - 19:22) killer8080 написал(а):
d4a1
А что за время он там показывает? Похоже что там не время сервера, а данные полученные из БД?

Спустя 2 минуты, 32 секунды (4.08.2011 - 19:24) d4a1 написал(а):
да из бд. и в обратном отсчёте

Спустя 11 минут, 5 секунд (4.08.2011 - 19:35) killer8080 написал(а):
тогда нужен совсем другой подход. Например так
1 от сервера получаем время окончания периода,
2 вычитаем из текущего времени, получаем сколько времни осталось до завершения.
3 вычисляем оставшиеся дни, часы, минуты и секунды

Спустя 17 минут, 22 секунды (4.08.2011 - 19:53) d4a1 написал(а):
да. но всё уже высчитано.
в первом скрипте всё работает.
а надо, чтоб работало во втором.

Спустя 26 минут, 40 секунд (4.08.2011 - 20:19) killer8080 написал(а):
Цитата (d4a1 @ 4.08.2011 - 19:53)
да. но всё уже высчитано.

придётся пересчитывать 
<td class="time-container1">
 <p class="time-h">ВРЕМЯ:</p>
 <p class="time">
					   
<span id="day" class="day"></span> д., 
                                                
<span id="hours" class="hours"></span>:
<span id="minutes" class="minutes"></span>:
<span id="seconds" class="secundes"></span>

</p>
</td>
<?php
$x_time = $detail[$team['id']]['left_day'] * 86400 + 
                $detail[$team['id']]['left_hour'] * 3600 + 
                $detail[$team['id']]['left_minute'] * 60 +
                $detail[$team['id']]['left_time'] + time();
?>
<script type="text/javascript">
<!--
var countDownClock = setInterval(
	function(){
		var xTime = <?php echo $x_time; ?>,
		diff = xTime - parseInt(new Date().getTime() / 1000),
		hours, minutes, seconds;
		if(diff > 0){
			day = Math.floor(diff / 86400);
			hours = Math.floor(diff / 3600) % 24;
			minutes = Math.floor(diff / 60) % 60;
			seconds = diff % 60;
		}
		else{
			hours = minutes = seconds = 0;
			clearInterval(countDownClock);	
		}
		
		document.getElementById("day").innerHTML = day;
		document.getElementById("hours").innerHTML = hours;
		document.getElementById("minutes").innerHTML = minutes;
		document.getElementById("seconds").innerHTML = seconds;
	},
	1000
);

//-->
</script>

Спустя 25 минут, 24 секунды (4.08.2011 - 20:45) d4a1 написал(а):
killer8080
Благодарю. Работает.
Можно сделать , чтобы обновлять одни секунды, а то дёргает.

Спустя 5 минут, 42 секунды (4.08.2011 - 20:50) killer8080 написал(а):
Цитата (d4a1 @ 4.08.2011 - 20:45)
Можно сделать , чтобы обновлять одни секунды, а то дёргает.

У меня норм. Какой браузер и конфигурация железа (проц, память)?

Спустя 2 минуты, 57 секунд (4.08.2011 - 20:53) d4a1 написал(а):
firefox
с железом ок. оперативка 4.

Спустя 10 минут, 25 секунд (4.08.2011 - 21:04) killer8080 написал(а):
странно :blink:
у меня без тормозов и в ФФ3 и в опере, ну можно конечно наворотить, но не уверен что это нужно
<td class="time-container1">
 <p class="time-h">ВРЕМЯ:</p>
 <p class="time">
					   
<span id="day" class="day"></span> д., 
                                                
<span id="hours" class="hours"></span>:
<span id="minutes" class="minutes"></span>:
<span id="seconds" class="secundes"></span>

</p>
</td>
<?php
$x_time = $detail[$team['id']]['left_day'] * 86400 + 
          $detail[$team['id']]['left_hour'] * 3600 + 
		  $detail[$team['id']]['left_minute'] * 60 +
		  $detail[$team['id']]['left_time'] + time();

?>
<script type="text/javascript">
<!--
var countDownClock = setInterval(
	function(){
		var xTime = <?php echo $x_time; ?>,
		diff = xTime - parseInt(new Date().getTime() / 1000),
		hours, minutes, seconds;
		if(diff > 0){
			day = Math.floor(diff / 86400);
			hours = Math.floor(diff / 3600) % 24;
			minutes = Math.floor(diff / 60) % 60;
			seconds = diff % 60;
		}
		else{
			hours = minutes = seconds = 0;
			clearInterval(countDownClock);	
		}
		
		if(document.getElementById("day").innerHTML != day.toString())
			document.getElementById("day").innerHTML = day;
		
		if(document.getElementById("hours").innerHTML != hours.toString())
			document.getElementById("hours").innerHTML = hours;
		
		if(document.getElementById("minutes").innerHTML != minutes.toString())
			document.getElementById("minutes").innerHTML = minutes;
		
		if(document.getElementById("seconds").innerHTML != seconds.toString())
			document.getElementById("seconds").innerHTML = seconds;
	},
	1000
);

//-->
</script>

Спустя 5 минут, 21 секунда (4.08.2011 - 21:09) d4a1 написал(а):
killer8080
Благодарю ещё раз.
Дальше думаю разберусь. biggrin.gif

Спустя 26 минут, 15 секунд (4.08.2011 - 21:35) killer8080 написал(а):
d4a1
не за что, учи JS smile.gif

Спустя 2 часа, 44 минуты, 26 секунд (5.08.2011 - 00:20) YVSIK написал(а):
вот подобное;; время берется с самого ПК ползователя
с начало вроде читал потом надоело и вспомнил где я это видел; приведу
только полный код и он не мой ; если надо подскажу источник
думаю видно что это чистый ява скрипт ))
может на что сгодится !))
B)
Свернутый текст
<!--Запускаем часы-->
<BODY onload=runclock()>
<!--Устанавливаем позицию часов-->
<SPAN id=liveclock style="LEFT: 5px; POSITION: absolute; TOP: 5px"></SPAN>

<!--Программа часов-->
<script language=JavaScript>
<!--
function runclock(){
if (!document.layers&&!document.all)
return
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="AM" 
if (hours>24){
dn="PM"
hours=hours-24
}
if (hours==0)
hours=24
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
myclock="<font size='2' color='darkgreen' face='Verdana, Tahoma'><b>Текущее время:  "+hours+":"+minutes+":"+seconds+" "+dn+"</b></font>"
if (document.layers){
document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}
else if (document.all)
liveclock.innerHTML=myclock
setTimeout("runclock()",1000)
}
//-->
</SCRIPT>

в источнике есть даже часы со стрелками :ph34r:

Спустя 9 часов, 12 минут, 41 секунда (5.08.2011 - 09:32) killer8080 написал(а):
d4a1
извиняй ошибочка вышла :) Тот код не правильный. Нельзя привязываться к текущему времени, т.к. у клиента и сервера часы могут идти по разному. Нужно просто вести обратный отсчёт. Вот исправил
Свернутый текст
<td class="time-container1">
 <p class="time-h">ВРЕМЯ:</p>
 <p class="time">
					   
<span id="day" class="day"></span> д., 
                                                
<span id="hours" class="hours"></span>:
<span id="minutes" class="minutes"></span>:
<span id="seconds" class="secundes"></span>

</p>
</td>
<?php
$x_time = $detail[$team['id']]['left_day'] * 86400 + 
          $detail[$team['id']]['left_hour'] * 3600 + 
		  $detail[$team['id']]['left_minute'] * 60 +
		  $detail[$team['id']]['left_time'];

?>
<script type="text/javascript">
<!--
var remainTime = <?php echo $x_time; ?>;
var countDownClock = setInterval(
	function(){
		var day, hours, minutes, seconds;
		if(remainTime > 0){
			day = Math.floor(remainTime / 86400);
			hours = Math.floor(remainTime / 3600) % 24;
			minutes = Math.floor(remainTime / 60) % 60;
			seconds = remainTime % 60;
			remainTime--;
		}
		else{
			day = hours = minutes = seconds = 0;
			clearInterval(countDownClock);	
		}
		
		hours = hours < 10 ? '0' + hours : hours;
		minutes = minutes < 10 ? '0' + minutes : minutes;
		seconds = seconds < 10 ? '0' + seconds : seconds;
		
		if(document.getElementById("day").innerHTML != day.toString())
			document.getElementById("day").innerHTML = day;
		
		if(document.getElementById("hours").innerHTML != hours.toString())
			document.getElementById("hours").innerHTML = hours;
		
		if(document.getElementById("minutes").innerHTML != minutes.toString())
			document.getElementById("minutes").innerHTML = minutes;
		
		if(document.getElementById("seconds").innerHTML != seconds.toString())
			document.getElementById("seconds").innerHTML = seconds;
	},
	1000
);

//-->
</script>

PS кстати подправил чтоб время всегда отображалось двухзначными числами ;)
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.