Knapp og teller

Pugger · 7. juli 2009

Hei!

Jeg ønsker å ha en knapp på siden min som starter en teller(5 min nedtelling), så skal den komme med en beskjed. Når telleren er startet skal tid som gjenstår vises likt for alle som kommer inn på siden min. Jeg har forsøkt å få det til selv med php og javascript. Sånn som jeg har skjønt det så må da countto variabelen oppdateres med klokkeslett nå + fem minuter for at det skal være likt hos alle?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#cd {
margin: auto;
height: 50px;
width: 450px;
font-family: "Courier New", Courier, mono;
font-size: 24pt;
color: #000;
text-align: center;
font-weight: bold;
background-image: url(back.jpg);
vertical-align: middle;
}
-->
</style>
</head>

<body>
<input name="knapp" type="button" value="test">
<script type="text/javascript">

var d=new Date();
var day=d.getDate();
var month=d.getMonth() + 1;
var year=d.getFullYear();
var hours=d.getHours();
var minutes=d.getMinutes+5();
var seconds=d.getSeconds();


var f=document.write(year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds);
</script>
</div>

<script language="JavaScript" SRC="countdown.php?timezone=Europe/Oslo&countto=2009-07-12 04:22:00&do=t&data=wohoo"></SCRIPT>
<p> </p>
</body>
</html>

<?php
// we will be sending Javascript codes, remember...
header('Content-Type: text/javascript'); 

// select the timezone for your countdown
$timezone = trim($_GET['timezone']);
putenv("TZ=$timezone");

// Counting down to New Year's on 2020
$countdown_to = trim($_GET['countto']); // 24-Hour Format: YYYY-MM-DD HH:MM:SS"

// Getting the current time
$count_from = date("Y-m-d H:i:s"); // current time -- NO NEED TO CHANGE

// Date difference function. Will be using below
function datediff($interval, $datefrom, $dateto, $using_timestamps = false) {
 /*
$interval can be:
yyyy - Number of full years
q - Number of full quarters
m - Number of full months
y - Difference between day numbers
  (eg 1st Jan 2004 is "1", the first day. 2nd Feb 2003 is "33". The datediff is "-32".)
d - Number of full days
w - Number of full weekdays
ww - Number of full weeks
h - Number of full hours
n - Number of full minutes
s - Number of full seconds (default)
 */

 if (!$using_timestamps) {
$datefrom = strtotime($datefrom, 0);
$dateto = strtotime($dateto, 0);
 }
 $difference = $dateto - $datefrom; // Difference in seconds

 switch($interval) {

case 'yyyy': // Number of full years

  $years_difference = floor($difference / 31536000);
  if (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom), date("j", $datefrom), date("Y", $datefrom)+$years_difference) > $dateto) {
	$years_difference--;
  }
  if (mktime(date("H", $dateto), date("i", $dateto), date("s", $dateto), date("n", $dateto), date("j", $dateto), date("Y", $dateto)-($years_difference+1)) > $datefrom) {
	$years_difference++;
  }
  $datediff = $years_difference;
  break;

case "q": // Number of full quarters

  $quarters_difference = floor($difference / 8035200);
  while (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom)+($quarters_difference*3), date("j", $dateto), date("Y", $datefrom)) < $dateto) {
	$months_difference++;
  }
  $quarters_difference--;
  $datediff = $quarters_difference;
  break;

case "m": // Number of full months

  $months_difference = floor($difference / 2678400);
  while (mktime(date("H", $datefrom), date("i", $datefrom), date("s", $datefrom), date("n", $datefrom)+($months_difference), date("j", $dateto), date("Y", $datefrom)) < $dateto) {
	$months_difference++;
  }
  $months_difference--;
  $datediff = $months_difference;
  break;

case 'y': // Difference between day numbers

  $datediff = date("z", $dateto) - date("z", $datefrom);
  break;

case "d": // Number of full days

  $datediff = floor($difference / 86400);
  break;

case "w": // Number of full weekdays

  $days_difference = floor($difference / 86400);
  $weeks_difference = floor($days_difference / 7); // Complete weeks
  $first_day = date("w", $datefrom);
  $days_remainder = floor($days_difference % 7);
  $odd_days = $first_day + $days_remainder; // Do we have a Saturday or Sunday in the remainder?
  if ($odd_days > 7) { // Sunday
	$days_remainder--;
  }
  if ($odd_days > 6) { // Saturday
	$days_remainder--;
  }
  $datediff = ($weeks_difference * 5) + $days_remainder;
  break;

case "ww": // Number of full weeks

  $datediff = floor($difference / 604800);
  break;

case "h": // Number of full hours

  $datediff = floor($difference / 3600);
  break;

case "n": // Number of full minutes

  $datediff = floor($difference / 60);
  break;

default: // Number of full seconds (default)

  $datediff = $difference;
  break;
 }	

 return $datediff;
}

// getting Date difference in SECONDS
$diff = datediff("s", $count_from, $countdown_to);
?>

// Here’s where the Javascript starts
countdown = <?=$diff?>;

// Converting date difference from seconds to actual time
function convert_to_time(secs)
{
secs = parseInt(secs);	
hh = secs / 3600;	
hh = parseInt(hh);	
mmt = secs - (hh * 3600);	
mm = mmt / 60;	
mm = parseInt(mm);	
ss = mmt - (mm * 60);	

if (hh > 23)	
{	
   dd = hh / 24;	
   dd = parseInt(dd);	
   hh = hh - (dd * 24);	
} else { dd = 0; }	

if (ss < 10) { ss = "0"+ss; }	
if (mm < 10) { mm = "0"+mm; }	
if (hh < 10) { hh = "0"+hh; }	
if (dd == 0) { return (hh+":"+mm+":"+ss); }	
else {	
	if (dd > 1) { return (dd+" days "+hh+":"+mm+":"+ss); }
	else { return (dd+" day "+hh+":"+mm+":"+ss); }
}	
}

// Our function that will do the actual countdown
function do_cd()
{
if (countdown < 0)	
{ 	
	<?php
		if(strtolower(trim($_GET['do'])) == 'r' )
		{
	?>
	// redirect web page
	document.location.href = "<?=$_GET['data']?>";
	<?php } ?>

	<?php
		if(strtolower(trim($_GET['do'])) == 't' )
		{
	?>
	// change text
	document.getElementById('cd').innerHTML = "<?=$_GET['data']?>";
	<?php } ?>

}	
else	
{	
	document.getElementById('cd').innerHTML = convert_to_time(countdown);
	setTimeout('do_cd()', 1000);
}	
countdown = countdown - 1;	
}

document.write("<div id='cd'></div>\n");

do_cd();

<? exit(); ?>

brgr · 8. juli 2009

Om jeg forstår deg riktig nå så skal det vises akkuratt samme som gjenstår for ALLE som ser på siden?

Du vil da bli nødt til å enten hardkode slutttiden slik att den er lik for alle

eller ha dette på en slik måte (les. database/tekstfil) hvor det står lagret tid det skal regnes ifra, så vil du måtte hente "Dato/Tid Nå" fra serverens klokke. Dette kan du gjøre med enkel php kode.

Javascriptet er muligens enklest om du bare tar å kjører en løkke på dette som vil oppdatere seg hver tsekund (setTimeout / setInterval funksjon) Gjøre en beregning på hvor lenge det er igjen hver gang den blir utført (evnt. trekke fra ett sekund).

Ettersom du har tid fra klient (Javascript er klient). Så kan tiden på en klient variere noe. Da er det bedre å ha ei bestemt klokke å gå utifra å ikke x antall klient klokker med sekunder/minutter avvik som viser forskjellige tider for hver bruker.

Håper svaret mitt gav deg en pekepinn.

Pugger · 8. juli 2009

Om jeg forstår deg riktig nå så skal det vises akkuratt samme som gjenstår for ALLE som ser på siden?

Du vil da bli nødt til å enten hardkode slutttiden slik att den er lik for alle

eller ha dette på en slik måte (les. database/tekstfil) hvor det står lagret tid det skal regnes ifra, så vil du måtte hente "Dato/Tid Nå" fra serverens klokke. Dette kan du gjøre med enkel php kode.

Javascriptet er muligens enklest om du bare tar å kjører en løkke på dette som vil oppdatere seg hver tsekund (setTimeout / setInterval funksjon) Gjøre en beregning på hvor lenge det er igjen hver gang den blir utført (evnt. trekke fra ett sekund).

Ettersom du har tid fra klient (Javascript er klient). Så kan tiden på en klient variere noe. Da er det bedre å ha ei bestemt klokke å gå utifra å ikke x antall klient klokker med sekunder/minutter avvik som viser forskjellige tider for hver bruker.

Håper svaret mitt gav deg en pekepinn.

Takk for svar. Ja tiden som gjenstår skal være lik for alle. Jeg er ikke flink nok til å kode dette selv, er derfor jeg spør

Epower · 11. juli 2009

Slang sammen noe kode

<?php

if(isset($_GET['set'])) {
$time = time() + 300;
file_put_contents('time.txt', $time);
echo $time;
exit;
}

$time = file_get_contents('time.txt');
if($time < time()) $time = null;

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#cd {
margin: auto;
height: 50px;
width: 450px;
font-family: "Courier New", Courier, mono;
font-size: 24pt;
color: #000;
text-align: center;
font-weight: bold;
background-image: url(back.jpg);
vertical-align: middle;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

var endTime = <?php echo (int)$time; ?>;

<?php if($time != '') echo '$(document).ready(update);'; ?>

function setTime() {
$.get("<?php echo basename(__FILE__); ?>", { set: "1" }, function(data){
	endTime = data;
	update();
});
}

function update() {
d = new Date();
time = Math.round(endTime-(d.getTime()/1000));
$("#cd").html(Math.floor(time/60) + ' minutter ' + time % 60 + ' sekunder');
if(time > 0) setTimeout(update, 1000);
}

</script>
</head>
<body>
<input type="button" value="test" onclick="setTime()" /><br />
<div id="cd"></div>
</body>
</html>

Du må også laste ned denne fila og lagre den i samme mappe med navet jquery.js

http://code.google.com/p/jqueryjs/download...jquery-1.3.2.js

Endret 12. juli 2009 av Epower

Logg inn

Knapp og teller

Anbefalte innlegg

Pugger

Lenke til kommentar

Videoannonse

brgr

Lenke til kommentar

Pugger

Lenke til kommentar

Epower

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer