recherche

Maison  >  Article  >  interface Web  >  jQuery super cool effet d'horloge plate code Sharing_jquery

jQuery super cool effet d'horloge plate code Sharing_jquery

WBOY
WBOYoriginal
2016-05-16 15:43:091035parcourir

L'exemple de cet article décrit le code de l'effet d'horloge plate super cool de jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
L'effet d'horloge plate super cool produit par jQuery affiche la date et l'heure via la barre d'échelle horizontale. Après test, l'effet est très cool et c'est un très bon exemple d'apprentissage.
Ici, nous aimerions également mentionner un autre style d'affichage de l'heure particulièrement nouveau que nous avons implémenté auparavant : JS implémente le style d'heure du thermomètre , qui rompent tous deux complètement avec le concept d'horloge traditionnel. ça ne manque pas.

Opération de rendu : ----------------------Voir l'effet Télécharger le code source--- --- -------------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'effet d'horloge plate super cool jQuery partagé avec vous est le suivant 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,时钟,日期,刻度条,jQuery" />
<meta name="description" content="jQuery制作的超酷平面式时钟效果，更多时钟,日期,刻度条,jQuery请访问脚本之家JS代码频道。" />
<title>jQuery制作的超酷平面式时钟效果_脚本之家</title>

<style type="text/css">

body { background:#bae1ea url(back.jpg) 50% 0px no-repeat; color:#000; }

/* container for clock */
#wrap { position:relative; margin: 100px auto 0; width:700px; height:440px; background:url("slider clock(trans).png") no-repeat top left; border-style:solid; border-width:1px; overflow:hidden; }

/* style background and size of all sliding divs */
#wrap div { position:absolute; margin-left:-700px; width:1400px; height:40px; background:url("slider clock(trans).png") repeat-x; } 

/* specific position and background position for sliding divs */
#wrap #day { top:40px; background-position:0 -440px; }

#wrap #month { top:120px; background-position:0 -480px; }

#wrap #date { top:200px; background-position:0 -520px; }

#wrap #hour { top:280px; background-position:0 -560px; }

#wrap #min { top:320px; background-position:0 -600px; }

#wrap #sec { top:400px; background-position:0 -640px; }

#title { margin:20px auto; width:550px; text-align:center; }

#other { margin:10px auto; width:550px; text-align:center; }

</style>



<script type="text/javascript" src="jquery.js"> </script>

<script>

 $(document).ready(function(){

  function checktime(olddel){

   var now = new Date();

    var nowdel = now.getDay() + "|" + now.getMonth() + "|" + now.getDate() + "|" + now.getHours() + "|" + now.getMinutes() + "|" + now.getSeconds();

    if ( olddel != nowdel ) {

     var oldsplit = olddel.split("|");
     var nowsplit = nowdel.split("|");

     if ( oldsplit[5] != nowsplit[5] ) {

      clock_slide('#sec',nowsplit[5],11);
      if ( oldsplit[4] != nowsplit[4] ) {

       clock_slide('#min',nowsplit[4],11);
       if ( oldsplit[3] != nowsplit[3] ) {

        clock_slide('#hour',nowsplit[3],28);
        if ( oldsplit[2] != nowsplit[2] ) {

         clock_slide('#day',nowsplit[0],100);
         clock_slide('#date',(nowsplit[2]-1),22);

         if ( oldsplit[1] != nowsplit[1] ) {
          clock_slide('#month',nowsplit[1],57);

         };
        };
       };
      };
     };
    };

    function clock_slide(which,howmuch,multiple){
     $(which).stop().animate({marginLeft: ((howmuch*multiple)-700)+'px'}, 250, 'linear');
    };

    setTimeout(function(){checktime(nowdel);}, 250);


  };

   checktime("0|0|0|0|0|0");

 });

</script>



</head>

<body>



 <div id="wrap">

  <div id="day"> </div>

  <div id="month"> </div>
  <div id="date"> </div>
  <div id="hour"> </div>
  <div id="min"> </div>
  <div id="sec"> </div>

 </div> <!-- End "wrap" -->


<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net" target="_blank">vonholdt</a>　代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a>　感谢：<a href="http://www.jb51.net" target="_blank">liulisuo</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>

Ce qui précède est le code d'effet d'horloge plate cool jQuery partagé avec vous, j'espère qu'il vous plaira.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery imitation 360 page de navigation icône glisser tri effet code Sharing_jqueryArticle suivant：jQuery imitation 360 page de navigation icône glisser tri effet code Sharing_jquery

Articles Liés

Voir plus