Home >Web Front-end >JS Tutorial >jQuery super cool flat clock effect code sharing_jquery

jQuery super cool flat clock effect code sharing_jquery

WBOYOriginal: 2016-05-16 15:43:091073browse

The example in this article describes the jQuery super cool flat clock effect code. Share it with everyone for your reference. The details are as follows:
The super cool flat clock effect produced by jQuery displays the date and time through the horizontal scale bar. After testing, the effect is very cool and it is a very good learning example.
Here we would also like to mention another particularly novel time display style that we have implemented before: JS implements thermometer time style , both of which completely break through the traditional clock concept. Interested Don’t miss it.

Operation rendering: ----------------------View the effect Download the source code----- ------------------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The jQuery super cool flat clock effect code shared with you is as follows

<!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>

The above is the jQuery cool flat clock effect code shared with you, I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery imitation 360 navigation page icon drag sorting effect code sharing_jqueryNext article：jQuery imitation 360 navigation page icon drag sorting effect code sharing_jquery

See more

jQuery super cool flat clock effect code sharing_jquery

Related articles