钟表例子（css3/画布）

最新推荐文章于 2024-07-24 15:57:11 发布

花花最美腻

最新推荐文章于 2024-07-24 15:57:11 发布

阅读量363

点赞数

本文链接：https://blog.csdn.net/qq_38912819/article/details/80555298

版权

css3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

神奇的canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #container{
            width: 200px;
            height: 200px;
            border:1px solid #000;
            margin:50px auto;
            border-radius: 50%;
            position: relative;
        }
        #container li{
            width: 2px;
            height: 4px;
            background: #000000;
            position: absolute;
            left:50%;
            margin-left: -1px;
            top:0;
            -webkit-transform-origin: 1px 100px;/*起始点   会根据父元素旋转*/
        }
        #container li:nth-child(5n+1){ /*从第一个开始  每五个刻度长为8px*/
            height: 8px;
        }
        #hour{
            width: 6px;
            height: 35px;
            background: #000000;
            position: absolute;
            left:97px;
            top:65px;
            -webkit-transform-origin: 3px 35px;/*起始点*/
        }
        #minute{
            width: 4px;
            height: 45px;
            background: green;
            position: absolute;
            left:98px;
            top:55px;
            -webkit-transform-origin: 2px 45px;
        }
        #second{
            width: 2px;
            height: 55px;
            background: red;
            position: absolute;
            left:99px;
            top:45px;
            -webkit-transform-origin: 1px 55px;
        }
    </style>
</head>
<body>
<div id="container">
    <ul>
    </ul>
    <div id="hour"></div>
    <div id="minute"></div>
    <div id="second"></div>
</div>
<script>
    var oUl = document.getElementsByTagName('ul')[0];//getElementsByTagName取到的是数组 [0]取到第一个
    var oHour = document.getElementById('hour');
    var oMinute = document.getElementById('minute');
    var oSecond = document.getElementById('second');

    var sLi = '';  //定义一个字符串 存li
    for(var i=0; i<60; i++){  //循环产生六十个li
//        sLi += '<li style="-webkit-transform: rotate('+i*6+'deg)"></li>';
        sLi += `<li style="-webkit-transform: rotate(${i*6}deg)"></li>`;  //拼接字符串

    }
    oUl.innerHTML = sLi;  //添加到ul内容里

    function run(){
        var date = new Date();  //new日期对象
        var hour = date.getHours(); //获取时间
        var minute = date.getMinutes();
        var second = date.getSeconds();
        oHour.style.webkitTransform = 'rotate('+(hour*30+minute*0.5)+'deg)';  /*每小时时针转30度 一小时六十分钟 所以每分钟时针转0.5度*/
        oMinute.style.webkitTransform = 'rotate('+(minute+second/60)*6+'deg)';/*每分钟分针转6度 一分钟六十秒 所以每秒分针转0.1度*/
        oSecond.style.webkitTransform = 'rotate('+second*6+'deg)';/*每秒秒针转六度*/
    }
    run();
    setInterval(function(){ /*定时器  一秒钟执行一次 模仿clock*/
        run();
    },1000);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="cvs" width="600" height="600"></canvas>

<script>
    var oCanvas=document.getElementById('cvs');
    var oCtx=oCanvas.getContext('2d');

    oCtx.beginPath();
    for(i=0;i<60;i++){
        oCtx.moveTo(300,300);
        oCtx.arc(300,300,100,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);
    }
    oCtx.stroke();
    oCtx.closePath();

    //第一个圆
    oCtx.beginPath();
    oCtx.arc(300,300,95,0*Math.PI,2*Math.PI,false);
    oCtx.fillStyle="#fff";
    oCtx.fill();
    oCtx.closePath();

    oCtx.beginPath();
    for(i=0;i<12;i++){
        oCtx.moveTo(300,300);
//        oCtx.arc(300,300,100,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);
        oCtx.arc(300,300,95,i*30*Math.PI/180,i*30*Math.PI/180,false);/*不重新画一个圆 从当前弧度到当前弧度*/
    }
    oCtx.stroke();
    oCtx.closePath();

    //第二个圆
    oCtx.beginPath();
    oCtx.arc(300,300,90,0*Math.PI,2*Math.PI,false);
    oCtx.fillStyle="#fff";
    oCtx.fill();
    oCtx.closePath();

    run();
    setInterval(function(){
        run();
    },1000)
    function run() {
        oCtx.clearRect(230,230,140,140);

        var oDate = new Date;
        var iSeconds = oDate.getSeconds();
        var iMinutes = oDate.getMinutes() + iSeconds/60;
        var iHours = oDate.getHours() + iMinutes/60;

        //时针
        oCtx.beginPath();
        oCtx.moveTo(300,300);
        oCtx.lineWidth=5;
        oCtx.strokeStyle="green";
        oCtx.arc(300,300,40,iHours*30*Math.PI/180,iHours*30*Math.PI/180,false);/*不重新画一个圆 从当前弧度到当前弧度*/
        oCtx.stroke();
        oCtx.closePath();
        //分针
        oCtx.beginPath();
        oCtx.moveTo(300,300);
        oCtx.lineWidth=3;
        oCtx.strokeStyle="black";
        oCtx.arc(300,300,55,iMinutes*6*Math.PI/180,iMinutes*6*Math.PI/180,false);/*不重新画一个圆 从当前弧度到当前弧度*/
        oCtx.stroke();
        oCtx.closePath();
        //秒针
        oCtx.beginPath();
        oCtx.moveTo(300,300);
        oCtx.lineWidth=2;
        oCtx.strokeStyle="red";
        oCtx.arc(300,300,70,iSeconds*6*Math.PI/180,iSeconds*6*Math.PI/180,false);/*不重新画一个圆 从当前弧度到当前弧度*/
        oCtx.stroke();
        oCtx.closePath();
    }
</script>
</body>
</html>