Misc examples

Example 10

ex10.html: change CSS style by class.

<?xml version="1.0" encoding="UTF-8"?>
<!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>Example 10</title>
<style type="text/css">
p.first { color: green }
p.second { color: purple }
p.third { color: gray }
p.fourth {background: yellow; font-family: courier}
</style>
<script type="text/javascript">
<!--
function change() {
   sel = document.getElementById("cls");
   // sel = document.forms[0].elements[0];
   // sel = document.forms[0].cls;
   val = sel.value;
   paragraph = document.getElementById("par");
   paragraph.className = val;
}
// -->
</script>
</head>
<body>
<form action="">
<p>
<select id="cls" name="cls" onchange="change()">
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="fourth">fourth</option>
</select>
</p>
</form>
<p><br /><br /><br /><br /></p>
<p id="par" class="first" >This is a sentence.</p>
</body>
</html>

Example 11

ex11.html: preload image.

<?xml version="1.0" encoding="UTF-8"?>
<!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>Example 11</title>
<script type="text/javascript">
<!--
im1 = new Image;
im1.src = "ice.gif";

im2 = new Image;
im2.src = "post.gif";
// -->
</script>
</head>
<body>
<!-- move the mouse on the image will change the image -->
<!-- preload image -->
<p>
<img alt="[cat]" src="post.gif"
onmouseover="this.src='ice.gif'" onmouseout="this.src='post.gif'"/>
</p>
</body>
</html>

Example 12

ex12.html: disappear.

<?xml version="1.0" encoding="UTF-8"?>
<!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>Watch it Disappear!</title>

<script type="text/javascript">
<!--
   function make_it_disappear()
   {
      var image=document.getElementById("cat").style;
   
      if (image.visibility == "visible")
         image.visibility = "hidden";
      else if (image.visibility = "hidden")
         image.visibility = "visible";
   }

//-->
</script>
</head>

<body>
<h1 style="text-align: center">Watch it Disappear!</h1>
<p>
<img src="ice.gif" alt="ice" 
 id="cat" style="visibility: visible" />

</p>
<p>
<input type="button" value="Click me!" onclick="make_it_disappear();"/>
</p>
</body>
</html>

Example 13

ex13.html: current time

<?xml version="1.0" encoding="UTF-8"?>
<!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>Date</title>
</head>
<body>
<script type="text/javascript">
<!--
    var mydate=new Date();
    var year=mydate.getYear();
    if (year < 1000)
       year+=1900;
    var month=mydate.getMonth()+1;
    var day=mydate.getDate()

    document.writeln("<p>" + month + "/" + day + "/" + year + "</p>");
    var hr = mydate.getHours();
    var min = mydate.getMinutes();
    var sec = mydate.getSeconds();
    document.writeln("<p>" + hr + ":" + min + ":" + sec +"</p>");
    
//-->
</script>

</body>
</html>

Example 14

ex14.html: a game

<?xml version="1.0" encoding="UTF-8"?>
<!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>Simulation of Craps Game</title>

<script type="text/javascript">
<!--
   var WON = 0, LOST = 1, CONTINUE_ROLLING = 2;  
       // test the status of the game

   var firstRoll = true, sumOfDice = 0, myPoint = 0, 
       gameStatus = CONTINUE_ROLLING;   // game not over yet

   // process one roll of dice
   function play(craps)
   {
      sumOfDice = rollDice(craps);

      if (firstRoll) {  // if we are rolling dice for first time
         switch (sumOfDice) {
            case 7 : case 11 : // win on first roll
               gameStatus = WON;
               craps.point.value = "";   // clear point field
               break;
            case 2 : case 3 : case 12 : // lose on first roll
               gameStatus = LOST;
               craps.point.value = "";   // clear point field
               break;
            default :   // every other sum of dice
               gameStatus = CONTINUE_ROLLING;  
               myPoint = sumOfDice;
               craps.point.value = myPoint;
               firstRoll = false;         // now, we continue rolling
         }
      }
      else {
         if (sumOfDice == myPoint)  // user wins
            gameStatus = WON;
         else if (sumOfDice == 7)   // automatically lose
            gameStatus = LOST;
         // Otherwise, the status stays the same - want to keep rolling 
         // dice.
      }

      if (gameStatus == CONTINUE_ROLLING) 
         window.status = "Roll again";  // Puts message in status bar of 
                                        // window.
      else {
         if (gameStatus == WON)
            window.status = "Player wins.  Click Roll Dice to play again.";
         else
            window.status = "Player loses.  Click Roll Dice to play again.";

         // Now, we are done this game, so if we play again, we are on the
         // first roll, so:
         firstRoll = true;
      }

      return false; 
   }

   // roll the dice
   function rollDice(craps) {
      var die1, die2, workSum;

      die1 = Math.floor(1 + Math.random() * 6);
      die2 = Math.floor(1 + Math.random() * 6);
      workSum = die1 + die2;

      craps.firstDie.value = die1;
      craps.secondDie.value = die2;
      craps.sum.value = workSum;
 
      return workSum;
   }
// -->
</script>
</head>

<body>
<h1 style="text-align: center">Play Craps!</h1>

<!-- create a form to run the craps game -->

<form action="">
   <table>
   <tr><th>Die 1</th>
       <td><input type="text" name="firstDie" /></td></tr>
   <tr><th>Die 2</th>
       <td><input type="text" name="secondDie" /></td></tr>
   <tr><th>Sum</th>

       <td><input type="text" name="sum" /></td></tr>
   <tr><th>Point</th>
       <td><input type="text" name="point" /></td></tr>

   <!-- onclick determines what happens when the user clicks the button -->

   <tr><td colspan="2"><input type="button" value="Roll Dice" 
                   onclick="play(form);" />
   </td></tr>
   </table>

</form>
</body>
</html>