Αλλαγή CSS ανάλογος τι ώρα είναι.
Σελίδα 1 από 1 • Μοιραστείτε
Αλλαγή CSS ανάλογος τι ώρα είναι.
Αυτός είναι ένας κωδικός javascript (λειτουργεί παντού) που αλλάζει ιδιότητες css ανάλογος τις ώρες
Είναι σχετικά απλός,
Στην συγκεκριμένη περίπτωση εγώ απλά αλλάζω το background ανάλογος την ώρα, εσείς μπορείτε να βάλετε ότι θέλετε.
(ΠΡΕΠΕΙ ΝΑ ΕΧΟΥΜΕ ΤΟ JQUERY ΕΝΣΟΜΑΤΟΜΕΝΟ ΣΤΟ SITE ΜΑΣ)
Πρώτα ανοίγουμε ένα script tag εκεί που ξεκινάει το body το κάνουμε αυτό διότι θέλουμε να τρέχει ο κωδικός ακριβώς πριν τρέξουν όλα τα υπόλοιπα στην οθόνη, με αυτόν το τρόπο αποφεύγουμε να εμφανιστεί το προεπιλεγμένο css τις σελίδας.
διλαδι :
Καλο είναι να βάζουμε στην πρώτη σειρά το "//" γιατί με αυτό το τρόπο δεν θα μπερδεύει τον κωδικό με xml και δεν θα το μετατρέπει σε unicode.
Ξεκινάμε την λειτουργία και την ονομάζουμε όπως θέλουμε εγώ την ονόμασα getStylesheet.
Τώρα καθιστάμε τα "string" μας δηλαδή τα urls που θα χρησιμοποιήσουμε.
εγώ τα ονόμασα ανάλογος την ημερα για παράδειγμα morning, evening κτλ
Τώρα πρέπει να βρούμε τι ώρα είναι ,
καθιστάμε ένα "integer" με την ώρα του συστήματος δηλαδή
(παραδιγμα)
πιο σωστα
συνεχίσουμε και λέμε εάν ο αριθμός από το integer που μόλις κάναμε είναι ανάμεσα στο 0 με 5 τότε κανε αυτό
Μέσα σε αυτό βάζουμε την λειτουργία μας, εγώ έχω βάλει μέσο jquery να αλλάζει το css του body συγκεκριμένα το background-image με το string του nightimg.
Το ίδιο κάνω και με τις υπόλοιπες ώρες απλά αλλάζω τις ώρες και τι string θα έχει το css
Στο τέλος σιγουρευόμαστε πως τρέχουμε την λειτουργία που μόλις φτιάξαμε
Και είμαστε έτοιμη!
Full κοδικος
Είναι σχετικά απλός,
Στην συγκεκριμένη περίπτωση εγώ απλά αλλάζω το 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();
//]]>
Τα link's για το κατέβασμα είναι κρυφά πρέπει να είστε χρήστης του forum για να τα δείτε (κάντε δωρεάν εγγραφη "http://forum.gtagreece.com/register").
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
|
|