JavaScript implémente le projet 'Creative Clock'-js tutoriel-php.cn

JavaScript implémente le projet 'Creative Clock'

一个新手

Libérer： 2018-05-30 14:36:52

original

2255 Les gens l'ont consulté

Document de description du "Projet d'affichage de l'horloge" (Le document a le code correspondant attaché à la fin)

1. affichage :

2. Points forts du projet

1. La structure du code est claire et claire

2. Peut afficher dynamiquement l'heure actuelle et la date actuelle en temps réel

3. L'interface est simple, belle et généreuse

4. Améliorer la compatibilité du navigateur

3. Résumé des points de connaissances :

jQuery, javascript natif, css3, h5

4. Explication des points importants et difficiles

1. Obtention de l'angle de rotation de chaque pointeur

Tout d'abord, nous devons clarifier les concepts suivants :

L'aiguille de l'horloge tourne à 360 degrés dans un cercle

Aiguille des heures :

Il y a 12 heures au total sur le cadran. Chaque heure, elle tourne de 30 degrés

Aiguille des minutes :

Il y a 60 heures au total sur la grille du cadran, chaque minute l'aiguille des minutes se déplace à travers une petite grille, elle tourne de 6 degrés

Trotteuse :

Il y a 60 petites grilles sur le cadran, chaque minute la trotteuse bouge, elle passe à travers une petite grille et tourne. 6 degrés ;

(1) Obtention de l'heure actuelle

Par exemple Exemple (en prenant comme exemple le calcul de l'angle de rotation de l'aiguille des heures) : Par exemple, l'heure actuelle est 9h28 ;

L'aiguille des heures doit être comprise entre 9 et 10, et seule l'heure peut être obtenue via la méthode

, donc les deux Pour obtenir l'heure actuelle, vous Il faut également obtenir la minute actuelle, afin de mieux déterminer l'angle de rotation de l'aiguille des heures, qui est le suivant :

(2) Rotation Obtention de l'angle

Étant donné que l'aiguille des heures tourne de 30 degrés après chaque heure, l'angle de rotation de l'aiguille des heures est obtenu comme suit :

De même, l'angle de l'aiguille des minutes et Trotteuse L'angle de rotation est le suivant :

Aiguille des minutes :

Trotteuse :

Afin de rendre l'horloge plus précise, elle est ici précise à la milliseconde

(3) Fréquence d'exécution, c'est-à-dire le contrôle de la fréquence de rotation de la trotteuse

Ajustez l'intervalle de temps d'exécution de la fonction pour changer la fréquence de rotation de la trotteuse.

5. Domaines d'optimisation du projet

1. La page est trop concise et nécessite une optimisation et une amélioration supplémentaires

2. Il n'y a pas de temps pour dessiner les minutes et les secondes sur l'horloge lors du dessin

6. Codes pour chaque partie du projet

1. Code HTML

2. Code .css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery指针时钟（附带日期）</title>
    <!--引入外部css样式-->
    <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
</head>
<body>
    <!--引入jQuery库文件-->
    <script src="js/jquery-1.6.2.min.js"></script>
    <!--引入外部js文件-->
    <script src="js/script.js"></script>
    <p style="text-align:center;clear:both">
    </p>
</body>
</html>

Copier après la connexion

Afficher le code

*
{
    margin:0;
    padding:0;
}
body
{
    background:#f9f9f9;
    color:#000;
    font:15px Calibri, Arial, sans-serif;
    text-shadow:1px 2px 1px #FFFFFF;
}
a,
a:visited
{
    text-decoration:none;
    outline:none;
    color:#fff;
}
a:hover
{
    text-decoration:underline;
    color:#ddd;
}
     /*the footer  （尾部）*/
footer
{
    background:#444 url("../images/bg-footer.png") repeat;
    position:fixed;
    width:100%;
    height:70px;
    bottom:0;
    left:0;
    color:#fff;
    text-shadow:2px 2px #000;
    /*提高浏览器的兼容性*/
    -moz-box-shadow:5px 1px 10px #000;
    -webkit-box-shadow:5px 1px 10px #000;
    box-shadow:5px 1px 10px #000;
}
footer h1
{
    font:25px/26px Acens;
    font-weight:normal;
    left:50%;
    margin:0px 0 0 150px;
    padding:25px 0;
    position:relative;
    width:400px;
}
footer a.orig,
a.orig:visited
{
    background:url("../images/demo2.png") no-repeat right top;
    border:none;
    text-decoration:none;
    color:#FCFCFC;
    font-size:14px;
    height:70px;
    left:50%;
    line-height:50px;
    margin:12px 0 0 -400px;
    position:absolute;
    top:0;
    width:250px;
}
     /*styling for the clock（时钟样式）*/
#clock
{
    position: relative;
    width: 600px;
    height: 600px;
    list-style: none;
    margin: 20px auto;
    background: url(&#39;../images/clock.png&#39;) no-repeat center;
    
}
#seconds,
#minutes,
#hours
{
    position: absolute;
    width: 30px;
    height: 580px;
    left: 270px;
}
#date
{
    position: absolute;
    top: 365px;
    color: #666;
    right: 140px;
    font-weight: bold;
    letter-spacing: 3px;
    font-family: "微软雅黑";
    font-size: 30px;
    line-height: 36px;
}
#hours
{
    background: url(&#39;../images/hands.png&#39;) no-repeat left;
    z-index: 1000;
}
#minutes
{
    background: url(&#39;../images/hands.png&#39;) no-repeat center;
    width:25px;
    z-index: 2000;
}

#seconds
{
    background: url(&#39;../images/hands.png&#39;) no-repeat right;
    z-index: 3000;
}

Copier après la connexion

Code 3.js

(1) Vous devez télécharger un package de référence js (Baidu ou Google, vous le savez)

(2) code js

4. Certains éléments d'image nécessaires (c ne seront pas répertoriés ou affichés un par un ici)

$(document).ready(function () {
    //动态插入HTML代码，标记时钟    
    var clock = [
        &#39;<ul id="clock">&#39;,
        &#39;<li id="date"></li>&#39;,
        &#39;<li id="seconds"></li>&#39;,
        &#39;<li id="hours"></li>&#39;,
        &#39;<li id="minutes"></li>&#39;,
        &#39;</ul>&#39;].join(&#39;&#39;);
    // 逐渐显示时钟，并把它附加到主页面中    
    $(clock).fadeIn().appendTo(&#39;body&#39;);
    //每一秒钟更新时钟视图的自动执行函数
    //也可以使用此方法： setInterval (function Clock (){})();
    (function Clock() {
        //得到日期和时间
        var date = new Date().getDate(),        //得到当前日期
           hours = new Date().getHours(),       //得到当前小时
         minutes = new Date().getMinutes();        //得到当前分钟
         seconds = new Date().getSeconds(),     //得到当前秒
              ms = new Date().getMilliseconds();//得到当前毫秒
        //将当前日期显示在时钟上
        $("#date").html(date);
        //获取当前秒数，确定秒针位置
        var srotate = seconds + ms / 1000;
        $("#seconds").css({
            //确定旋转角度
            &#39;transform&#39;: &#39;rotate(&#39; + srotate * 6 + &#39;deg)&#39;,       
        });
        //获取当前分钟数，得到分针位置
        var mrotate = minutes + srotate / 60; 
        $("#minutes").css({
            &#39;transform&#39;: &#39;rotate(&#39; + mrotate * 6 + &#39;deg)&#39;,
            //提高浏览器的兼容性
            &#39;-moz-transform&#39;: &#39;rotate(&#39; + mrotate * 6 + &#39;deg)&#39;,
            &#39;-webkit-transform&#39;: &#39;rotate(&#39; + mrotate * 6 + &#39;deg)&#39;
        });
        //获取当前小时，得到时针位置
        var hrotate = hours % 12 + (minutes / 60);
        $("#hours").css({
            &#39;transform&#39;: &#39;rotate(&#39; + hrotate * 30 + &#39;deg)&#39;,
            //提高浏览器的兼容性
            &#39;-moz-transform&#39;: &#39;rotate(&#39; + hrotate * 30 + &#39;deg)&#39;,
            &#39;-webkit-transform&#39;: &#39;rotate(&#39; + hrotate * 30 + &#39;deg)&#39;
        });
        //每一秒后执行一次时钟函数
        setTimeout(Clock, 1000);
    })();
});

Copier après la connexion

Remarques :

1.Attribut Transform

Méthode 2.rotate()