制作一个12小时时钟

62 阅读 0 评论 41 点赞

我是靠谱客的博主落后书包，最近开发中收集的这篇文章主要介绍制作一个12小时时钟，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #c1 {
            background: #FFF;
        }

        #wrap {
            width: 400px;
            height: 210px;
            background: #999;
            text-align: center;
        }

        .text {
            width: 400px;
            height: 70px;
            font-size: 40px;
        }
    </style>
    <script>
        //获取并显示时间
        function timeCount() {
            var aText = document.getElementsByClassName('text');
            var oDate = new Date();
            var oYear = oDate.getFullYear();
            var oMonth = checkNum(oDate.getMonth() + 1);
            var oDay = checkNum(oDate.getDate());
            aText[0].innerHTML = oYear + "年" + oMonth + "月" + oDay + "日";

            var oWeek = oDate.getDay();
            var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            aText[1].innerHTML = weekday[oWeek];

            var oHour = checkNum(oDate.getHours());
            var oMin = checkNum(oDate.getMinutes());
            var oSec = checkNum(oDate.getSeconds());
            var noon;
            if (oHour > 12) {
                noon = 'PM';
                oHour = oHour - 12;
            } else {
                noon = 'AM';
            }
            aText[2].innerHTML = oHour + ":" + oMin + ":" + oSec + "&nbsp;" + noon;
            setTimeout(timeCount, 1000);
        }

        //检查时间，为个位数补0
        function checkNum(num) {
            if (num < 10) {
                num = '0' + num;
            }
            return num;
        }

        //画图
        function toDraw() {
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
            oGC.clearRect(0, 0, oC.width, oC.height);
            var x = 200;
            var y = 200;
            var r = 150;
            var oDate = new Date();
            var oHour = oDate.getHours();
            var oMin = oDate.getMinutes();
            var oSec = oDate.getSeconds();
            var oHourValue = (-90 + oHour * 30 + (oMin * 6 + oSec / 10) / 12) * Math.PI / 180;
            var oMinValue = (-90 + oMin * 6 + oSec / 10) * Math.PI / 180;
            var oSecValue = (-90 + oSec * 6) * Math.PI / 180;

            oGC.beginPath();
            for (var i = 0; i < 60; i++) {
                oGC.moveTo(x, y);
                oGC.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, 0)
            }

            oGC.closePath();
            oGC.stroke();

            oGC.fillStyle = 'white';
            oGC.beginPath();
            oGC.moveTo(x, y);
            oGC.arc(x, y, r * 19 / 20, 0, 360 * (i + 1) * Math.PI / 180, 0)

            oGC.closePath();
            oGC.fill();

            oGC.lineWidth = '3';
            oGC.beginPath();
            for (var i = 0; i < 12; i++) {
                oGC.moveTo(x, y);
                oGC.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, 0)
            }

            oGC.closePath();
            oGC.stroke();

            oGC.fillStyle = 'white';
            oGC.beginPath();
            oGC.moveTo(x, y);
            oGC.arc(x, y, r * 18 / 20, 0, 360 * (i + 1) * Math.PI / 180, 0)

            oGC.closePath();
            oGC.fill();

            oGC.lineWidth = '5';
            oGC.beginPath();
            oGC.moveTo(x, y);
            oGC.arc(x, y, r * 14 / 20, oHourValue, oHourValue, 0)

            oGC.closePath();
            oGC.stroke();

            oGC.lineWidth = '3';
            oGC.beginPath();
            oGC.moveTo(x, y);
            oGC.arc(x, y, r * 16 / 20, oMinValue, oMinValue, 0)

            oGC.closePath();
            oGC.stroke();

            oGC.lineWidth = '1';
            oGC.beginPath();
            oGC.moveTo(x, y);
            oGC.arc(x, y, r * 19 / 20, oSecValue, oSecValue, 0)

            oGC.closePath();
            oGC.stroke();

            setTimeout(toDraw, 1000);
        }

        window.onload = function () {
            //显示上面部分
            timeCount();

            //显示下面部分
            toDraw();
        }
    </script>
</head>

<body>
    <div id="wrap">
        <p class="text"></p>
        <p class="text"></p>
        <p class="text"></p>
    </div>
    <canvas id="c1" width="400" height="400"></canvas>
</body>

</html>