Erstellen Sie eine einfache Uhr mit HTML5 und CSS3-H5-Tutorial-php.cn

Erstellen Sie eine einfache Uhr mit HTML5 und CSS3

巴扎黑

Freigeben： 2017-09-14 09:47:49

Original

2697 Leute haben es durchsucht

Die Verwendung von HTML5 und CSS zur Erzielung des Pendeleffekts kommt häufig in Projekten vor. Heute werde ich den Implementierungscode für einen einfachen Uhreffekt basierend auf HTML5 + CSS3 an die Script Home-Plattform weitergeben.

Zweck:

Verwenden Sie HTML5 und CSS, um den Pendeleffekt zu erzielen

Wissenspunkte:

1) Verwenden Sie position/left/top und calc(), um eine horizontale und vertikale Zentrierung von Elementen zu erreichen

2) Verwenden Sie CSS3-Attribute „animation/transform/transform-origin“. um Animationen zu definieren ;

3) Verwenden Sie transform-origin, um den Mittelpunkt des Rotationsursprungs anzupassen

Schauen wir uns ohne weiteres den Code direkt an:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{
            list-style:none;
        }
        #box{
            width: 400px;
            height: 400px;
            position: absolute;
            top:calc(50% - 200px);
            left:calc(50% - 200px);
            border: 2px solid palegoldenrod;
        }
        #dial{
            width: 200px;
            height: 200px;
            position: absolute;
            top:calc(50% - 100px);
            left:calc(50% - 100px);
            border: 2px solid cyan;
            border-radius: 50%;
        }   
        .scaleIndex{
            width: 4px;
            height: 12px;
            position: absolute;
            top: 0;
            left: calc(50% - 2px);
            background-color: gray;
            transform-origin: 2px 100px;
        }
        .angle30{transform : rotate(30deg);}
        .angle60{transform : rotate(60deg);}
        .angle90{transform : rotate(90deg);}
        .angle120{transform : rotate(120deg);}
        .angle150{transform : rotate(150deg);}
        .angle180{transform : rotate(180deg);}
        .angle210{transform : rotate(210deg);}
        .angle240{transform : rotate(240deg);}
        .angle270{transform : rotate(270deg);}
        .angle300{transform : rotate(300deg);}
        .angle330{transform : rotate(330deg);}
        #fixPoint{
            width: 10px;
            height: 10px;
            position: absolute;
            top:calc(50% - 5px);
            left:calc(50% - 5px);
            background-color: cadetblue;
            border-radius: 50%;
        }
        #hourHand{
            width: 6px;
            height: 70px;
            position:absolute;
            top: 40px;
            left: calc(50% - 3px);
            background-color: darkblue;
            transform-origin: 50% 60px;
        }
        #minuteHand{
            width: 4px;
            height: 75px;
            position:absolute;
            top: 35px;
            left: calc(50% - 2px);
            background-color: yellow;
            transform-origin: 50% 65px;
        }
        #secondHand{
            width: 2px;
            height: 90px;
            position:absolute;
            top: 20px;
            left: calc(50% - 1px);
            background-color: red;
            transform-origin: 50% 80px;
        }
    </style>
</head>
<body>
    <p id = "box">
            <p id = &#39;dial&#39;>
                <ul id = "scale">
                    <li class = "scaleIndex"></li>
                    <li class = "scaleIndex angle30"></li>
                    <li class = "scaleIndex angle60"></li>
                    <li class = "scaleIndex angle90"></li>
                    <li class = "scaleIndex angle120"></li>
                    <li class = "scaleIndex angle150"></li>
                    <li class = "scaleIndex angle180"></li>
                    <li class = "scaleIndex angle210"></li>
                    <li class = "scaleIndex angle240"></li>
                    <li class = "scaleIndex angle270"></li>
                    <li class = "scaleIndex angle300"></li>
                    <li class = "scaleIndex angle330"></li>
                </ul>
                <p id = "fixPoint"></p>
                <p id = "hourHand"></p>
                <p id = "minuteHand"></p>
                <p id = "secondHand"></p>
            </p>
        </p>
<script type = &#39;text/javascript&#39; src = &#39;js/jquery-3.2.1.js&#39;></script>
<script type = "text/javascript">
window.onload = function(){
            var hourHand = document.getElementById(&#39;hourHand&#39;);
            var minuteHand = document.getElementById(&#39;minuteHand&#39;);
            var secondHand = document.getElementById(&#39;secondHand&#39;);
setInterval(function(){
                    var currentTime = new Date();
                    var hourValue = currentTime.getHours();
                    var hourAngle = hourValue / 24 * 360 + &#39;deg&#39;;
                    var minuteValue = currentTime.getMinutes();
                    var minuteAngle = minuteValue / 60 * 360 + &#39;deg&#39;;
                    var secondValue = currentTime.getSeconds();
                    var secondAngle = secondValue / 60 * 360 + &#39;deg&#39;;
                    console.log(hourAngle);
// 方法一：利用jquery的css()增加属性
var cmdHour = &#39;rotate(&#39;+ hourAngle +&#39;)&#39;;
$(&#39;#hourHand&#39;).css({transform:&#39;rotate(&#39;+ hourAngle +&#39;)&#39;});
var cmdMinute = &#39;rotate(&#39;+ minuteAngle +&#39;)&#39;;
$(&#39;#minuteHand&#39;).css({transform:cmdMinute});
var cmdSecond = &#39;rotate(&#39;+ secondAngle +&#39;)&#39;;
$(&#39;#secondHand&#39;).css({transform:cmdSecond});

// 方法二：利用DOM元素的style属性设置
//      hourHand.style.transform = &#39;rotate(&#39;+ hourAngle + &#39;)&#39;;
//      minuteHand.style.transform = &#39;rotate(&#39;+ minuteAngle + &#39;)&#39;;
//      secondHand.style.transform = &#39;rotate(&#39;+ secondAngle + &#39;)&#39;;  

},1000);
}
    </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie eine einfache Uhr mit HTML5 und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!