SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Time and Date script - JavaScript - Help required

    Hello there,

    I have registered on these forums to ask you professionals for help, as I am currently making websites myself out of boredom to learn some skills. At the moment, I know HTML, XHTML and CSS quite well, with a basic knowledge of jQuery and JavaScript. I wanted however to design a little thing for my friend's radio station, "On Air Now" that would change periodically, every day and every hour. For example, if the programme was DJ CSS on Monday between 1900 and 2100, it would display the required information, and somehow check it in a loop, every day and hour of the week. How would I script such a thing? Is a MySQL database or a PHP code required to store the information somewhere? I'd really appreciate some help, and if there's no way of doing it within JavaScript, maybe snippets of code in PHP to get me started. I heard that PHP is useful to learn as well.

    Kind Regards

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by HighFlyerPL185 View Post
    Hello there,

    I have registered on these forums to ask you professionals for help, as I am currently making websites myself out of boredom to learn some skills. At the moment, I know HTML, XHTML and CSS quite well, with a basic knowledge of jQuery and JavaScript. I wanted however to design a little thing for my friend's radio station, "On Air Now" that would change periodically, every day and every hour. For example, if the programme was DJ CSS on Monday between 1900 and 2100, it would display the required information, and somehow check it in a loop, every day and hour of the week. How would I script such a thing? Is a MySQL database or a PHP code required to store the information somewhere? I'd really appreciate some help, and if there's no way of doing it within JavaScript, maybe snippets of code in PHP to get me started. I heard that PHP is useful to learn as well.
    PHP would be more useful for this, for then you can have a .php file that uses the current date/time to get info from a database.
    Then your page could make a call to that .php file every few minutes as a ajax call, to retrieve the latest info about what's on.

    The database could have a Show table and a Period table, so that if something happen on Mon Wed and Fri you could have:

    Code:
    id     | title     | presenter
    1      | "DJ CSS"  | "Mad Mike"
    2      | "Clubbing"| "Suzi"
    
    id     | showid | day   | start | stop
    1      | 1      | "Mon" | 1900  | 2100
    2      | 1      | "Wed" | 1900  | 2100
    3      | 1      | "Fri" | 1900  | 2100
    3      | 2      | "Sat" | 1900  | 2359
    So that your PHP code could then get the current show id with:

    Code sql:
    SELECT showid
    FROM Period
    WHERE DAY="Wed" AND START >= 1930 AND END <= 1930

    Or the show info itself with:

    Code sql:
    SELECT title, presenter
    FROM SHOW
        INNER JOIN (
            SELECT showid
            FROM Period
            WHERE DAY="Wed" AND START >= 1930
        ) AS currentshow
            ON SHOW.id = currentshow.id

    Where you could use date('D') and Date('HG') for the day of week and 24-hour format of the current time.

    Something like that anyway. The PHP and MySQL forums would be able to provide much more detail on such things.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. Is there any way of doing it via JavaScript? I'd hate to install MySQL on my computer, it's slow and unreliable (the desktop is in repairs).

    I was wondering whether constructing something like this would be possible. I found it on the internet while doing some researching upon the abilities.

    Code:
    function welcomeMessage()
    {
    var now = new Date();
    var hours = now.getHours();
    var msg;
    if(hours<12)
    msg = "Good Morning";
    else if(hours<18)
    msg = "Good Afternoon";
    else
    msg = "Good Evening";
    return(msg);
    }
    But something more like the on-air banner on this website http://www.bbc.co.uk/radio1/programm...les/2012/01/08 where I assume Heading 1 within HTML defines the DJ name, and for instance H2 calls for the time - time element beside On Air Now which I discovered is static. Additionally, it would be useful for the image to change too.

    I figured out a little script myself for the image but I don't know how to add days to it, or whether I've done it right. Any help would be appreciated on this entire thing.

    Code:
    <head>
    <script type="text/javascript">
    
    var thedate = new Date();
    var dayofweek = thedate.getUTCDay();
    var hourofday = thedate.getUTCHours();
    
    function DJTest()
    {
       if (dayofweek != 1 && 
          ((hourofday > 19 && hourofday < 21))) {
         return true;
       }
       return false;
    }
    </script>
    </head><body>
    
    <script type="text/javascript">
    if (DJTest()) {
      document.write("<h1>DJ HighFlyer</h1>");
    }
    </script>
    
    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by HighFlyerPL185 View Post
    Thanks for your reply. Is there any way of doing it via JavaScript?
    Yes that is possible, but typically it's a poor practice to include all of your data in the page that's being sent out to everyone.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Yes that is possible, but typically it's a poor practice to include all of your data in the page that's being sent out to everyone.
    Fair enough, I usually place it within a /scripts folder and give it 700 permissions on a server, but this will be just a local site, to pick some skills up.
    Any idea how could I solve the above? I'd appreciate some clues, many thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by HighFlyerPL185 View Post
    Any idea how could I solve the above? I'd appreciate some clues, many thanks
    Quote Originally Posted by HighFlyerPL185 View Post
    Thanks for your reply. Is there any way of doing it via JavaScript?
    Yes that is possible, but typically it's a poor practice to include all of your data in the page that's being sent out to everyone.

    I would rewrite your script to remove document.write, so that the function you call edits the appropriate title instead, and that the data is stored in a way that's easier to edit.

    HTML Code:
    <head>
    </head>
    <body>
    <h1 id="radioshow">Playing your favourite hits</h1>
    <script type="text/javascript" src="js/radioshow.js"></script>
    </body>
    </html>
    Code javascript:
     
    function getShow(shows, day, hour) {
        var i,
            j,
            show;
        for (i = 0; i < shows.length; i += 1) {
            for (j = 0; j < shows[i].length; i += 1) {
                show = shows[i][j];
                if (show.day === day && show.start >= hour && show.end <= hour) {
                    return show.name;
                }
            }
        }
    }
     
    function updateTitle(id) {
        var shows = [
                {name: 'DJ HighFlyer', periods: [
                    {day: 2, start: 19, end: 21},
                    {day: 3, start: 19, end: 21},
                    {day: 4, start: 19, end: 21},
                    {day: 5, start: 19, end: 21},
                    {day: 6, start: 19, end: 21}
                ]}
            ],
            thedate = new Date(),
            dayofweek = thedate.getUTCDay(),
            hourofday = thedate.getUTCHours(),
            title = getShow(shows, dayofweek, hourofday) || 'Playing your favourite hits'; // default title
        document.getElementById(id).innerHTML = title;
    }
     
    updateTitle('radioshow');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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