Javascript Klok

Verwijderd lid 141197 · 16 jan 2010

Ik ben recent begonnen met javascript en probeer nu een mooi klokje te maken daarover heb ik 2 vragen.

Eerst mijn code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Clock</title>

<script type="text/javascript">
<!--
function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( )

  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;

  var currentTimeString = currentHours + ":" + currentMinutes;

  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div>
  <span id="clock">&nbsp;</span>
</div>
</body>
</html>

En dan de vragen:

De dat is de code van de clock die werkt goed en geeft netjes de tijd en vernieuwd.

maar ik wil hem ipv in platte text in plaatjes daarom heb ik 10 plaatjes ge maakt: Clock-1, Clock-2, enz.

Maar bij de uitvoering liep ik vast op 2 dingen

1. hoe zeg je tegen javascript pak plaatje: Clock-"Hours"
en
2. de tijd wordt gegeven in 12, 00, 01, enz. hoe scheid ik die 2 cijfers in hours1 en hours2?

Alvast bedankt:thumb:

Verwijderd lid 141197 · 16 jan 2010

Ik heb het weten te splitten met .split(" ")

maar nu wil ik dat javascript een afbeelding weergeeft:

.{weergeef afbeelding} src="Clock-"Hours_[0]".png"

mijn src code is:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript Clock</title>

<script type="text/javascript">
<!--
function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function Clock ( )
{
  var Time = new Date ( );

  var Hours = Time.getHours ( );
  var Minutes = Time.getMinutes ( );

  Hours = ( Hours < 10 ? "0" : "" ) + Hours;
  Minutes = ( Minutes < 10 ? "0" : "" ) + Minutes;
  
  var Hours_ = Hours.split("");
  var Minutes_ = Minutes.split("");
  
  var TimeString = Hours_[0] + "+" + Hours_[1] + ":" + Minutes_[0] + "+" + Minutes_[1];

  document.getElementById("clock").firstChild.nodeValue = TimeString;
}

// -->
</script>

</head>
<body onload="Clock(); setInterval('Clock()', 1000 )">
<div>
  <span id="clock">&nbsp;</span>
</div>
</body>
</html>

Verwijderd lid 141197 · 16 jan 2010

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="Standard.css" rel="stylesheet" type="text/css" media="all" />
<title>JavaScript Clock</title>
<script type="text/javascript">
<!--
function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock-container").appendChild ( timeDisplay );
}
function Clock ( )
{
  var Time = new Date ( );

  var Hours = Time.getHours ( );
  var Minutes = Time.getMinutes ( );

  Hours = ( Hours < 10 ? "0" : "" ) + Hours;
  Minutes = ( Minutes < 10 ? "0" : "" ) + Minutes;
  
  var Hours_ = Hours.split("");
  var Minutes_ = Minutes.split("");
  
  document.getElementsByName(clock-hour0).src="Clock-" + Hours_[0] + ".png";
  document.getElementsByName(clock-hour1).src="Clock-" + Hours_[1] + ".png";
  document.getElementsByName(clock-minutes0).src="Clock-" + Minutes_[0] + ".png";
  document.getElementsByName(clock-minutes1).src="Clock-" + Minutes_[1] + ".png";
}

// -->
</script>
</head>
<body>
<div id="clock-container" onload="Clock(); setInterval('Clock()', 1000 )">
	<div id="clock-hour0">
		<img name="clock-hour0" src="Clock-0.png"/>
	</div>
    <div id="clock-hour1">
		<img name="clock-hour1" src="Clock-0.png"/>
	</div>
    <div id="clock-minutes0">
		<img name="clock-minutes0" src="Clock-0.png"/>
	</div>
    <div id="clock-minutes1">
		<img name="clock-minutes1" src="Clock-0.png"/>
	</div>
</div>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */
/*Clock*/
#clock-container	{
	background-image:url(Clock-back.png);
	width:2209px;
	height:977px;
}
#clock-hour0 {
	top:100px;
	width:413px;
	height:612px;
	left: 60px;
}
#clock-hour1 {
	top:50px;
	width:413px;
	height:612px;
}
#clock-minutes0 {
	top:50px;
	width:413px;
	height:612px;
}
#clock-minutes1 {
	top:50px;
	width:413px;
	height:612px;
}

Het zou nu moeten werken maar dat doet het niet

ik krijg van alle nog steeds de standaard waarde "Clock-0.png"

Kunnen jullie me alstjeblieft helpen?

ErikBooy007 · 16 jan 2010

De waarde die je als argument aan document.getElementById geeft moet wel tussen quotes staan.

Verwijderd lid 141197 · 16 jan 2010

heb nu bij de GetElementByName's de waard de ook tussen quotes gezet maar het werkt nog steeds niet

ErikBooy007 · 16 jan 2010

Oh, dat was me nog helemaal niet opgevallen. getElementsByName moet zijn getElementById

Verwijderd lid 141197 · 16 jan 2010

werkt nog steeds niet

ErikBooy007 · 16 jan 2010

Geef je code eens, zoals die nu is.

Verwijderd lid 141197 · 16 jan 2010

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="Standard.css" rel="stylesheet" type="text/css" media="all" />
<title>JavaScript Clock</title>
<script type="text/javascript">
<!--
function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock-container").appendChild ( timeDisplay );
}
function Clock ( )
{
  var Time = new Date ( );

  var Hours = Time.getHours ( );
  var Minutes = Time.getMinutes ( );

  Hours = ( Hours < 10 ? "0" : "" ) + Hours;
  Minutes = ( Minutes < 10 ? "0" : "" ) + Minutes;
  
  var Hours_ = Hours.split("");
  var Minutes_ = Minutes.split("");
  
  document.getElementsById("clock-hour0").src="Clock-" + Hours_[0] + ".png";
  document.getElementsById("clock-hour1").src="Clock-" + Hours_[1] + ".png";
  document.getElementsById("clock-minutes0").src="Clock-" + Minutes_[0] + ".png";
  document.getElementsById("clock-minutes1").src="Clock-" + Minutes_[1] + ".png";
}

// -->
</script>
</head>
<body>
<div id="clock-container" onload="Clock(); setInterval('Clock()', 1000 )">
	<div id="clock-hour0">
		<img name="clock-hour0" src="Clock-0.png"/>
	</div>
    <div id="clock-hour1">
		<img name="clock-hour1" src="Clock-0.png"/>
	</div>
    <div id="clock-minutes0">
		<img name="clock-minutes0" src="Clock-0.png"/>
	</div>
    <div id="clock-minutes1">
		<img name="clock-minutes1" src="Clock-0.png"/>
	</div>
</div>
</body>
</html>

ErikBooy007 · 16 jan 2010

Oké, ik zit niet echt op te letten geloof ik.

Maar als je nu bij de images het name-attribuut vervangt door id ... Dan zou het moeten werken...

Verwijderd lid 141197 · 16 jan 2010

ErikBooy007 · 16 jan 2010

Oké, er zaten een aantal fouten in. De onload kun je beter op de body zetten (nog mooier is een event-handler, maar dat terzijde).

De div's om de images hoeven geen id te hebben, de images moeten die id's hebben.

In plaats van setInterval te gebruiken (op zich niks mis mee hoor), kun je ook gewoon setTimeout gebruiken in de functie. Zo werkt ie:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="Standard.css" rel="stylesheet" type="text/css" media="all" />
<title>JavaScript Clock</title>
<script type="text/javascript">
<!--
function Clock ( )
{
  var Time = new Date( );
 
  var Hours = Time.getHours( );
  var Minutes = Time.getMinutes( );
 
  Hours = ( Hours < 10 ? "0" : "" ) + Hours;
  Minutes = ( Minutes < 10 ? "0" : "" ) + Minutes;
  
  var Hours_ = Hours.split("");
  var Minutes_ = Minutes.split("");
  
  document.getElementById("clock-hour0").src = "Clock-" + Hours_[0] + ".png";
  document.getElementById("clock-hour1").src = "Clock-" + Hours_[1] + ".png";
  document.getElementById("clock-minutes0").src = "Clock-" + Minutes_[0] + ".png";
  document.getElementById("clock-minutes1").src = "Clock-" + Minutes_[1] + ".png";
  
  setTimeout(Clock, 1000);
}
 
// -->
</script>
</head>
<body onload="Clock();">
<div id="clock-container">
    <div>
        <img id="clock-hour0" src="Clock-0.png"/>
    </div>
    <div>
        <img id="clock-hour1" src="Clock-0.png"/>
    </div>
    <div>
        <img id="clock-minutes0" src="Clock-0.png"/>
    </div>
    <div>
        <img id="clock-minutes1" src="Clock-0.png"/>
    </div>
</div>
</body>
</html>

Bart O · 16 jan 2010

Als je nu de <div> een id geeft en deze steeds vult

bv zoiets:

<div id="clock"></div>

in je functie :

uren[0] = '<img src="Clock-"' + Hours_[0] + ".png">';
uren[1] = '<img src="Clock-"' + Hours_[1] + ".png">';

minuten[0] = '<img src="Clock-"' + Minutes_[0] + ".png">';
minuten[1] = '<img src="Clock-"' + Minutes_[1] + ".png">';

document.getElementById("clock").innerHTML = uren[0]+uren[1]+minuten[0]+minuten[1];

Verwijderd lid 141197 · 16 jan 2010

veel dank

Javascript Klok

Verwijderd lid 141197

Verwijderd lid 141197

Verwijderd lid 141197

ErikBooy007

Terugkerende gebruiker

Verwijderd lid 141197

ErikBooy007

Terugkerende gebruiker

Verwijderd lid 141197

ErikBooy007

Terugkerende gebruiker

Verwijderd lid 141197

ErikBooy007

Terugkerende gebruiker

Verwijderd lid 141197

ErikBooy007

Terugkerende gebruiker

Bart O

Gebruiker

Verwijderd lid 141197

Nieuwste berichten

Wij waarderen jouw privacy