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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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程序员的13个好习惯小结
2012/02/20 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
javascript编写简易计算器
2017/05/06 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue中nextTick用法实例
2019/09/11 Javascript
js里面的变量范围分享
2020/07/18 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
微信小程序python用户认证的实现
2019/07/29 Python
dpn网络的pytorch实现方式
2020/01/14 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
怎样写留学自荐信
2013/11/11 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
委托书范本
2014/09/13 职场文书
事业单位考察材料范文
2014/12/25 职场文书
升学宴答谢词
2015/01/05 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
解析目标检测之IoU
2021/06/26 Python