h5简写时钟效果

会有两种时钟代码,第一种写法比较复杂,菜鸟写法,第二种比较简单

第一种:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset=‘utf-8‘>
    <style type="text/css">
     #wrap{
         width: 220px;
        height: 220px;
        border: 3px solid pink;
        border-radius: 50%;
        margin: 100px auto;
        position: relative;
        background: url(img/0000.jpg);
        background-size: 100% 100%;
        box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5);
        
     }
     #wrap1{
         width: 200px;
         height: 200px;
         border: 3px solid pink;
         border-radius: 50%;
         position: absolute;
         left: 8px;top: 8px;
         
         transform-style: preserve-3d;
     }
     span{font-size: 30px;color: yellow;}
     .span12{
         position: absolute;
         left: 85px;top: 6px;
     }
     .span1{
         position: absolute;
         right: 50px;top: 20px;
     }
     .span2{
         position: absolute;
         right: 20px; top:50px;
     }
     .span3{
         position: absolute;
         right: 10px; top:90px;
     }
     .span4{
         position: absolute;
         right: 20px;top:130px;
     }
     .span5{
         position: absolute;
         right: 40px;bottom:15px;
     }
     .span6{
         position: absolute;
         right: 90px;bottom: 0px;
     }
     .span7{
         position: absolute;
         left: 50px;bottom: 15px;
     }
     .span8{
         position: absolute;
         left: 20px;bottom: 45px;
     }
     .span9{
         position: absolute;
         left: 10px;top:95px;
     }
     .span10{
         position: absolute;
         left: 15px;top:55px;
     }
     .span11{
         position: absolute;
         left: 40px;top: 20px;
     }
     #dian{
         width: 15px;
         height: 15px;
         border: 1px solid #333;
         border-radius: 50%;
         background: #333;
         position: absolute;
         left: 50%;top: 50%;
         transform:translate(-50%,-50%);
     }
     #dian1{
         width: 8px;
         height: 8px;
         border: 1px solid #333;
         border-radius: 50%;
         background: #fff;
         position: absolute;
         left: 50%;top: 50%;
         transform:translate(-50%,-50%);
         z-index: 222;
     }
     #hour{
        width:5px;height: 60px;
         background: red;position: absolute;
         left: 50%;top: -40px;
         transform:translate(-50%,0);
         transform-origin:50% 48px;
     }
     #min{
         width: 3px;height: 75px;
         background: green;position: absolute;
         left: 50%; top: -55px;
         transform:translate(-50%,0);
         transform-origin:50% 64px;
     }
     #second{
          width: 2px;height: 85px;
          background: blue;position: absolute;
          left: 50%; top:-70px ;
          transform:translate(-50%,0);
          transform-origin:50% 80px;
     }

</style>
</head>
<body>
     <div id="wrap">
         <div id="wrap1">
             <span class=‘span12‘>12</span>
             <span class="span1">1</span>
             <span class="span2">2</span>
             <span class="span3">3</span>
             <span class="span4">4</span>
             <span class="span5">5</span>
             <span class="span6">6</span>
             <span class="span7">7</span>
             <span class="span8">8</span>
             <span class="span9">9</span>
             <span class="span10">10</span>
             <span class="span11">11</span>
             <div id="dian">
                 <div id="dian1"></div>
                 <div id="hour"></div>
                <div id="min"></div>
                <div id="second"></div>
             </div>  
         </div>
     </div>
     <script type="text/javascript">
      //获取秒针元素
      var secondD = document.getElementById(‘second‘);
      var hourD = document.getElementById(‘hour‘);
      var minD = document.getElementById(‘min‘);

function setTime(){
          //获取日期
          var date = new Date();
          //获取秒针
          var second = date.getSeconds();
          //获取分针
          var min = date.getMinutes();
          //获取小时
          var hour = date.getHours();
           hourD.style.transform = ‘rotate(‘+(hour*30+min/2)+‘deg)‘;
           minD.style.transform = ‘rotate(‘+(min*6)+‘deg)‘;
           secondD.style.transform = ‘rotate(‘+(second*6)+‘deg)‘;
  }
        setTime();
      //刷新获取时间
      setInterval(setTime ,1000);       
     </script>
</body>
</html>

第二种写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*初始化标签*/
            body {background: #ccc;}
            ul {margin: 0; padding: 0;}
            li {list-style: none;}
            
            #box {
                width: 500px;
                height: 500px;
                border-radius: 50%;
                background: -webkit-linear-gradient(#eee 1%,#999 8%,#999 95%,#eee);
                position: relative;
                margin: 100px auto;
                box-shadow: 1px 1px 25px #000;
            }
            #clock {
                width: 460px;
                height: 460px;
                border-radius: 50%;
                position: absolute;
                margin: auto;
                left: 0;top: 0;right: 0;bottom: 0;
                box-shadow: inset 1px 1px 15px #333;
            }
            .number {
                height: 100%;
                border-radius: 50%;
            }
            .number li {
                width: 100%;
                height: 50px;
                position: absolute;
                margin: auto;
                left: 0;top: 0;right: 0;bottom: 0;
                padding: 10px;
                box-sizing: border-box;
            }
            .number : first-child {
                transform: rotate(30deg);
            }
            .number span {
                font-size: 50px;
                display: inline-block;
                color: white;
            }
            
            /*布局指针*/
            .pointer {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background: #333;
                position: absolute;
                margin: auto;
                left: 0;top: 0;right: 0;bottom: 0;
            }
            .pointer li {
                position: absolute;
                left: 50%; top: 50%;
                transform-origin: left center;
            }
            .pointer .hour{
             width: 120px;
             height: 10px;
             background: firebrick;
             margin-top: -5px;
         }

/* 指针的细节处理 */
         .hour div{
             height: 100%;
             background: firebrick;
             margin-left: -20px;
         }

.pointer .minutes{
             width: 160px;
             height: 6px;
             background: darkolivegreen;
             margin-top: -3px;
         }
        /* 指针的细节处理 */
         .minutes div{
             height: 100%;
             background: darkolivegreen;
             margin-left: -20px;
         }

.pointer .second{
             width: 200px;
             height: 2px;
             background: darkred;
             margin-top: -1px;
             transform: rotate(40deg);
         }
        /* 指针的细节处理 */
        .second div{
             height: 100%;
             background: darkred;
             margin-left: -20px;
         }
        
        /* 最后的细节打磨,处理指针固定点 */
        .pointer .dot{
            width: 15px;
            height: 15px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            margin: auto;
            left: 0;top: 0;right: 0;bottom: 0;
        }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="clock">
                <ul class="number">
                    <li><span>9</span></li>
                    <li><span>10</span></li>
                    <li><span>11</span></li>
                    <li><span>12</span></li>
                    <li><span>1</span></li>
                    <li><span>2</span></li>
                    <li><span>3</span></li>
                    <li><span>4</span></li>
                    <li><span>5</span></li>
                    <li><span>6</span></li>
                    <li><span>7</span></li>
                    <li><span>8</span></li>
                </ul>
                
                <!--设置指针-->
                <ul class="pointer">
                        <li class="hour">
                            <div></div>
                        </li>
                        <li class="minutes">
                            <div></div>
                        </li>
                        <li class="second">
                            <div></div>
                        </li>
                        <!--最后细节的打磨-->
                        <li class="dot"></li>
                </ul>
            </div>
        </div>
    </body>
    
    <script type="text/javascript">
        
        var oNumber = document.querySelector(‘.number‘);
        var numLi = oNumber.querySelectorAll(‘li‘);
        
        //获取指针元素
        var oPointer = document.querySelector(‘.pointer‘);
        var hour = document.querySelector(‘.hour‘);
        var minutes = document.querySelector(‘.minutes‘);
        var second = document.querySelector(‘.second‘);
        
         // 3.将获取到的元素进行排兵布阵
        for(var i=0; i<numLi.length; i++){
            var oSpan = numLi[i].querySelector(‘span‘);
            numLi[i].style.transform = "rotate("+i*30+"deg)";
            oSpan.style.transform = "rotate("+-i*30+"deg)";
        }
        
        // 获取当前时间，让指针动起来
        setTime();
        setInterval(setTime, 1000);
        
        function setTime () {
               var oDate = new Date();
               var h = oDate.getHours();
               var m = oDate.getMinutes();
               var s = oDate.getSeconds();
               
               hour.style.transform = ‘rotate(‘+((h*30+m/2)-90)+‘deg)‘;
               minutes.style.transform = ‘rotate(‘+(m*6-90)+‘deg)‘;
               second.style.transform = ‘rotate(‘+(s*6-90)+‘deg)‘;
        }
        
    </script>
</html>

时间： 2024-12-25 06:12:07

h5简写时钟效果的相关文章

第35天：时钟效果

时钟效果案例 1.得到现在的时分秒2.旋转角度原理一圈360°   60s   1s/6°旋转second.style.WebkitTransform="rotate(60deg)";//每秒旋转60度 案例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>时钟效果</

1.1 结合date()和setTimeOut()实现简单的时钟效果

一.简单的时钟效果 首先要熟悉日期函数date()以及其常用的方法 getFullYear()  返回完整的年份 比如:2016 getMonth()  返回月份(从0开始,需+1) getDate()  返回日期 getHours()  返回小时数 getMinutes()  返回分钟数 getSeconds()  返回秒数 getDay() 返回星期几 (0-6,0是星期天,1是星期一) 写一个简单的html页面,用来展示时钟效果 <!DOCTYPE html> <html>

原生javascript实现网页显示日期时钟效果

刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几时几分几秒 先看代码效果 <script type="text/javascript"> window.onload=function(){ showDate(); countdown(); } function showDate(){ var myDate=new Date(

转CSS3+js实现多彩炫酷旋转圆环时钟效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多彩炫酷环形时钟效果</title> <style type="text/css"> #fancyClock{ margin:40px auto; he

transform实现的时钟效果

又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟 在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度 使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和 圆心接触的吗,那么设置时针的底部为旋转点不就OK了,大概的说了说思路.

ios开发核心动画三：隐式动画与时钟效果

一:隐式动画 #import "ViewController.h" @interface ViewController () /** <#注释#> */ @property (nonatomic, weak) CALayer *layer; @property (weak, nonatomic) IBOutlet UIView *redView; @end @implementation ViewController - (void)viewDidLoad { [super

canvas实现的时钟效果

最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之间就是360/12=30度,所以我在圆上画出数字的代码是这样的: drawNumber:function(){ this.context.save(); for(var i = 0;i < 12; i++){ var angle = i*30; angle = angle*Math.PI/180;

java-swing模拟实现时钟效果

1 import java.awt.Color; 2 import java.awt.Font; 3 import java.awt.Graphics; 4 import java.util.Calendar; 5 import java.util.GregorianCalendar; 6 7 import javax.swing.JFrame; 8 import javax.swing.JPanel; 9 10 /** 11 * 12 * @author YYCat 13 * 14 */ 15

代码写响应式时钟效果

只需3个文件,就可以实现钟表效果,还是先看图再来看代码效果 时间是用的北京时间 再来看它的源代 html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu