Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 158259
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
CSS3+JS实现一款创意时钟效果

分类： HTML5

2016-06-07 16:53:53



点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="jquery.js"></script>
  7.     <style>
  8.      *{padding:0;margin:0;border:none;}
  9.      .view_hour{position: absolute;left: 200px;width: 160px;height: 160px;}
  10.      .view_minute{position: absolute;left: 400px;width: 160px;height: 160px;}
  11.      .view_second{position: absolute;left: 600px;width: 160px;height: 160px;}
  12.      .bg{position:absolute;width: 80px;height: 80px;border-radius: 60px;border:20px solid orange;z-index: 2;top:20px;left: 20px;}
  13.      .view_hour .bg{border:20px solid #2271CD;}
  14.      .view_minute .bg{border:20px solid #DB5C1C;}
  15.      .right{position: absolute;width: 80px;height: 160px;background:white;left: 80px;z-index: 3;transform-origin:left;}
  16.      .left{position: absolute;width: 80px;height: 160px;overflow: hidden;z-index: 3;}
  17.      .left_front{position: absolute;width: 80px;height: 160px;background:white;z-index: 3;transform-origin:right;}
  18.      .hour,.minute,.second{position: absolute;z-index: 6;height: 60px;width: 60px;line-height: 60px;text-align: center;top:50px;left:50px;font-size: 25px;font-weight: bold;}
  19.      .hour{color: orange}
  20.      .minute{color:#2271cd }
  21.      .second{color: red}
  22.     </style>
  23. </head>
  24. <body>
  25. <div class="view_hour">
  26.     <div class="bg">
  27.     </div>
  28.     <div class="right">
  29.         
  30.     </div>
  31.     <div class="left">
  32.         <div class="left_front">
  33.             
  34.         </div>
  35.     </div>
  36.     <div class="hour">
  37.     </div>
  38. </div>
  39. <div class="view_minute">
  40.     <div class="bg">
  41.     </div>
  42.     <div class="right">
  43.         
  44.     </div>
  45.     <div class="left">
  46.         <div class="left_front">
  47.             
  48.         </div>
  49.     </div>
  50.     <div class="minute">
  51.     </div>
  52. </div>

  54. <div class="view_second">
  55.     <div class="bg">
  56.     </div>
  57.     <div class="right">
  58.         
  59.     </div>
  60.     <div class="left">
  61.         <div class="left_front">
  62.             
  63.         </div>
  64.     </div>
  65.     <div class="second">
  66.     </div>
  67. </div>
  68. <p class="intend"></p>
  69.     <script>
  70.        $(function(){
  71.          function timer1(){
  72.              var date=new Date();
  73.              var hour=date.getHours();
  74.              var minute=date.getMinutes();
  75.              var second=date.getSeconds();
  76.              //init
  77.              $(".hour").html(hour+"时");
  78.              $(".minute").html(minute+"分");
  79.              //判断
  80.              if(0<=hour&&hour<12){
  81.             //hour
  82.                $(".view_hour .left_front").css("transform","rotateZ(0deg)"); //左边不转
  83.                $(".view_hour .right").show(); //右边转
  84.                $(".view_hour .second").html(hour+"时");;
  85.                if(0<=hour&&hour<10){$(".view_hour .hour").html("0"+hour+"时");}
  86.                $(".view_hour .right").css("transform","rotateZ(0)");
  87.                $(".view_hour .right").css("transform","rotateZ("+(hour+1)*15+"deg)"); //右边转的规律
  88.              }
  89.              if(12<=hour&&hour<24){
  90.             //hour
  91.                 $(".view_hour .hour").html(hour+"时");
  92.                 $(".view_hour .right").css("transform","rotateZ(0deg)"); //右边保持固定位置不转
  93.                 $(".view_hour .right").hide();
  94.                 $(".view_hour .left_front").css("transform","rotateZ("+(hour-11)*15+"deg)"); //左边转的规律
  95.               }

  97.              if(0<=minute&&minute<30){
  98.             //minute
  99.                $(".view_minute .left_front").css("transform","rotateZ(0deg)"); //左边不转
  100.                $(".view_minute .right").show(); //右边转
  101.                $(".view_minute .second").html(minute+"分");
  102.                if(0<=minute&&minute<10){$(".view_minute .minute").html("0"+minute+"分");}
  103.                $(".view_minute .right").css("transform","rotateZ(0)");
  104.                $(".view_minute .right").css("transform","rotateZ("+(minute+1)*6+"deg)"); //右边转的规律
  105.              }
  106.              if(30<=minute&&minute<60){
  107.             //minute
  108.                 $(".view_minute .minute").html(minute+"分");
  109.                 $(".view_minute .right").css("transform","rotateZ(0deg)"); //右边保持固定位置不转
  110.                 $(".view_minute .right").hide();
  111.                 $(".view_minute .left_front").css("transform","rotateZ("+(minute-29)*6+"deg)"); //左边转的规律
  112.               }

  114.              if(0<=second&&second<30){
  115.             //second
  116.                $(".view_second .left_front").css("transform","rotateZ(0deg)"); //左边不转
  117.                $(".view_second .right").show(); //右边转
  118.                $(".view_second .second").html(second+"秒");
  119.                if(0<=second&&second<10){$(".view_second .second").html("0"+second+"秒");}
  120.                $(".view_second .right").css("transform","rotateZ(0)");
  121.                $(".view_second .right").css("transform","rotateZ("+(second+1)*6+"deg)"); //右边转的规律
  122.              }
  123.              if(30<=second&&second<60){
  124.             //second
  125.                 $(".view_second .second").html(second+"秒");
  126.                 $(".view_second .right").css("transform","rotateZ(0deg)"); //右边保持固定位置不转
  127.                 $(".view_second .right").hide();
  128.                 $(".view_second .left_front").css("transform","rotateZ("+(second-29)*6+"deg)"); //左边转的规律
  129.               }
  130.               setTimeout(timer1,1000);
  131.          }
  132.          timer1();
  133.        })
  134.     </script>
  135. </body>
  136. </html>

阅读(1185) | 评论(0) | 转发(0) |
1

上一篇：CSS3+HTML5实现旋转木马特效

下一篇：js实现手机重力感应效果(可用来实现手机游戏)

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6