EXTRAS 01

Coller ce code dans un élémént HTML
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
                                                                  <style type="text/css">
                                                                    #days{
                                                                      font-family: 'Raleway', sans-serif;
                                                                      font-size: 20px;
                                                                      display: table;
                                                                      width:100%;
                                                                      padding-left: 10px;
                                                                      padding-right: 10px;
                                                                    }
                                                                    .day__row{
                                                                      display: table-row;
                                                                    }
                                                                    .day__label{
                                                                      font-weight: normal;
                                                                      text-align: left;
                                                                      vertical-align: top;
                                                                      display:table-cell;
                                                                      padding-top: 10px;
                                                                      padding-bottom: 20px;
                                                                      border-bottom: solid 1px;
                                                                    }
                                                                    .hours__slots{
                                                                      text-align: right;
                                                                      vertical-align: top;
                                                                      display:table-cell;
                                                                      padding-top: 10px;
                                                                      padding-bottom: 20px;
                                                                      border-bottom: solid 1px;
                                                                    }
                                                                    .open-style {
                                                                      font-weight: bold;
                                                                      color:#3f9118;
                                                                    }
                                                                  
                                                                  </style>
                                                                  
                                                                  </head>
                                                                  
                                                                  <div id="days" > 
                                                                    <div id="day_monday" class="day__row"> 
                                                                      <div class="day__label">Lundi : </div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div  id="day_tuesday" class="day__row"> 
                                                                      <div class="day__label">Mardi : </div>
                                                                      <div class="hours__slots"> </div> 
                                                                      </div> 
                                                                    <div  id="day_wednesday" class="day__row"> 
                                                                      <div class="day__label" >Mercredi : </div>
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div id="day_thursday" class="day__row"> 
                                                                      <div class="day__label" >Jeudi :</div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div id="day_friday" class="day__row"> 
                                                                      <div class="day__label" >Vendredi : </div> 
                                                                      <div class="hours__slots"> </div>
                                                                    </div> 
                                                                    <div id="day_saturday" class="day__row">
                                                                      <div class="day__label" >Samedi : </div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                    <div id="day_sunday" class="day__row"> 
                                                                      <div class="day__label" >Dimanche : </div> 
                                                                      <div class="hours__slots"> </div> 
                                                                    </div> 
                                                                  </div>
                                                                  
                                                                  <script>
                                                                  
                                                                    const closedText = "Fermé";
                                                                
                                                                    const openTimes = 
                                                                    [
                                                                      { day: "monday", openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "tuesday",openTimes: []},
                                                                      { day: "wednesday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "thursday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:23, minutes: 0}}]},
                                                                      { day: "friday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "saturday",  openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                      { day: "sunday",   openTimes: [{start: {hours:9, minutes: 0}, stop: {hours:15, minutes: 0}},{start: {hours:18, minutes: 0}, stop: {hours:22, minutes: 0}}]},
                                                                    ];
                                                                  
                                                                    //  jour fériés et jours fermé 
                                                                
                                                                    /* 
                                                                
                                                                    commentaires
                                                                    */
                                                                    const closeDates = ["2023/07/31"];
                                                                  
                                                                  
                                                                    const date = new Date();
                                                                  
                                                                    $(document).ready(function() {
                                                                      const dayOfWeek = getDayOfWeek(date);
                                                                  
                                                                      openTimes.forEach(day => {
                                                                        let html = '';
                                                                        let open = false;      
                                                                  
                                                                        if(dayOfWeek == day.day && isClosedDate(date)){
                                                                          html = closedText;
                                                                        }
                                                                        else if(day.openTimes.length > 0) {  
                                                                          for (let i = 0; i < day.openTimes.length; i++) {
                                                                            const time = day.openTimes[i];
                                                                            if(dayOfWeek == day.day){
                                                                              var startTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.start.hours, time.start.minutes, 0 );
                                                                              var stopTime= new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.stop.hours, time.stop.minutes, 0 );
                                                                              if(date >= startTime && date<stopTime){
                                                                                open = true;
                                                                              }
                                                                            }
                                                                            html+= (open ?'<div class="open-style">': '<div>') + getTime(time)+ '</div>';
                                                                          }
                                                                        }
                                                                        else{
                                                                          html = closedText;
                                                                        }
                                                                        
                                                                        if(open){
                                                                          $("#day_"+day.day+ " .day__label").addClass("open-style");
                                                                        } else {
                                                                          $("#day_"+day.day+ " .day__label").removeClass("open-style");
                                                                        }
                                                                        $("#day_"+day.day+ " .hours__slots").html(html);
                                                                      });    
                                                                    });
                                                                  
                                                                    function getTime(val) {
                                                                      return format(val.start.hours)+ ':'+ format(val.start.minutes) + ' - ' + format(val.stop.hours)+':'+ format(val.stop.minutes);
                                                                    }
                                                                  
                                                                    function format(val) {
                                                                      if(val<10){
                                                                        return '0'+val;
                                                                      }
                                                                      return ''+val;
                                                                    }
                                                                  
                                                                    function isClosedDate(date){
                                                                      for (let i = 0; i < closeDates.length; i++) {
                                                                        const closedDate = new Date(closeDates[i]);
                                                                  
                                                                        if(closedDate.getFullYear() == date.getFullYear()
                                                                          && closedDate.getMonth() == date.getMonth()
                                                                          && closedDate.getDate() == date.getDate()){
                                                                          return true;
                                                                        }
                                                                      }
                                                                      return false;
                                                                    }
                                                                  
                                                                    function getDayOfWeek(date) {
                                                                      const day = date.getDay();
                                                                      switch (day){
                                                                        case 1: return "monday";
                                                                        case 2: return "tuesday";
                                                                        case 3: return "wednesday";
                                                                        case 4: return "thursday";
                                                                        case 5: return "friday";
                                                                        case 6: return "saturday";
                                                                        case 0: return "sunday";
                                                                      }
                                                                    }
                                                                  </script>
TITRE 1	TITRE 2	TITRE 3	TITRE 4	TITRE 5
Contenu	Contenu	Contenu	Contenu	Contenu
Contenu	Contenu	Contenu	Contenu	Contenu
Contenu	Contenu	Contenu	Contenu	Contenu
Contenu	Contenu	Contenu	Contenu	Contenu
TITRE 1
TITRE 2
TITRE 3
TITRE 4
TITRE 5
Contenu
CODES Html, Css, JS

Tutoriel vidéo

Plugins Variés Page 01

01 - Heures d'ouverture

02 - Horloge

03 - Slider vertical textes

04- Effets vagues

05 - Bouton liquide

06 - Tabulation

Soutenez mon travail.
