Dynamic javascript wrist watch

[Total: 0    Average: 0/5]

This script uses code similar to javascript clock to dynamically load images into a Casio wrist watch interface, so it looks like the digital watch is actually working….

Head Code:

 =<script language=Javascript>
<!--
var _P="http://www.js-examples.com/data/ex_1004/";

function preloadImage(fnImg)
{
    // create array for preloadedImages if not already created:
    if (!document.preloadedImages)
        document.preloadedImages = new Array();
    // create new image:
    document.preloadedImages[fnImg] = new Image();
    document.preloadedImages[fnImg].src = _P+fnImg;
}

function imgSwitch(imgId, fnImgNew)
{
    // switch to new image:
    if (document.preloadedImages && document.preloadedImages[fnImgNew])
        document.images[imgId].src = document.preloadedImages[fnImgNew].src;
    else
        document.images[imgId].src = _P+fnImgNew;
}

function imgMouseOver(imgId, fnImgOver)
{
    // remember original image:
    document.images[imgId].originalSrc = document.images[imgId].src;
    // switch to mouseover image:
    imgSwitch(imgId, fnImgOver);
}

function imgMouseOut(imgId)
{
    // switch back to original image:
    if (document.images[imgId] && document.images[imgId].originalSrc)
        document.images[imgId].src = document[imgId].originalSrc;
}


var timerID, now;

// These values are to store currently-displayed date digits.
// They're initialized to -1 to ensure that all digits are updated in the first call to showTime:
var year10 = -1;
var year1 = -1;
var month10 = -1;
var month1 = -1;
var date10 = -1;
var date1 = -1;
var day = -1;
var hours10 = -1;
var hours1 = -1;
var minutes10 = -1;
var minutes1 = -1;
var seconds10 = -1;
var seconds1 = -1;

// updates clock display:
function showTime()
{
    // get digits in date:
    var now = new Date();
    var newYear = now.getYear();
    newYear = newYear % 100;
    var newYear10 = Math.floor(newYear / 10);
    var newYear1 = newYear - (newYear10 * 10);
    var newMonth = now.getMonth();
    newMonth++;
    var newMonth10 = Math.floor(newMonth / 10);
    var newMonth1 = newMonth - (newMonth10 * 10);
    var newDate = now.getDate();
    var newDate10 = Math.floor(newDate / 10);
    var newDate1 = newDate - (newDate10 * 10);
    var newDay = now.getDay();
    var newHours = now.getHours();
    var newHours10 = Math.floor(newHours / 10);
    var newHours1 = newHours - (newHours10 * 10);
    var newMinutes = now.getMinutes();
    var newMinutes10 = Math.floor(newMinutes / 10);
    var newMinutes1 = newMinutes - (newMinutes10 * 10);
    var newSeconds = now.getSeconds();
    var newSeconds10 = Math.floor(newSeconds / 10);
    var newSeconds1 = newSeconds - (newSeconds10 * 10);

    // only switch image if date digit has changed:
    if (newYear10 != year10)
    {
        imgSwitch("year10", "images/tinydigit" + newYear10 + ".gif");
        year10 = newYear10;
    }
    if (newYear1 != year1)
    {
        imgSwitch("year1", "images/tinydigit" + newYear1 + ".gif");
        year1 = newYear1;
    }
    if (newMonth10 != month10)
    {
        if (newMonth10 == 0)
            imgSwitch("month10", "images/tinyblank.gif");
        else
            imgSwitch("month10", "images/tinydigit" + newMonth10 + ".gif");
        month10 = newMonth10;
    }
    if (newMonth1 != month1)
    {
        imgSwitch("month1", "images/tinydigit" + newMonth1 + ".gif");
        month1 = newMonth1;
    }
    if (newDate10 != date10)
    {
        imgSwitch("date10", "images/tinydigit" + newDate10 + ".gif");
        date10 = newDate10;
    }
    if (newDate1 != date1)
    {
        imgSwitch("date1", "images/tinydigit" + newDate1 + ".gif");
        date1 = newDate1;
    }
    if (newDay != day)
    {
        imgSwitch("day", "images/day" + newDay + ".gif");
        day = newDay;
    }
    if (newHours10 != hours10)
    {
        imgSwitch("hours10", "images/digit" + newHours10 + ".gif");
        hours10 = newHours10;
    }
    if (newHours1 != hours1)
    {
        imgSwitch("hours1", "images/digit" + newHours1 + ".gif");
        hours1 = newHours1;
    }
    if (newMinutes10 != minutes10)
    {
        imgSwitch("minutes10", "images/digit" + newMinutes10 + ".gif");
        minutes10 = newMinutes10;
    }
    if (newMinutes1 != minutes1)
    {
        imgSwitch("minutes1", "images/digit" + newMinutes1 + ".gif");
        minutes1 = newMinutes1;
    }
    if (newSeconds10 != seconds10)
    {
        imgSwitch("seconds10", "images/smalldigit" + newSeconds10 + ".gif");
        seconds10 = newSeconds10;
    }
    imgSwitch("seconds1", "images/smalldigit" + newSeconds1 + ".gif");

    // update clock again in 1 second:
    timerID = setTimeout("showTime()", 1000);
}


function preloadImages()
{
    for (var i = 0; i <= 9; i++)
    {
        preloadImage("images/digit" + i + ".gif");
        preloadImage("images/smalldigit" + i + ".gif");
        preloadImage("images/tinydigit" + i + ".gif");
    }
    for (i = 0; i <= 6; i++)
        preloadImage("images/day" + i + ".gif");
}

// -->
</script>

<style>
body, p, td, th, li {font-family:Arial, Helvetica, sans-serif; font-size:13px}
</style>

Init Code:

preloadImages(); showTime();

Body Code:

<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=100 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=14 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=15 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=6 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=3 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=2 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=10 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=11 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=3 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=2 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=5 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=5 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=5 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=5 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=109 HEIGHT=1></TD>
        <TD></TD>
    </TR>
    <TR>

    <TD COLSPAN=20> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_01.gif" WIDTH=300 HEIGHT=161></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=161></TD>
    </TR>
    <TR>

    <TD COLSPAN=10> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_02.gif" WIDTH=163 HEIGHT=14></TD>

    <TD COLSPAN=4> <IMG name='year10' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_03.gif" WIDTH=11 HEIGHT=14></TD>

    <TD COLSPAN=3> <IMG name='year1' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_04.gif" WIDTH=11 HEIGHT=14></TD>

    <TD COLSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_05.gif" WIDTH=115 HEIGHT=14></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=14></TD>
    </TR>
    <TR>

    <TD COLSPAN=2 ROWSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_06.gif" WIDTH=101 HEIGHT=16></TD>

    <TD COLSPAN=4> <IMG name='day' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_07.gif" WIDTH=38 HEIGHT=13></TD>

    <TD ROWSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_08.gif" WIDTH=2 HEIGHT=16></TD>

    <TD COLSPAN=2 ROWSPAN=2> <IMG name='month10' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_09.gif" WIDTH=11 HEIGHT=14></TD>

    <TD ROWSPAN=2> <IMG name='month1' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_10.gif" WIDTH=11 HEIGHT=14></TD>

    <TD COLSPAN=3 ROWSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_11.gif" WIDTH=6 HEIGHT=16></TD>

    <TD COLSPAN=3 ROWSPAN=2> <IMG name='date10' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_12.gif" WIDTH=11 HEIGHT=14></TD>

    <TD COLSPAN=3 ROWSPAN=2> <IMG name='date1' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_13.gif" WIDTH=11 HEIGHT=14></TD>

    <TD ROWSPAN=7> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_14.gif" WIDTH=109 HEIGHT=187></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=13></TD>
    </TR>
    <TR>

    <TD COLSPAN=4 ROWSPAN=2> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_15.gif" WIDTH=38 HEIGHT=3></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    </TR>
    <TR>

    <TD COLSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_16.gif" WIDTH=22 HEIGHT=2></TD>

    <TD COLSPAN=6 ROWSPAN=2> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_17.gif" WIDTH=22 HEIGHT=3></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=2></TD>
    </TR>
    <TR>

    <TD ROWSPAN=4> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_18.gif" WIDTH=100 HEIGHT=171></TD>

    <TD COLSPAN=2 ROWSPAN=3> <IMG name='hours10' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_19.gif" WIDTH=15 HEIGHT=23></TD>

    <TD ROWSPAN=3> <IMG name='hours1' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_20.gif" WIDTH=15 HEIGHT=23></TD>

    <TD ROWSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_21.gif" WIDTH=6 HEIGHT=23></TD>

    <TD COLSPAN=3 ROWSPAN=3> <IMG name='minutes10' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_22.gif" WIDTH=15 HEIGHT=23></TD>

    <TD COLSPAN=3 ROWSPAN=3> <IMG name='minutes1' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_23.gif" WIDTH=15 HEIGHT=23></TD>

    <TD COLSPAN=2> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_24.gif" WIDTH=3 HEIGHT=1></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=1></TD>
    </TR>
    <TR>

    <TD ROWSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_25.gif" WIDTH=2 HEIGHT=170></TD>

    <TD COLSPAN=3> <IMG name='seconds10' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_26.gif" WIDTH=11 HEIGHT=17></TD>

    <TD COLSPAN=3> <IMG name='seconds1' SRC="http://www.js-examples.com/data/ex_1004/images/watch2_27.gif" WIDTH=11 HEIGHT=17></TD>

    <TD ROWSPAN=3> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_28.gif" WIDTH=1 HEIGHT=170></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=17></TD>
    </TR>
    <TR>

    <TD COLSPAN=6 ROWSPAN=2> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_29.gif" WIDTH=22 HEIGHT=153></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=5></TD>
    </TR>
    <TR>

    <TD COLSPAN=10> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/watch2_30.gif" WIDTH=66 HEIGHT=148></TD>

    <TD> <IMG SRC="http://www.js-examples.com/data/ex_1004/images/spacer.gif" WIDTH=1 HEIGHT=148></TD>
    </TR>
</TABLE>

Times Viewed: 7

Leave a Reply

Your email address will not be published. Required fields are marked *