ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で「Creative Clock」プロジェクトを実装

JavaScript で「Creative Clock」プロジェクトを実装

一个新手オリジナル: 2018-05-30 14:36:522287ブラウズ

「時計表示プロジェクト」説明文書 (ドキュメント末尾に対応するコード)

1. 最終的な効果の表示:

2. プロジェクトのハイライト

1.クリア

2. 現在の時刻と日付をリアルタイムで動的に表示できます

3. インターフェースはシンプルで美しく、寛大です

3. 知識ポイントのまとめ:

jQuery、native javascript、css3、h5

4. 重要な点と難しい点の説明

1. 各ポインターの回転角度を取得するには

まず、次の概念を明確にする必要があります。時計の針は円を描くように 360 度回転します

時針:

1 時間が経過するたびに、文字盤には合計 12 時間が表示されます

分針:

文字盤には 60 個の小さなグリッドがあり、分針は 1 分ごとに 6 度回転します。小さなグリッド内を移動すると、6 度回転します

(1) 現在時刻を取得します

例を示します (時針の回転角度の計算を例にします):現在の時刻は 9:28 です。時針は 9 から 10 の間である必要があり、 メソッドで取得できるのは時間のみであるため、現在の時刻を取得する必要があります。また、現在の分も取得する必要があります。

(2) 回転角度を取得する

時針は 1 時間ごとに 30 度回転するため、時針の回転角度は時針は次のように求められます。

同様に、長針と秒針の回転角度は次のようになります。

分針：

秒針：

時計をより正確にします。精度はミリ秒です

(3) 実行頻度、つまり秒針の回転数の制御

関数の実行時間間隔を調整することで、秒針の回転数を変更できます。

5. 最適化されるプロジェクト領域

1.このページはシンプルすぎるため、さらなる最適化と改善が必要です

2.絵を描くときに時計に分と秒を描く時間はありません

6. プロジェクトの各部分のコード

1.HTML コード

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

2.css コード

*
{
    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;
}

View Code

3. js コード

(1) js リファレンスパッケージをダウンロードする必要があります (Baidu または Google でわかります)

(2) js コード

$(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);
    })();
});

4. いくつかの必要な画像素材 (c はリストまたは表示されません)ここで一人)

注:

1.Transform プロパティ

2.rotate() メソッド

以上がJavaScript で「Creative Clock」プロジェクトを実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：angular2 パッケージ化された Android APP 環境を構築する方法次の記事：angular2 パッケージ化された Android APP 環境を構築する方法

続きを見る

JavaScript で「Creative Clock」プロジェクトを実装

1. 最終的な効果の表示:

2. プロジェクトのハイライト

(1) js リファレンス パッケージをダウンロードする必要があります (Baidu または Google でわかります)

関連記事

(1) js リファレンスパッケージをダウンロードする必要があります (Baidu または Google でわかります)