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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 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
PHP insert语法详解
2008/06/07 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
axios学习教程全攻略
2017/03/26 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python常见数据结构详解
2014/07/24 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
python在地图上画比例的实例详解
2020/11/13 Python
python里glob模块知识点总结
2021/01/05 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
国庆促销活动总结
2014/08/29 职场文书
2015年春节标语口号
2014/12/09 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2015年大学生实习评语
2015/03/25 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript