js绘制圆形时钟

Posted 2020-09-18 JaydenLD@Clara

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js绘制圆形时钟相关的知识，希望对你有一定的参考价值。

纯js制作圆形时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background: grey;
        }
        .box{
            width:320px;
            height: 320px;
            border: 5px solid darkred;
            border-radius: 160px;
            position: relative;
            margin:50px auto;
        }
        h2{
            width:500px;
            text-align: center;
            color: #FF2728;
            margin: 50px auto;
            border:5px groove darkgoldenrod;
        }
        #hour{
            width:3px;
            height:50px;
            background: red;
            position: absolute;
            top:100px;
            left:50%;
            transform-origin: left bottom;
        }
        #min{
            width:2px;
            height:100px;
            background: blue;
            position: absolute;
            top:50px;
            left:50%;
            transform-origin: left bottom;
        }
        #sed{
            width:1px;
            height:150px;
            background: yellow;
            position: absolute;
            left:50%;
            transform-origin: left bottom;
        }
        #point{
            width:16px;
            height: 16px;
            border-radius: 8px;
            background: black;
            position: absolute;
            top:144px;
            left:152px;
        }
        span{
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            background: #fff;
            border-radius: 8px;
            font-weight: bold;
            position: absolute;
        }
        span:nth-of-type(1){
            left:232px;
        }
        span:nth-of-type(2){
            top:72px;
        }
        span:nth-of-type(3){
            left:312px;
            top:152px;
        }
        span:nth-of-type(4){
            top:232px;
        }
        span:nth-of-type(5){
            left:232px;
        }
        span:nth-of-type(6){
            left:152px;
            top:312px;
        }
        span:nth-of-type(7){
            left:72px;
        }
        span:nth-of-type(8){
            top:232px;
        }
        span:nth-of-type(9){
            top:152px;
            left:-8px;
        }
        span:nth-of-type(10){
            top:72px;
        }
        span:nth-of-type(11){
            left:72px;
        }
        span:nth-of-type(12){
            left:152px;
            top:-8px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {
            show();
            setInterval(show,1000);
            function show() {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var hour = date.getHours();
                var d = null;
                var g = null;
                if(hour>12){
                    g=hour-12;
                    d="PM";
                }else {
                    g=hour;
                    d="AM";
                }
                var h2= document.getElementsByTagName("h2")[0];
                var min = date.getMinutes();
                var sed = date.getSeconds();
                h2.innerHTML="当前时间为："+year+"年"+month+"月"+day+"日"+g+":"+min+":"+sed+d;
                var hour1 = document.getElementById("hour");
                var min1 = document.getElementById("min");
                var sed1 = document.getElementById("sed");
                var t= g*30+min*0.5;
                var s = min*6+sed*0.1;
                hour1.style="transform:rotate("+t+"deg)";
                min1.style="transform:rotate("+s+"deg)";
                sed1.style="transform:rotate("+sed*6+"deg)";
            }
            var span = document.getElementsByTagName("span");
            var x = Math.sqrt(3)
            span[0].style="top:"+(152-80*x)+"px";
            span[1].style="left:"+(152+80*x)+"px";
            span[3].style="left:"+(152+80*x)+"px";
            span[4].style="top:"+(152+80*x)+"px";
            span[6].style="top:"+(152+80*x)+"px";
            span[7].style="left:"+(152-80*x)+"px";
            span[9].style="left:"+(152-80*x)+"px";
            span[10].style="top:"+(152-80H5之canvas-绘制动态时钟
 程序员教你如何用canvas自适应圆形时钟绘制
 createjs 绘制圆形图片
 H5 canvas圆形的时钟
 如何重新加载圆形进度条
 js+html5实现canvas绘制椭圆形图案的方法