js css 钟表

HTML 结构

<div id="wrap">
    <ul id="list">
        // 使用JavaScript动态生成时钟的刻度
        <!-- 这里将使用JavaScript动态生成时钟的刻度 -->
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div class="ico"></div>
</div>

JavaScript 逻辑

    // 获取页面中的元素
    var oList = document.getElementById("list");
    var oCss = document.getElementById("css");
    var oHour = document.getElementById("hour");
    var oMin = document.getElementById("min");
    var oSec = document.getElementById("sec");
    var aLi = "";
    var sCss = "";

    // 生成60个刻度，并设置每个刻度的旋转角度
    for(var i=0;i<60;i++)
    {
        sCss += "#wrap ul li:nth-of-type("+(i+1)+"){ -webkit-transform:rotate("+i*6+"deg);}";
        aLi += "<li></li>";
    }

    // 将生成的刻度添加到页面中
    oList.innerHTML = aLi;
    if (oCss) {
        oCss.innerHTML += sCss;
    }

    // 每隔1秒更新时针、分针、秒针的位置
    setInterval(toTime,1000);

    // 初始化时钟的状态
    toTime();

    // 更新时钟的状态函数
    function toTime()
    {
        var oDate = new Date();
        var iSec = oDate.getSeconds();
        var iMin = oDate.getMinutes() + iSec/60;
        var iHour = oDate.getHours() + iMin/60;
        oSec.style.WebkitTransform = "rotate("+iSec*6+"deg)";
        oMin.style.WebkitTransform = "rotate("+iMin*6+"deg)";
        oHour.style.WebkitTransform = "rotate("+iHour*30+"deg)";
    };

css代码

     /* 设置外层包裹元素的样式 */
    #wrap{
      width:200px;
      height:200px;
      border:2px solid #000;
      margin:100px auto;
      border-radius:50%;  /* 边框为圆形 */
      position:relative;  /* 设置为相对定位 */
    }
    /* 设置列表的基本样式 */
    #wrap ul{
      margin:0;
      padding:0;
      height:200px;
      position:relative;
      list-style:none;  /* 去除列表前的小圆点 */
    }
    /* 设置每个刻度的基本样式 */
    #wrap ul li{
      width:2px;
      height:6px;
      background:#000;
      position:absolute;
      left:99px;
      top:0;
      -webkit-transform-origin:center 100px;  /* 设置旋转的中心点 */
    }
    /* 每隔5个刻度，设置刻度的高度为12px */
    #wrap ul li:nth-of-type(5n+1){
      height:12px;
    }
    /* 设置时针的样式 */
    #hour{
      width:6px;
      height:45px;
      background:#000;
      position:absolute;
      left:97px;
      top:55px;
      -webkit-transform-origin:bottom;  /* 设置旋转的中心点为底部 */
    }
    /* 设置分针的样式 */
    #min{
      width:4px;
      height:65px;
      background:#999;
      position:absolute;
      left:98px;
      top:35px;
      -webkit-transform-origin:bottom;
    }
    /* 设置秒针的样式 */
    #sec{
      width:2px;
      height:80px;
      background:red;
      position:absolute;
      left:99px;
      top:20px;
      -webkit-transform-origin:bottom;
    }
    /* 设置中心点的样式 */
    .ico{
      width:20px;
      height:20px;
      background:#000;
      border-radius:50%;  /* 边框为圆形 */
      position:absolute;
      left:90px;
      top:90px;
    }