1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

Réaliser un calendrier JavaScript avec un effet de transparence

abdelouafiJan 7, 2017

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      291
      Likes Received:
      9
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      Exercice 1:
      En utilisant le langage Javascript, css et HTML développez un calendrier avec un effet de transparence. Le calendrier va être fait en tableau array en JavaScript
      calendrier.png

      Exercice 2:
      Ecrire un code Javascript qui permet de changer l'opacité d'un div(alpha)
      opacity.png
       
      Loading...
      Exercice 1:
      Le code source du fichier calendrier.js:
      HTML:
      function setStyle(id,style,value)
      {
          id.style[style] = value;
      }
      function opacite(el,opacity)
      {
          setStyle(el,"filter:","alpha(opacity="+opacity+")");
          setStyle(el,"-moz-opacity",opacity/100);
          setStyle(el,"-khtml-opacity",opacity/100);
          setStyle(el,"opacity",opacity/100);
      }
      function calendrier()
      {
          var date = new Date();
          var jour = date.getDate();
          var moi = date.getMonth();
          var annee = date.getYear();
          if(annee<=200)
          {
              annee += 1900;
          }
          mois = new Array('Janvier', 'F&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;cembre');
          jours_dans_moi = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
          if(annee%4 == 0 && annee!=1900)
          {
              jours_dans_moi[1]=29;
          }
          total = jours_dans_moi[moi];
          var date_aujourdui = jour+' '+mois[moi]+' '+annee;
          dep_j = date;
          dep_j.setDate(1);
          if(dep_j.getDate()==2)
          {
              dep_j=setDate(0);
          }
          dep_j = dep_j.getDay();
          document.write('<table class="cal_calendrier" onload="opacite(document.getElementById(\'cal_body\'),20);"><tbody id="cal_body"><tr><th colspan="7">'+date_aujourdui+'</th></tr>');
          document.write('<tr class="cal_j_semaines"><th>Dim</th><th>Lun</th><th>Mar</th><th>Mer</th><th>Jeu</th><th>Ven</th><th>Sam</th></tr><tr>');
          sem = 0;
          for(i=1;i<=dep_j;i++)
          {
              document.write('<td class="cal_jours_av_ap">'+(jours_dans_moi[moi-1]-dep_j+i)+'</td>');
              sem++;
          }
          for(i=1;i<=total;i++)
          {
              if(sem==0)
              {
                  document.write('<tr>');
              }
              if(jour==i)
              {
                  document.write('<td class="cal_aujourdhui">'+i+'</td>');
              }
              else
              {
                  document.write('<td>'+i+'</td>');
              }
              sem++;
              if(sem==7)
              {
                  document.write('</tr>');
                  sem=0;
              }
          }
          for(i=1;sem!=0;i++)
          {
              document.write('<td class="cal_jours_av_ap">'+i+'</td>');
              sem++;
              if(sem==7)
              {
                  document.write('</tr>');
                  sem=0;
              }
          }
          document.write('</tbody></table>');
          opacite(document.getElementById('cal_body'),70);
          return true;
      }
      Le code source du fichier calendrier.css :
      Code:
      .cal_calendrier
      {
          border:1px solid black;
          padding:1px;
          background-color:#4594ff;
          width:250px;
          margin:auto;
          height:200px;
          background-image:url('http://www.supportduweb.com/ftp/ybouane/scripts_astuces/javascript/calendrier/fond-250-200.gif');
      }
      .cal_calendrier th
      {
          border:1px solid black;
          background-color:#ffffff;
      }
      .cal_calendrier td
      {
          border:1px solid black;
          background-color:#ffffff;
          text-align:center;
      }
      .cal_aujourdhui
      {
          color:#ff0000;
      }
      .cal_jours_av_ap
      {
          color:#5a779e;
      }
      Le code source du fichier HTML:
      HTML:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Calendrier javascript</title>
          <link rel="stylesheet" media="screen, print, handheld" type="text/css" href="calendrier.css" />
          <script type="text/javascript" src="calendrier.js"></script>
          </head>
          <body>
          <script type="text/javascript">
              calendrier();
          </script>
          </body>
      </html>


      Exercice 2:

      Le code source de la page HTML:
      HTML:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>Changer l'opacit&eacute; d'un &eacute;l&eacute;ment en javascript</title>
              <link rel="stylesheet" media="all" title="Style de la page" href="changer_opacite_div.css" />
              <script type="text/javascript" src="changer_opacite_div.js"></script>
          </head>
          <body>
              <div class="bloc" id="bloc1">
                  <img src="image.jpg" alt="Image" /><br />
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />
                  <span class="pct">100%</span>
              </div>
              <script type="text/javascript">
              //<!--
                  set_opacity('bloc1',100);
              //-->
              </script>
              <div class="bloc" id="bloc2">
                  <img src="image.jpg" alt="Image" /><br />
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />
                  <span class="pct">75%</span>
              </div>
              <script type="text/javascript">
              //<!--
                  set_opacity('bloc2',75);
              //-->
              </script>
              <div class="bloc" id="bloc3">
                  <img src="image.jpg" alt="Image" /><br />
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />
                  <span class="pct">50%</span>
              </div>
              <script type="text/javascript">
              //<!--
                  set_opacity('bloc3',50);
              //-->
              </script>
              <div class="bloc" id="bloc4">
                  <img src="image.jpg" alt="Image" /><br />
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />
                  <span class="pct">25%</span>
              </div>
              <script type="text/javascript">
              //<!--
                  set_opacity('bloc4',25);
              //-->
              </script>
              <div class="bloc" id="bloc5">
                  <img src="image.jpg" alt="Image" /><br />
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />
                  <span class="pct">0%</span>
              </div>
              <script type="text/javascript">
              //<!--
                  set_opacity('bloc5',0);
              //-->
              </script>
          </body>
      </html>
      Le code source du fichier CSS:
      HTML:
      body
      {
              background:url('arriere_plan.gif');
      }
      .bloc
      {
              text-align:center;
              width:190px;
              border:1px solid black;
              background-color:#E0E0E0;
              float:left;
              margin:10px;
              padding:5px;
      }
      .pct
      {
              font-size:28px;
      }
      LE code source du code Javascript:
      HTML:
      function set_opacity(id, opacity)
      {
              el = document.getElementById(id);
              el.style["filter"] = "alpha(opacity="+opacity+")";
              el.style["-moz-opacity"] = opacity/100;
              el.style["-khtml-opacity"] = opacity/100;
              el.style["opacity"] = opacity/100;
              return true;
      }

Share This Page

Share