zoukankan      html  css  js  c++  java
  • canvas 绘制时钟 ……

    相当的困难

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset=utf-8 />
    <title>clock</title>
    <style>
    .sz{ background:white;
    border:1px solid gray;
    border-radius:50%;
    200px;
    height:200px;
    position:relative;}
    .hours{ position:absolute;
    6px;
    height:40px;
    background-color:#000;
    left:97px; bottom:100px;
    transform-origin:bottom}
    .minutes{ position:absolute;
    4px;
    height:50px;
    background-color:#6CF;
    left:98px;
    bottom:100px;
    transform-origin:bottom}
    .seconds{ position:absolute;
    2px;
    height:70px;
    background-color:#F66;
    left:99px;
    bottom:100px;
    transform-origin:bottom}

    .one{ height:20px;
    5px;
    position:absolute;
    background-color:#633;
    left:97.5px;}
    .two{ height:20px;
    5px;
    position:absolute;
    background-color:#633;
    left:97.5px;
    top:180px;}
    .three{ 20px;
    height:5px;
    position:absolute;
    background-color:#633;
    left:0;
    top:97.5px;}
    .four{ 20px;
    height:5px;
    position:absolute;
    background-color:#633;
    left:180px;
    top:97.5px;}
    </style>
    </head>
    <body>

    <p id="pid"></p>

    <div class="sz">

    <div class="szup">
    <div id="hours" class="hours"></div>
    <div id="minutes" class="minutes"></div>
    <div id="seconds" class="seconds"></div>
    </div>
    <div class="szdown">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>

    </div>

    </div>

    </body>
    </html>
    <script>


    var colck=setInterval("Time()",100);

    function Time(){
    var mytime=new Date;
    var h=mytime.getHours();
    var m=mytime.getMinutes();
    var s=mytime.getSeconds();
    var m=math(m);
    var s=math(s);
    document.getElementById("pid").innerHTML=h+":"+m+":"+s;
    }

    function math(i){
    if(i<10){
    i="0"+i;
    }
    return i;

    }


    var yuanColck=setInterval("shizhen()",100);

    function shizhen(){
    var mytime=new Date;
    var h=mytime.getHours();
    var m=mytime.getMinutes();
    var s=mytime.getSeconds();
    var hh=document.getElementById("hours");
    var mm=document.getElementById("minutes");
    var ss=document.getElementById("seconds");

    var hds=hdeg(h,m);
    var mds=mdeg(m);
    var sds=mdeg(s);

    hh.style.transform='rotate(' + hds + 'deg)';
    mm.style.transform='rotate(' + mds + 'deg)';
    ss.style.transform='rotate(' + sds + 'deg)';

    hh.style.webkitTransform='rotate(' + hds + 'deg)';
    mm.style.webkitTransform='rotate(' + mds + 'deg)';
    ss.style.webkitTransform='rotate(' + sds + 'deg)';

    hh.style.mozkitTransform='rotate(' + hds + 'deg)';
    mm.style.mozkitTransform='rotate(' + mds + 'deg)';
    ss.style.mozkitTransform='rotate(' + sds + 'deg)';

    hh.style.oTransform='rotate(' + hds + 'deg)';
    mm.style.oTransform='rotate(' + mds + 'deg)';
    ss.style.oTransform='rotate(' + sds + 'deg)';
    }


    function hdeg(i,j){
    if(i<12){
    i=i
    }else{
    i=i-12;
    }
    i=i*30;
    j=(j/60)*30;
    return i+j;
    }


    function mdeg(i){
    i=i*6;
    return i;
    }

    </script>

  • 相关阅读:
    Python中的yield详解
    Python脚本实现图片加水印
    ajax
    商城页面的增删改查
    事务及完成转账功能
    DBUtils和完善商城页面
    EL和jstl技术
    JSP
    jquery插件
    Cookie和Session
  • 原文地址:https://www.cnblogs.com/tonykair/p/7528830.html
Copyright © 2011-2022 走看看