Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15

Thread: Time Problem?

  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Time Problem?

    I wanted to make script that will work fine with pictures. For example if its 21:21 there are pictures of those numbers instead of normal mechanic numbers.
    I tested this code:
    Code:
    <script type="text/javascript">
    function Time() {
    var Date1=new Date()
    var Hours1=Datum.getHours()
    var Minutes1=Datum.getMinutes()
    if (Hours1==21 & Minutes1==12)
    document.write("<img src='http://img839.imageshack.us/img839/2383/47819853.png'" + "<img src='http://img714.imageshack.us/img714/9003/asdadajy.png'" + "<img src='http://img210.imageshack.us/img210/2020/34813695.png'")
    }
    </script>
    And have this:
    Code:
    <button type="button" onClick="vreme()">Click</button>
    That work fine for time 21:12 but if i want to work for all pictures i will ahve to write different code like:
    if ...
    elseif...
    elseif...
    And plenty of those codes which is totaly wrong. What should I do?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    here you go. I couldn't figure out the order of those images, so I grabbed some others - the nums array should be easy enough to edit.

    Code:
    <html>
    <head>
    </head>
    <body onload="getTheDate()">
    <div id="time"></div>
    <script type="text/javascript">
    var nums=["http://www.cityu.edu.hk/webimage/number/arial_0.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_1.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_2.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_3.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_4.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_5.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_6.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_7.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_8.gif",
    		"http://www.cityu.edu.hk/webimage/number/arial_9.gif"];
    
    function rePlace(str){
    for (var i=0; i<10; i++) { //sets up a loop from 0 to 9
    re=new RegExp(i, 'g') //first part of replace - replace all instances of the number from the loop
    str=str.replace(re, "<img src='" +nums[i]+ "' />"); //second part of replace - replaces numbers with image from nums array
    }
    return str; //sends converted string back to first function
    }
    
    function getTheDate(){
    var mydate = new Date();
    time=rePlace(mydate.toTimeString().substr(0,5)) //sends the first 5 characters of the time string to the rePlace function
    document.getElementById("time").innerHTML=time; // takes converted string and displays it in the "time" div
    }
    </script>
    
    </body>
    </html>
    Last edited by xelawho; 01-06-2012 at 11:47 PM. Reason: added comments

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok this is perfect. Can you now explain me please very detailed how it works, if its not problem for you. I really want to understand this.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    I edited my post to add comments in the code

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    An alternative solution...

    Code:
    <html>
    <head>
    </head>
    <body onload="getTheDate()">
    <div id="time"></div>
    
    <script type="text/javascript">
    // Modified from: http://www.codingforums.com/showthread.php?t=248111
    
    var baseURL = "http://www.cityu.edu.hk/webimage/number/";
    var nums=[
      "arial_0.gif","arial_1.gif","arial_2.gif","arial_3.gif","arial_4.gif",
      "arial_5.gif","arial_6.gif","arial_7.gif","arial_8.gif","arial_9.gif"
    ];
    
    function rePlace(tstr){
      var str = '';  var tmp = '';
      for (var i=0; i<tstr.length; i++) {
        tmp = tstr.charAt(i);
        if ('0123456789'.indexOf(tmp) != -1) {
          str += '<img src="'+baseURL+nums[tmp]+'" />';
        } else { str += '<span style="font-size:2em">'+tmp+'</span>'; }
      }
      return str; //sends converted string back to first function
    }
    
    function getTheDate(){
      var mydate = new Date();
      var time = ''+mydate.getHours()+':'+mydate.getMinutes();
    // could add seconds if needed (mydate.getSeconds())
          time = rePlace(time);
      document.getElementById("time").innerHTML=time;
    // takes converted string and displays it in the "time" div
    }
    </script>
    
    </body>
    </html>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Small improvement to put a zero in front of single minutes:-

    Code:
    function getTheDate(){
    var mydate = new Date();
    var time = mydate.getHours()+':';
    var mins = mydate.getMinutes();
    if (mins <10) {mins = "0" + mins}
    time += mins;

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a problem. When i want to upload my images It doesent work...

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    do you have the image pathnames right? is there a message in the error console, or (better) can you give us a link to the page in question?

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    </head>
    <body onload="getTheDate()">
    <div id="time"></div>
    <script type="text/javascript">
    var nums=["http://www.dodaj.rs/f/16/J2/36xwg7Sz/0.png",
          "http://www.dodaj.rs/f/1d/FG/2zB0N8u5/1.png",
          "http://www.dodaj.rs/f/c/3h/nTnRZFO/3.png",
          "http://www.dodaj.rs/f/c/3h/nTnRZFO/3.png",
          "http://www.dodaj.rs/f/e/Kc/4ldu51MV/4.png",
          "http://www.dodaj.rs/f/3r/jr/3yvu4gNO/5.png",
          "http://www.dodaj.rs/f/y/gA/4D7Wt9xr/6.png",
          "http://www.dodaj.rs/f/3T/aG/2NTfeTGS/7.png",
          "http://www.dodaj.rs/f/2L/yy/4FEyW7Q7/8.png",
          "http://www.dodaj.rs/f/W/wR/2AdjK2G0/9.png"];
    
    function rePlace(str){
    for (var i=0; i<10; i++) { //sets up a loop from 0 to 9
    re=new RegExp(i, 'g') //first part of replace - replace all instances of the number from the loop
    str=str.replace(re,"<img src='" +nums[i]+ "' />"); //second part of replace - replaces numbers with image from nums array
    }
    return str; //sends converted string back to first function
    }
    
    function getTheDate(){
    var mydate = new Date();
    time=rePlace(mydate.toTimeString().substr(0,5)) //sends the first 5 characters of the time string to the rePlace function
    document.getElementById("time").innerHTML=time; // takes converted string and displays it in the "time" div
    }
    </script>
    
    </body>
    </html>
    Problem?

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    looks like the replace is replacing some of the numbers in your image files, too, which breaks the image

    If you use jmarker's code in post #5 you shouldn't have that problem.

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok now it lloks like:
    Code:
    <html>
    <head>
    </head>
    <body onload="getTheDate()">
    <div id="time"></div>
    
    <script type="text/javascript">
    var baseURL = "http://www.dodaj.rs/";
    var nums=[
      "f/16/J2/36xwg7Sz/0.png","f/1d/FG/2zB0N8u5/1.png","f/1C/7g/1SGo1CuC/2.png","f/c/3h/nTnRZFO/3.png","f/e/Kc/4ldu51MV/4.png",
      "f/3r/jr/3yvu4gNO/5.png","f/y/gA/4D7Wt9xr/6.png","f/3T/aG/2NTfeTGS/7.png","f/2L/yy/4FEyW7Q7/8.png","f/W/wR/2AdjK2G0/9.png"
    ];
    
    function rePlace(tstr){
      var str = '';  var tmp = '';
      for (var i=0; i<tstr.length; i++) {
        tmp = tstr.charAt(i);
        if ('0123456789'.indexOf(tmp) != -1) {
          str += '<img src="'+baseURL+nums[tmp]+'" />';
        } else { str += '<span style="font-size:2em">'+tmp+'</span>'; }
      }
      return str;
    }
    
    function getTheDate(){
      var mydate = new Date();
      var time = ''+mydate.getHours()+':'+mydate.getMinutes();
          time = rePlace(time);
      document.getElementById("time").innerHTML=time;
    }
    </script>
    
    </body>
    </html>
    Last thing. Where to change this ":" and turn in into picture?

  • #12
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    See changes in RED below:
    Quote Originally Posted by Mr.Joker View Post
    Ok now it lloks like:
    Code:
    ...
    <script type="text/javascript">
    var baseURL = "http://www.dodaj.rs/";
    var nums=[
      "f/16/J2/36xwg7Sz/0.png","f/1d/FG/2zB0N8u5/1.png","f/1C/7g/1SGo1CuC/2.png","f/c/3h/nTnRZFO/3.png","f/e/Kc/4ldu51MV/4.png",
      "f/3r/jr/3yvu4gNO/5.png","f/y/gA/4D7Wt9xr/6.png","f/3T/aG/2NTfeTGS/7.png","f/2L/yy/4FEyW7Q7/8.png","f/W/wR/2AdjK2G0/9.png",
    "path/colonImage.png"
    ];
    
    function rePlace(tstr){
      var str = '';  var tmp = '';
      for (var i=0; i<tstr.length; i++) {
        tmp = tstr.charAt(i);
        if ('0123456789:'.indexOf(tmp) != -1) {
          str += '<img src="'+baseURL+nums[tmp]+'" />';
        } // else { str += '<span style="font-size:2em">'+tmp+'</span>'; }
      }
      return str;
    }
    ...
    Last thing. Where to change this ":" and turn in into picture?
    One question: Why are your number images scattered in so many different directories?

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jmrker View Post
    See changes in RED below:


    One question: Why are your number images scattered in so many different directories?
    And with such obfuscated names? Are you trying to stop people stealing your incredibly valuable images? If so, forget it.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    New Coder
    Join Date
    Jan 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Um I uploaded pictures on dodaj.rs (image hosting). Its not my hosting so everything be in one folder

    And i Still dont get it how to change two dotts with this:
    Code:
    http://www.dodaj.rs/f/2E/d0/2mJrqwjw/1/dvotacka.png
    Last edited by Mr.Joker; 01-08-2012 at 10:50 AM.

  • #15
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,075
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by Mr.Joker View Post
    Um I uploaded pictures on dodaj.rs (image hosting). Its not my hosting so everything be in one folder

    And i Still dont get it how to change two dotts with this:
    Code:
    http://www.dodaj.rs/f/2E/d0/2mJrqwjw/1/dvotacka.png
    Did you make ALL the changes of post #12?
    Are you getting any errors in the error console?
    Show (post) what you did rather than complain that it doesn't work!


  •  

    Posting Permissions

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