Gå til innhold

Serverside Klokke (php+js)

jtsorensen

Anbefalte innlegg

jtsorensen

jtsorensen

Skrevet
Skrevet

Hei

 

Jeg trenger en klokke på web-løsningen min som vises i formatet ( hh:mm:ss).

Jeg har funnet masse analoge klokker, javascript klokker(ikke serverside) osv... alt dette vet jeg om.

Men jeg trenger en klokke som tikker oppover ved hjelp av javascript, men med klokkeslettet hentet fra serveren.

Noen som vet om et enkelt script?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
jtsorensen

jtsorensen

Skrevet
  • Forfatter
Skrevet

Jeg går ikke inn på forumet her før jeg har kjekket hotscripts (er vant med at det er det første svaret jeg får)

 

På hotscripts er det bare analoge eller digitale klokker, noen refresher seg ikke selv... bare masse rot som jeg ikke trenger...

 

Det må jo være ett enklere script der ute?

Lenke til kommentar
NH

NH

Skrevet
Skrevet (endret)

dette eksemplet burde sende deg på rett vei.

<html>
<head>
<?php
$js_script = <<<EOF
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h={h}
var m={m}
var s={s}
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('{element}').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
 {i="0" + i}
 return i
}
</script>
EOF;

$js['h']	= date("h"); //Start time
$js['m']	= date("i"); //Start minutt
$js['s']	= date("s"); //start sekund
$js['element']	= 'myclock'; //ID navn på tag til klokka

foreach($js as $key => $val){
$js_script = str_replace('{'.$key.'}', $val, $js_script);
}

print($js_script);
?>
</head>
<body onload="startTime()">

<div id="myclock">
<!-- Her vises klokka -->
</div>
</body>
</html>

 

Dettte er en klokka basert på en teller. hvor php skriver JS'en til kildekoden og endrer innholdet i variablene med date

Endret av NH
Lenke til kommentar
jtsorensen

jtsorensen

Skrevet
  • Forfatter
Skrevet

NH: takker for innlegget, jeg har klart å lage noe lignende selv. Uansett, det er nå utfordringen kommer, vi må klare å få klokken til å tikke ?

 

Jeg har prøvd nå i 2 dager med dette, og fått få resultater. Noen som er litt mer javascript gunstige, og kunne tatt utfordringen ved å få klokken til å gå?

Lenke til kommentar
Dahl

Dahl

Skrevet
Skrevet

En enkel metode vil være å vise klokken i en tekstboks, og style denne med CSS så man ikke ser at det er en boks. Da vil det være lett å få klokka til å gå uten å måtte laste siden på nytt hvert sekund.

 

Dette er imidlertid ingen god løsning, da tekstbokser egentlig kun skal bli brukt til å være nettopp tekstbokser.

Lenke til kommentar
jtsorensen

jtsorensen

Skrevet
  • Forfatter
Skrevet (endret)

Oki, jeg trenger litt tenkehjelp.

 

Om vi lager ett script som henter inn php-server-tiden og legger den til i ett javascript.

Dette javascriptet består av noen få funksjoner:

initKlokke -> for å legge til time, min, sek fra php

tikk -> for å telle klokken opp ett sekund og endre minutter og timer.

 

Det som er så frustrerende er at jeg tror det er ganske enkelt å få til, men jeg kan for lite javascript, så jeg bare knoter alt til.

Noen her som vet hvordan man kan lage en rekursiv tikk funksjon ?

Endret av jtsorensen
Lenke til kommentar
NH

NH

Skrevet
Skrevet (endret)

har laget en for deg her:

Var jo dette som var meningen i forrige post, men brukte feil JS. HAHA.

 

<html>
<head>
<?php jsClock('myClock'); ?>
</head>
<body onload="startTime()">

<div id="myClock">
<!-- Her vises klokka -->
</div>
</body>
</html>

<?php
function jsClock($element){
$js_script = <<<EOF
<script type="text/javascript">
var h = "null";
var m = "null";
var s = "null";

function startTime()
{

var hf="{h}"
var mf={m}
var sf={s}

if(h == "null" || m == "null" || s == "null"){
h = hf;
m = mf;
s = sf;	
} else {
if(s != 59){
 s = checkTime(++s);
} else {
 s = 00;
 m = checkTime(++m);
 
 if(m == 59){
 	m = 00;
 	h = checkTime(++h);
 	
 	if(h == 23){
   h = "00";
 	}
 }
}
}

// add a zero in front of numbers<10
document.getElementById('{element}').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',1000)
}

function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
EOF;

$js['h'] = date("H"); //Start time
$js['m'] = date("i"); //Start minutt
$js['s'] = date("s"); //start sekund
$js['element'] = $element; //ID navn på tag til klokka

foreach($js as $key => $val){
$js_script = str_replace('{'.$key.'}', $val, $js_script);
}

print($js_script);
}

?>

 

eventuelt kan du bruke GD til dette. Som da ikke er en teller men som henter ny date() fra php hvert sekund.

for dette trenger du to scripts.

 

clockimage.php

<?php
header("Content-type: image/png");
$width = 50;
$height = 20;

$img = imagecreate($width, $height);
$string = date("H:i:s");

$tekstColor = imagecolorallocate($img, 0, 0, 0);
$backgroundColor = imagecolorallocatealpha($img, 0,0,0, 127);

imagefill($img, 0,0, $backgroundColor);
imagestring($img, 2, 0,0, $string, $tekstColor);


imagepng($img);
imagedestroy($img);

?>

 

javascriptet

<script language="javascript" type="text/javascript">
teller = 1
function clock(){
clockElement = document.getElementById('clockimage');
clockElement.src = "clockimage.php?" +teller;
clockElement.alt = ++teller;
t = setTimeout('clock()', 1000);
}

</script>

 

så er det bare å lage en <img> tag med riktig id( i forrhold til getElementById() ) der du ønsker telleren

Endret av NH
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...