zoukankan      html  css  js  c++  java
  • 简易时钟

    这是我根据计时器做出来的一个简易时钟

    首先是html代码

    <div class="watch">
    <span class="dot"></span>
    <span id="second"></span>
    <span id="minutse"></span>
    <span id="hours"></span>
    </div>

    接下来是css代码

    .watch {
    position: relative;
    200px;
    height: 200px;
    margin: 100px auto;
    border-radius: 50%;

    background: url(img/1.jpg) ;
    background-size: 100% 100%;
    }
    .watch .dot {
    position: absolute;
    top: 97px;
    left: 97px;
    6px;
    height: 6px;
    border-radius:50%;
    background-color: #666;
    }
    #second {
    position: absolute;
    top: 10px;
    left: 100px;
    1px;
    height: 120px;
    background-color: #ccc;
    transform-origin: 1px 90px;

    }
    #minutse{
    position: absolute;
    top: 30px;
    left: 100px;
    1px;
    height: 100px;
    background-color: #ccc;
    transform-origin: 1px 70px;
    }
    #hours{
    position: absolute;
    top: 40px;
    left: 100px;
    1px;
    height: 90px;
    background-color: #ccc;
    transform-origin: 1px 60px;
    }

    接下来是最重要的js代码了

    function clock(){
    var d=new Date();//获取当前的时间
    var s=d.getSeconds();//取出秒数
    var m=d.getMinutes();//取出分
    var h=d.getHours();//取出时
    second.style.transform="rotate("+s*6+"deg)";
    minutse.style.transform="rotate("+m*6+"deg)";
    hours.style.transform="rotate("+h*30+"deg)";
    //创建一个计时器
    var timer=setInterval(
    // clearInterval (timer)
    function(){
    var d=new Date();
    var s=d.getSeconds();
    var m=d.getMinutes();
    var h=d.getHours();
    second.style.transform="rotate("+s*6+"deg)";//每秒转6度
    minutse.style.transform="rotate("+m*6+"deg)";//每分转6度
    hours.style.transform="rotate("+h*30+"deg)"; //每小时转30度
    },1000
    )
    }
    clock();

  • 相关阅读:
    抓包的原理
    在ASP.NET MVC中使用JQ插件datatable
    如何禁用Visual Studio 2013的Browser Link功能
    SVN中tag branch trunk用法详解
    ASP.NET MVC和jQuery DataTable整合
    随便看的
    SQL查询今天、昨天、7天内、30天
    在DataTable数据类型最后增加一列,列名为“Column”,内容都为“AAA”
    validform表单验证插件最终版
    context.Session[“xxx”]详解
  • 原文地址:https://www.cnblogs.com/xiaocuncheng/p/8351812.html
Copyright © 2011-2022 走看看