jQuery超酷平面式时钟效果代码分享


Posted in Javascript onMarch 30, 2020

本文实例讲述了jQuery超酷平面式时钟效果代码。分享给大家供大家参考,具体如下:

jQuery制作的超酷平面式时钟效果,把日期和时间通过横向刻度条展现,经测试效果非常酷,是一个很不错的学习实例。
这里我们还要提到之前实现的另一个特别新颖的时间显示样式:js实现温度计时间样式,两者都完全突破了传统的时钟概念,感兴趣的各位可不要错过了哈。

运行效果图:----------------------查看效果 下载源码-----------------------

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery超酷平面式时钟效果代码如下

<!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="//3water.com" target="_blank">vonholdt</a> 代码整理:<a href="//3water.com" target="_blank">三水点靠木</a> 感谢:<a href="//3water.com" target="_blank">liulisuo</a></p>
<p>转载请注明出处,此代码仅供学习交流,请勿用于商业用途。</p>
</div>
</body>
</html>

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js来解决ajax读取页面乱码
Nov 28 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 #Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 #Javascript
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
php 引用(&amp;)详解
2009/11/20 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
Destoon模板制作简明教程
2014/06/20 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
js常见表单应用技巧
2008/01/09 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
Nest.js散列与加密实例详解
2021/02/24 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
领导干部培训感言
2014/01/23 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
幼儿园家长寄语
2014/04/02 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书