zoukankan      html  css  js  c++  java

  • 基于JS和JQuery实现的两种时钟效果（3）

    在上一篇博文中实现了秒针的转动，接下来需要进行实现分针的布局和旋转角度计算和时针的布局和旋转角度计算

    时钟案例-分针的布局和旋转角度计算

    实现的效果图：

     实现该效果的css代码与HTML代码：

      1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{
  8                 
  9                 padding: 0px;
 10                 margin: 0px;
 11             }
 12             #clock{
 13                  800px;
 14                 height: 800px;
 15                 border: 1px solid red;
 16                 margin: auto;
 17                 background: url(img/timg.png) 0px 0px no-repeat;
 18                 background-size: 100% 100%;
 19                 position: relative;
 20             }
 21             .second{
 22                 
 23                  22px;
 24                height: 373px;
 25                /*border: 1px solid red;*/
 26                background: url(img/pointer.png) -9px 0px no-repeat;
 27                background-size: 606% 100%;
 28                position: absolute;
 29                left: 393px;
 30               top: 135px;
 31               opacity: 0.5;
 32               transform: rotate(46deg);
 33               transform-origin: 11px 273px;
 34                     
 35             }
 36             .secHead{
 37                 
 38                  40px;
 39                 height: 40px;
 40                 background: url(img/one.jpg) 0px 0px no-repeat;
 41                 background-size: 100% 100%;
 42                 position: absolute;
 43                 left: -10px;
 44                 top: 64px;
 45                 border-radius: 50%;
 46                 
 47             }
 48             
 49             .minute{
 50                 
 51                  22px;
 52                height: 373px;
 53                /*border: 1px solid red;*/
 54                background:  url(img/pointer.png) -53px 0px no-repeat;
 55                background-size: 606% 100%;
 56                position: absolute;
 57                left: 393px;
 58               top: 135px;
 59               opacity: 0.5;
 60               transform: rotate(100deg);
 61               transform-origin: 11px 273px;
 62                     
 63             }
 64         </style>
 65         <script>
 66             var secDegree=0;
 67             var minDegree=0;
 68             
 69             function bodyload(){
 70                 var now=new Date();
 71                 var sec=now.getSeconds();
 72                 secDegree=sec*6;//当前的秒数乘以6
 73                 
 74                 
 75                 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
 76                 //计算当前分针旋转的角度
 77                 var min=now.getMinutes();
 78                   minDegree=min*(0.1*60);
 79                 
 80                 
 81                 
 82                 
 83                 
 84             }
 85             //每秒钟调用一次
 86             function clockRotate(){
 87                 //秒针的旋转
 88                 secDegree+=6;
 89                 var divSecond=document.getElementsByClassName("second");//getElementsByClassName带s因此需要返回一个数组
 90                 divSecond[0].style.transform="rotate("+secDegree+"deg)";
 91                 
 92                 
 93                 //分针的旋转
 94                 minDegree+=0.1;//(360/3600)
 95                 var divMinute=document.getElementsByClassName("minute");//getElementsByClassName带s因此需要返回一个数组
 96                 divMinute[0].style.transform="rotate("+minDegree+"deg)";
 97             }
 98             //启动定时器，定时调用旋转函数
 99             setInterval("clockRotate()",1000);
100         </script>
101     </head>
102     <body onload="bodyload()">
103         <div id="clock">
104             <div class="second">
105                 <div class="secHead">
106                     
107                     
108                 </div>
109                 
110                 
111             </div>
112             <div class="minute">
113                 
114                 
115             </div>
116             
117             
118         </div>
119     </body>
120 </html>
    Clock.html

    实现的js代码：

     1 <script>
 2             var secDegree=0;
 3             var minDegree=0;
 4             
 5             function bodyload(){
 6                 var now=new Date();
 7                 var sec=now.getSeconds();
 8                 secDegree=sec*6;//当前的秒数乘以6
 9                 
10                 
11                 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
12                 //计算当前分针旋转的角度
13                 var min=now.getMinutes();
14                   minDegree=min*(0.1*60);
15                 
16                 
17                 
18                 
19                 
20             }
21             //每秒钟调用一次
22             function clockRotate(){
23                 //秒针的旋转
24                 secDegree+=6;
25                 var divSecond=document.getElementsByClassName("second");//getElementsByClassName带s因此需要返回一个数组
26                 divSecond[0].style.transform="rotate("+secDegree+"deg)";
27                 
28                 
29                 //分针的旋转
30                 minDegree+=0.1;//(360/3600)
31                 var divMinute=document.getElementsByClassName("minute");//getElementsByClassName带s因此需要返回一个数组
32                 divMinute[0].style.transform="rotate("+minDegree+"deg)";
33             }
34             //启动定时器，定时调用旋转函数
35             setInterval("clockRotate()",1000);
36         </script>

    其中：分针的旋转角度360/3600=0.1

     minDegree+=0.1;
    计算当前分针旋转的角度:
    当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
    var min=now.getMinutes();
                  minDegree=min*(0.1*60);

    时钟案例-时针的布局和旋转角度计算

    时针一秒钟旋转的角度

    360度*（12小时*3600秒）

    //时针的旋转
                houDegree+=0.008333;//360/(12*3600)=0.008333//时针一秒钟旋转的角度
                var divHour=document.getElementsByClassName("hour");//getElementsByClassName带s因此需要返回一个数组
                divHour[0].style.transform="rotate("+houDegree+"deg)";

    计算当前时针旋转的角度：

     //计算当前时针旋转的角度
                var hou=now.getHours();
                 // houDegree=hou*(360/12);
                  houDegree=(hou+min/60)*30;

    去掉透明度与调整初始旋转的角度的效果：

    实现最终该效果的总代码：

      1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             *{
  8                 
  9                 padding: 0px;
 10                 margin: 0px;
 11             }
 12             #clock{
 13                  800px;
 14                 height: 800px;
 15                 border: 1px solid red;
 16                 margin: auto;
 17                 background: url(img/timg.png) 0px 0px no-repeat;
 18                 background-size: 100% 100%;
 19                 position: relative;
 20             }
 21             .second{
 22                 
 23                  22px;
 24                height: 373px;
 25                /*border: 1px solid red;*/
 26                background: url(img/pointer.png) -9px 0px no-repeat;
 27                background-size: 606% 100%;
 28                position: absolute;
 29                left: 393px;
 30               top: 135px;
 31               
 32              /* opacity: 0.5;*/
 33               transform: rotate(0deg);
 34               transform-origin: 11px 273px;
 35                     
 36             }
 37             .secHead{
 38                 
 39                  40px;
 40                 height: 40px;
 41                 background: url(img/one.jpg) 0px 0px no-repeat;
 42                 background-size: 100% 100%;
 43                 position: absolute;
 44                 left: -10px;
 45                 top: 64px;
 46                 border-radius: 50%;
 47                 
 48             }
 49             
 50             .minute{
 51                 
 52                  22px;
 53                height: 373px;
 54                /*border: 1px solid red;*/
 55                background:  url(img/pointer.png) -53px 0px no-repeat;
 56                background-size: 606% 100%;
 57                position: absolute;
 58                left: 393px;
 59               top: 135px;
 60               /*opacity: 0.5;*/
 61               transform: rotate(0deg);
 62               transform-origin: 11px 273px;
 63                     
 64             }
 65             
 66             .hour{
 67                 
 68                  31px;
 69                height: 373px;
 70                /*border: 1px solid red;*/
 71                background:  url(img/pointer.png) -101px 0px no-repeat;
 72                background-size: 468% 100%;/*背景图片的缩放*/
 73                position: absolute;
 74                left: 389px;
 75               top: 135px;
 76              /* opacity: 0.5;*/
 77               transform: rotate(0deg);
 78               transform-origin: 16px 273px;
 79                     
 80             }
 81         </style>
 82         <script>
 83             var secDegree=0;
 84             var minDegree=0;
 85             var  houDegree=0;
 86             
 87             function bodyload(){
 88                 var now=new Date();
 89                 var sec=now.getSeconds();
 90                 secDegree=sec*6;//当前的秒数乘以6
 91                 
 92                 
 93                 //当前的分钟*（每秒钟旋转的度数*每分钟的秒数）
 94                 //计算当前分针旋转的角度
 95                 var min=now.getMinutes();
 96                  // minDegree=min*(0.1*60);
 97                   minDegree=min*6;
 98                   
 99                   
100                   //计算当前时针旋转的角度
101                 var hou=now.getHours();
102                  // houDegree=hou*(360/12);
103                   houDegree=(hou+min/60)*30;
104                 
105                 
106                 
107                 
108                 
109             }
110             //每秒钟调用一次
111             function clockRotate(){
112                 //秒针的旋转
113                 secDegree+=6;
114                 var divSecond=document.getElementsByClassName("second");//getElementsByClassName带s因此需要返回一个数组
115                 divSecond[0].style.transform="rotate("+secDegree+"deg)";
116                 
117                 
118                 //分针的旋转
119                 minDegree+=0.1;//
120                 var divMinute=document.getElementsByClassName("minute");//getElementsByClassName带s因此需要返回一个数组
121                 divMinute[0].style.transform="rotate("+minDegree+"deg)";
122                 
123                 //时针的旋转
124                 houDegree+=0.008333;//360/(12*3600)=0.008333//时针一秒钟旋转的角度
125                 var divHour=document.getElementsByClassName("hour");//getElementsByClassName带s因此需要返回一个数组
126                 divHour[0].style.transform="rotate("+houDegree+"deg)";
127             }
128             //启动定时器，定时调用旋转函数
129             setInterval("clockRotate()",1000);
130         </script>
131     </head>
132     <body onload="bodyload()">
133         <div id="clock">
134             <div class="hour">
135                 
136                 
137             </div>
138             <div class="minute">
139                 
140                 
141             </div>
142             
143             <div class="second">
144                 <div class="secHead">
145                     
146                     
147                 </div>
148                 
149                 
150             </div>
151             
152             
153             
154             
155         </div>
156     </body>
157 </html>
    最终效果
  • 相关阅读:
    解决sqlite3 dos下显示中文乱码
    毕业两年
    成就感
    重构html的下拉框select
    ie6 select不兼容处理（转）
    全选删除确认改进
    GridView移动行变色
    gridview固定列的宽度并且能换行
    分页控件结合分页存储过程
    网页滚动条向下拉动奇慢的原因
  • 原文地址：https://www.cnblogs.com/jiguiyan/p/11437430.html
Copyright © 2011-2022 走看看