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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with Adding Function number by date

    I am working on an HTML project that displays a field with a number in the field by each day. What it does is start at 0 on day one. Each day it adds a 1 to the field. Day 2, the field would say 1, then day 3 would say 2, and so on. I am not sure how to approach this. This is also displayed in an HTML format. I want to to be automatic and change as the date changes. I will also need a way to reset it back to zero if possible.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Please tell me this isn't homework.

    It doesn't sound like homework, as I can imagine an instructor wanting to wait around for 3 or 4 days, to make sure you code is functioning, but you never can tell...

    You don't say if the "field" is a <form> field or just a <span> or <div> on the page.

    I'll assume it is just a <span> or <div>.

    Code:
    // december 7, 2010 
    // note that months are numbered starting at 0, days start at 1
    var startDate = new Date( 2010, 11, 7 );
    
    function setNumberInField( fld )
    {
        var now = new Date();
        var diff = now.getTime() - startDate.getTime();
        var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
        fld.innerHTML = days;
    }
    So you would invoke that via
    Code:
        setNumberInField( document.getElementById("xyz") );
    or similar.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Not sure how to invoke that since this does need to be displayed to a HTM format.

    LOL, not homework. I'm actually in IT and working on this project for a TV display. I'm just no programmer. Here is what I do in excel on my other TV which works perfect:

    =(TODAY()-A4)+B4

    This gives present date and subtracts from whatever date is in A4 and then adds the the number I put in b4. When I have to reset it, all I do is change the date. Maybe there is a better way?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Show the HTML you need to plunk this into.

    And all you have to do with my code to change the base date is change that line
    Code:
    var startDate = new Date( 2010, 11, 7 );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    But where to I place this? Do I have this code has an html file? It needs to run to a browser and automatically updated that field every day on it's own. Example: The only thing I want to see is the number calculated from the date.


    Like this:

    TV display could say this:

    Number of days open: 1

    Then the next day Number of days 2 etc.

    The number should be the only thing changing. There just may need to be day where I have to reset that number field. Make more sense? So I need to know how I save this code too. Thanks man.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Here, silly but fully functioning page:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // 1 November 2010, just for demo purposes:
    var startDate = new Date( 2010, 10, 1 );
    
    function setNumberInField( fld )
    {
        var now = new Date();
        var diff = now.getTime() - startDate.getTime();
        var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
        fld.innerHTML = days;
    }
    </script>
    </head>
    <body onload="setNumberInField(document.getElementById('zamboni'));">
    Looky looky looky, today is day number <span id="zamboni">HERE</span>!!!
    </br/>
    Don't blink!
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    If you want me to help you put it into YOUR html page, then you have to show me what your HTML looks like.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <head>
    <style type="text/css">
    .auto-style1 {
    font-size: 72pt;
    font-weight: bold;
    }
    </style>
    </head>

    <font color=red><center><p class="auto-style1">Safety First</p></center></font>
    <font color=navy><center><p style="font-size:500%">Days without</p></center></font>
    <font color=navy><center><p style="font-size:500%">a Lost Time Accident</p></center></font>


    Before days needs to display 1 and tomorrow should show 2

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Okay, so just change that one line to:
    Code:
    <font color=navy>
        <center>
            <p style="font-size:500%"><span id="days"></span> Days without</p>
        </center>
    </font>
    And then use the code as I showed it. You will modify your <body> tag to
    Code:
    <body onload="setNumberInField(document.getElementById('days'));">
    The <script>...</script> stuff goes right after your </style>, still in the <head> section.

    There are other ways to do this. If you already have an onload= in your <body> tag, let me know.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    perfect! Now all I need to do is have this page switch between another htm file that sites in the same directory. Is there a simple line for that?

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Sorry, I don't understand the question/problem.

    Can you explain more?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have htm page 1 and htm page 2. I need them to loop between each other every X seconds.

    This works on the one page:

    <script type="text/javascript">
    <!--
    function delayer(){
    window.location = "./test.htm"
    }
    //-->
    </script>
    <html>
    <frameset onLoad="setTimeout('delayer()', 5000)" cols="*">
    </frameset>
    </html>

    But I can't get it to work on the other for some reason to loop back
    Last edited by sentinelace; 12-07-2010 at 10:25 PM.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    AHHH...perhaps because of the onload that is setting up the "Days since..." value?

    Various ways to do this, but there's no reason you can't simply do:

    Code:
    <body onLoad="setNumberInField(document.getElementById('days'));setTimeout('delayer()', 5000);">
    Naturally, the "delayer" function in this page must point to "test2.html" instead.

    If that doesn't work, can you show the pages live? Give us a URL?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by sentinelace View Post
    I have htm page 1 and htm page 2. I need them to loop between each other every X seconds.
    A really good way to drive people away from your site.

  • #15
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This isn't on a site. It's on a TV in our plant and only runs locally. I am not sure where to place that line. This isn't working.


    <head>
    <style type="text/css">
    .auto-style1 {
    font-size: 120pt;
    font-weight: bold;
    }
    .auto-style2 {
    color: #FF0000;
    font-size: 100pt;
    }
    .auto-style3 {
    font-size: 95pt;
    }
    </style>
    </head>

    <font color=red><center><p class="auto-style1">Safety First</p></center></font>
    <html>
    <head>
    <script type="text/javascript">
    // 6 Decemeber 2010, just for demo purposes:
    var startDate = new Date( 2010, 11, 6 );

    function setNumberInField( fld )
    {
    var now = new Date();
    var diff = now.getTime() - startDate.getTime();
    var days = Math.floor( diff / ( 24 * 60 * 60 * 1000 ) );
    fld.innerHTML = days;
    }
    </script>
    </head>
    <body onload="setNumberInField(document.getElementById('zamboni'));">
    </br/>
    </body>
    </html>
    </font><center><p style="font-size:500%"><span id="zamboni" class="auto-style2">HERE</span><font color=navy>
    <span class="auto-style3">Days without</span></p></font></center>
    <font color=navy><center><p class="auto-style3">a Lost Time Accident</p></center></font>
    <body onLoad="setNumberInField(document.getElementById('days'));setTimeout('test2.htm()', 5000);">


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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