Αλλαγή CSS ανάλογος τι ώρα είναι.

**vagelis199** Τετ Αυγ 05, 2015 2:16 pm

Αυτός είναι ένας κωδικός javascript (λειτουργεί παντού) που αλλάζει ιδιότητες css ανάλογος τις ώρες

Είναι σχετικά απλός,
Στην συγκεκριμένη περίπτωση εγώ απλά αλλάζω το background ανάλογος την ώρα, εσείς μπορείτε να βάλετε ότι θέλετε.
(ΠΡΕΠΕΙ ΝΑ ΕΧΟΥΜΕ ΤΟ JQUERY ΕΝΣΟΜΑΤΟΜΕΝΟ ΣΤΟ SITE ΜΑΣ)

Πρώτα ανοίγουμε ένα script tag εκεί που ξεκινάει το body το κάνουμε αυτό διότι θέλουμε να τρέχει ο κωδικός ακριβώς πριν τρέξουν όλα τα υπόλοιπα στην οθόνη, με αυτόν το τρόπο αποφεύγουμε να εμφανιστεί το προεπιλεγμένο css τις σελίδας.

διλαδι :

Κώδικας:: <body> <script type='text/javascript'><script>

Καλο είναι να βάζουμε στην πρώτη σειρά το "//" γιατί με αυτό το τρόπο δεν θα μπερδεύει τον κωδικό με xml και δεν θα το μετατρέπει σε unicode.

Ξεκινάμε την λειτουργία και την ονομάζουμε όπως θέλουμε εγώ την ονόμασα getStylesheet.

Κώδικας:: function getStylesheet() { //o ipolios kodikos paei edw}

Τώρα καθιστάμε τα "string" μας δηλαδή τα urls που θα χρησιμοποιήσουμε.
εγώ τα ονόμασα ανάλογος την ημερα για παράδειγμα morning, evening κτλ

Κώδικας:: function getStylesheet() { var nightimg = "/night.jpg"; var mornimg = "/morning.jpg"; var dayimg = "/day.jpg"; var eveningimg = "/evening.jpg"; var night2img = "/night2.jpg"; }

Τώρα πρέπει να βρούμε τι ώρα είναι ,
καθιστάμε ένα "integer" με την ώρα του συστήματος δηλαδή
(παραδιγμα)

Κώδικας:: var tiwraeinai = nea imeromenia.pareores();

πιο σωστα

Κώδικας:: var currentTime = new Date().getHours();

συνεχίσουμε και λέμε εάν ο αριθμός από το integer που μόλις κάναμε είναι ανάμεσα στο 0 με 5 τότε κανε αυτό

Κώδικας:: if (0 <= currentTime&¤tTime < 5) {//edw ti ginete }

Μέσα σε αυτό βάζουμε την λειτουργία μας, εγώ έχω βάλει μέσο jquery να αλλάζει το css του body συγκεκριμένα το background-image με το string του nightimg.

Κώδικας:: $('body').css('background-image', 'url(' + nightimg + ')','!important');

Το ίδιο κάνω και με τις υπόλοιπες ώρες απλά αλλάζω τις ώρες και τι string θα έχει το css

Κώδικας:: if (0 <= currentTime&¤tTime < 5) { $('body').css('background-image', 'url(' + nightimg + ')','!important'); } if (5 <= currentTime&¤tTime < 11) { $('body').css('background-image', 'url(' + mornimg + ')','!important'); } if (11 <= currentTime&¤tTime < 17) { $('body').css('background-image', 'url(' + dayimg + ')','!important'); } if (17 <= currentTime&¤tTime < 21) { $('body').css('background-image', 'url(' + eveningimg + ')','!important'); } if (21 <= currentTime&¤tTime <= 24) { $('body').css('background-image', 'url(' + night2img + ')','!important'); }

Στο τέλος σιγουρευόμαστε πως τρέχουμε την λειτουργία που μόλις φτιάξαμε

Κώδικας:: } getStylesheet(); //]]>

Και είμαστε έτοιμη!

Full κοδικος

Κώδικας:: //<![CDATA[ function getStylesheet() { var nightimg = "/night.jpg"; var mornimg = "/morning.jpg"; var dayimg = "/day.jpg"; var eveningimg = "/evening.jpg"; var night2img = "/night2.jpg"; var currentTime = new Date().getHours(); if (0 <= currentTime&¤tTime < 5) { $('body').css('background-image', 'url(' + nightimg + ')','!important'); } if (5 <= currentTime&¤tTime < 11) { $('body').css('background-image', 'url(' + mornimg + ')','!important'); } if (11 <= currentTime&¤tTime < 17) { $('body').css('background-image', 'url(' + dayimg + ')','!important'); } if (17 <= currentTime&¤tTime < 21) { $('body').css('background-image', 'url(' + eveningimg + ')','!important'); } if (21 <= currentTime&¤tTime <= 24) { $('body').css('background-image', 'url(' + night2img + ')','!important'); } } getStylesheet(); //]]>