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冒泡排序算法详解
Dec 03 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
深入详解JS函数的柯里化
Jun 09 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
详解React 元素渲染
2020/07/07 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
学生信息管理系统python版
2018/10/17 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
中学生期末评语
2014/02/03 职场文书
安全大检查实施方案
2014/02/22 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
考博专家推荐信
2014/05/10 职场文书
党性观念心得体会
2014/09/03 职场文书
护士2014年终工作总结
2014/11/11 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang