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实现YouKu的漂亮搜索框效果
Aug 19 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python决策树分类算法学习
2017/12/22 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
八一建军节活动方案
2014/02/10 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
财会专业大学生求职信
2014/09/26 职场文书
节约用电通知
2015/04/25 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python