您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现钟表案例
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titl......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <metahttp-equiv="X-UA-Compatible"content="IE=edge">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <title>Document</title>

    <style>

    .clock{

    width:600px;

    height:600px;

    margin:100pxauto;

    background:url(/image/shizhong.jpg)600px/600px;

    position:relative;

    }

    .clock.h{

    width:100%;

    height:100%;

    background:url(/image/时针.jpg)no-repeatcentercenter;

    background-size:35px;

    z-index:1;

    position:absolute;

    left:-3px;

    top:-60px;

    }

    .clock.m{

    width:100%;

    height:100%;

    background:url(/image/分针.jpg)no-repeatcentercenter;

    background-size:35px;

    z-index:2;

    position:absolute;

    left:-3px;

    top:-95px;

    }

    .clock.s{

    width:100%;

    height:100%;

    background:url(/image/秒针.jpg)no-repeatcentercenter;

    background-size:25px;

    z-index:3;

    position:absolute;

    left:-3px;

    top:-95px;

    }

    </style>

    </head>

    <body>

    <divclass="clock">

    <divclass="h"id="hour"></div>

    <divclass="m"id="min"></div>

    <divclass="s"id="second"></div>

    </div>

    </body>

    <script>

    varh=document.querySelector(".h")

    varm=document.querySelector(".m")

    vars=document.querySelector(".s")

    vars=m=h=ms=0;

    setInterval(function(){

    vardate=newDate()

    ms=date.getMilliseconds()/*现在的毫秒*/

    s=date.getSeconds()+ms/1000;

    m=date.getMinutes()+s/60;

    h=date.getHours()%12+m/60;

    /*秒针一圈360度一共60秒每秒6度*/

    second.style.transform="rotate("+s*6+"deg)"

    second.style.transformOrigin='center67%'

    /*分针一圈360度一圈走60次每分钟6度*/

    min.style.transform="rotate("+m*6+"deg)"

    min.style.transformOrigin='center67%'

    /*时针一圈360度12小时制一共走12次d每小时30度*/

    hour.style.transform="rotate("+h*30+"deg)"

    hour.style.transformOrigin='center60%'

    },30)

    </script>

    </html>

    上一篇:JavaScript实现滑块验证案例 下一篇:JS实现左右无缝轮播图代码
    发布日期:2022/1/13
    手机扫二维码直达本页
    发布时间:12:05:58
    点击:151
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022