How to Create Javascript Clock with Different Images for Hr Min and Sec for iPhone

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • AlteredRealitii
    New Member
    • Feb 2012
    • 5
    #1

    How to Create Javascript Clock with Different Images for Hr Min and Sec for iPhone

    I'm trying to create a clock that allows me to use a completely different set of images for the hours minutes and seconds for the iPhone. This is what I currently have which works correctly in Google Chrome, but doesn't work on the iPhone. If there is a completely different, better, or more efficient way to do this, then that would be great. I'm completely new to javascript hence the reason I;m using this already built code.

    Code:
    <?xml version="1.0" encoding="UTF-16"?>

<html>
<head>


<script type="text/javascript">

/***********************************************

* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

function show()
{
var Digital=new Date();
var sec=Digital.getSeconds();
var min=Digital.getMinutes();
var hrs=Digital.getHours();
if (hrs>=12)
{hrs=hrs-12
}
if (min>=30)
hrs=hrs*2+1
else
hrs=hrs*2

var pics="<img style='position: absolute; left: 25px; top: 25px' src='s" + sec + ".gif' height='100' width='100'>"
var picm="<img style='position: absolute; left: 25px; top: 25px' src='m" + min + ".gif' height='100' width='100'>"
var pich="<img  style='position:absolute; top: 25px; left: 25px' src='h" + hrs + ".gif' height='100' width='100'>"
document.getElementById('timesec').innerHTML=(pics);
document.getElementById('timemin').innerHTML=(picm);
document.getElementById('timehour').innerHTML=(pich);

//location.reload();
}


</script>

</head>


<body onload="setInterval('show()',1000);">

<div id="timesec"></div>
<div id="timemin"></div>
<div id="timehour"></div>

</body>
</html>
    Basically I get only the minutes and the second images to show up and they are sporadic. Kinda hard to explain because everytime I respring the phone, something different happens, as in the second images not displaying past 25 seconds or so, or the time/images just freeze. Any help to get this to work would be great. Thanks


    Edit: I was able to get it to work on the iPhone using the previous code. For anyone else that wants to do this, I'll post the revised code that worked for me. I also added code to display a LockBackground image.

    To make a theme for the iPhone using this code, make a new folder in the Themes section of the phone, name it yourname.theme (yourname being whatever name you choose). Go to this link and download the attachments.
    http://www.codingforums.com/showthread.php?t=50605&highlight=clock


    Now rename the jsclock.htm.txt file to LockBackground. html, then place it in the yourname.theme folder. Next, take all the images from the folders and place them all in the yourname.theme folder (they have to be loose and not in the folders they came in). All that's left is to place your image that you want as your background image, just name it LockBackground. png and place it in the theme folder as well. That's it!

    Now you can have separate images for each individual hour, minute, and second.

    Thank you Dormilich for your responses. I was still having problems with the code you gave me (I'm sure it was just my fault), but I found this to work so I'll just stick with it.

    Here's the revised code:

    Code:
    <?xml version="1.0" encoding="UTF-16"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
<title>LCD Style Analogue Clock</title>
<style> 

#Layer{width: 320px; height: 480px; position: absolute; top: 0px; right: 0px; down: 0px; left: 0px;} 
.stretch {width:100%; height:100%;} 

</style>

<script type="text/javascript">

function show()
{
var Digital=new Date();
var sec=Digital.getSeconds();
var min=Digital.getMinutes();
var hrs=Digital.getHours();
if (hrs>=12)
{hrs=hrs-12
}
if (min>=30)
hrs=hrs*2+1
else
hrs=hrs*2

var pics="<img style='position: absolute; left: 110px; top: 350px' src='s" + sec + ".gif' height='100' width='100'>"
var picm="<img style='position: absolute; left: 110px; top: 350px' src='m" + min + ".gif' height='100' width='100'>"
var pich="<img  style='position:absolute; left: 110px; top: 350px' src='h" + hrs + ".gif' height='100' width='100'>"
document.getElementById('timesec').innerHTML=(pics);
document.getElementById('timemin').innerHTML=(picm);
document.getElementById('timehour').innerHTML=(pich);

//location.reload();
}


</script>


</head>
<div id="Layer"><img src="LockBackground.png" class="stretch"/></div> 

<body onload="setInterval('show()',1000);">

<div id="timesec"></div>
<div id="timemin"></div>
<div id="timehour"></div>
</body>
</html>
    Last edited by AlteredRealitii; Feb 25 '12, 07:25 PM. Reason: Figured out solution to problem.
    Tags: javascript clock images
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      does it have to be images? because images normally have to be loaded (i.e. text is way faster).

      if it has to be images, consider only changing the src property (there is no need to replace the whole <img> tag).

        Comment

        • AlteredRealitii
          New Member
          • Feb 2012
          • 5
          #3
          Thanks for the quick response. Yes, it has to be images for what I'm trying to do. Unless there is a way to combine javascript for an analog clock and a digital clock. Basically making the hands of the analog clock display the actual time, eg. the hour hand actually displays the hour itself, the minute hand actually displays the minutes itself. That is my main goal, I just figured it would be easier to use separate images to achieve the same effect. To better show what I'm trying to achieve, here is a link to the affect http://www.tokyoflash.com/en/watches.../on_air_black/

          Could you please show me what you mean? I just copied this code, I didn't write it so I'm not exactly sure what you mean.Thanks

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              Unless there is a way to combine javascript for an analog clock and a digital clock.
              look into the <canvas> element (2D drawing with JavaScript)

              Could you please show me what you mean?
              if you have an image element
              Code:
              <img id="clock" alt="watch out *gg*" src="min1.gif">
              Code:
              function minutes(img)
{
    img.src = "min" + (new Date).getMinutes() + ".gif";
}
var clock = document.getElementById("clock");
var itv   = window.setInterval(minutes, 60000, clock);

                Comment

                • AlteredRealitii
                  New Member
                  • Feb 2012
                  • 5
                  #5
                  I just realized that I was unclear as to what I meant. I mean that I need separate images for each min (1-60), separate images for each second (1-60) and separate images for each hour (1-12). Not just 3 separate images (one for hour, minute, and second). Will the above code let me achieve what I just wrote? If not, then what I just wrote is what I actually need. My apologies.

                    Comment

                    Previous template Next
                    Working...