Maison > Article > interface Web > À propos de l'effet de l'implémentation de l'horloge HTML5 et CSS3

À propos de l'effet de l'implémentation de l'horloge HTML5 et CSS3

不言original: 2018-06-25 17:26:051878parcourir

L'utilisation de HTML5 et CSS pour obtenir l'effet pendule est souvent rencontrée dans les projets. Aujourd'hui, je vais partager le code d'implémentation d'un simple effet d'horloge basé sur HTML5+CSS3 sur la plateforme Script Home. 🎜>

Objectif :

Utiliser html5 et CSS pour obtenir l'effet pendule

Points de connaissance :

1) Utilisez position/left/top et calc() pour réaliser le centrage horizontal et vertical des éléments

2) Utilisez les propriétés CSS3 d'animation/transform/transform-origin ; pour définir des animations ;

3) Utilisez transform-origin pour ajuster le centre de l'origine de la rotation

Sans plus tarder, regardons directement le code. Le code spécifique est le suivant :

<!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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois !

Recommandations associées :

html5 et css3 et jquery pour implémenter un lecteur de musique

Utilisez JavaScript et Canvas pour implémenter l'image recadrage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Deux fonctions courantes des coins arrondis et des dégradés CSS3Article suivant：Deux fonctions courantes des coins arrondis et des dégradés CSS3

Articles Liés

Voir plus