Results 1 to 1 of 1

Thread: Image Clock (JavaScript)

  1. #1
    Senior Member ghaza's Avatar
    Join Date
    Oct 2013
    Location
    Multan, Pakistan
    Posts
    354

    Image Clock (JavaScript)

    This is a compact JavaScript image clock that's updated live every second. It comes with a default image pack for the interface, though you can easily specify you own "digits" images instead inside the script.
    Image Clock (JavaScript)-clock-demo.jpg
    Step 1: Insert the below into the <HEAD> section of your page:

    HTML Code:
    <script type="text/javascript">
    
    
    
    var imageclock=new Object()
        //Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
        imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"]
        imageclock.instances=0
        var preloadimages=[]
        for (var i=0; i<imageclock.digits.length; i++){ //preload images
            preloadimages[i]=new Image()
            preloadimages[i].src=imageclock.digits[i]
        }
    
        imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
            var sections=timestring.split(":")
            if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
                sections[0]="12"
            else if (sections[0]>=13)
                sections[0]=sections[0]-12+""
            for (var i=0; i<sections.length; i++){
                if (sections[i].length==1)
                    sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
                else
                    sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
            }
            return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
        }
    
        imageclock.display=function(){
            var clockinstance=this
            this.spanid="clockspan"+(imageclock.instances++)
            document.write('<span id="'+this.spanid+'"></span>')
            this.update()
            setInterval(function(){clockinstance.update()}, 1000)
        }
    
        imageclock.display.prototype.update=function(){
            var dateobj=new Date()
            var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
            var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
            document.getElementById(this.spanid).innerHTML=currenttimeHTML
    
        }
    
    
    </script>
    Step 2: Then, to display the clock, call this function where you wish the clock to be shown:

    HTML Code:
    <script type="text/javascript">
    
    new imageclock.display()
    
    </script>
    Step 3: But wait, don't forget the images! Download the image pack below and upload the images inside to the same directory as your webpage:

    • clockimages.zip

    You can modify the path to the images by configuring it near the top of the script of Step 1.

    Demo is available in the attachment...
    Attached Files Attached Files

Similar Threads

  1. Question about copyrights image on web
    By folleyhal in forum Random Talk
    Replies: 0
    Last Post: 02-03-2014, 11:05 AM
  2. Alarm clock
    By ghaza in forum Javascript and js libraries
    Replies: 0
    Last Post: 11-10-2013, 04:41 PM
  3. Replies: 0
    Last Post: 10-29-2013, 09:57 PM
  4. Javascript that display a random image
    By M.A.A in forum Javascript and js libraries
    Replies: 0
    Last Post: 10-03-2013, 04:23 PM
  5. Replies: 0
    Last Post: 08-20-2011, 10:03 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •