课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > JS时钟代码分享(中)
  • JS时钟代码分享(中)

    发布:昆明Java培训      来源:SegmentFault      时间:2016-07-30

  • 上一篇文章中,达内Java培训的小编给大家分享了用JS实现时钟效果的第一部分代码,接下来我们来看CSS部分的代码。这组代码需要细心一些才能完成的更好。一起来看看吧。

    CSS:

    *{

    padding:0;

    margin:0;

    }

    html, body {

    height: 100%;

    background: #9c9;

    }

    #warp{

    width:230px;

    height:230px;

    margin:50px auto;

    }

    #clock{

    width:200px;

    height:200px;

    border-radius:115px;

    border:15px solid #f96;

    background:white;

    position:relative;

    }

    #number div{

    width:190px;

    height:20px;

    position:absolute;

    left:10px;

    top:90px;

    }

    #number span{

    display:block;

    width:20px;

    height:20px;

    }

    .pointer{

    position:absolute;

    bottom:90px;

    transform-origin:50% 90%;

    -webkit-transform-origin:50% 90%;

    }

    #houre{

    width:5px;

    height:60px;

    left:98px;

    background:black;

    }

    #minute{

    width:3px;

    height:70px;

    left:99px;

    background:gray;

    }

    #second{

    width:1px;

    height:80px;

    left:100px;

    background:red;

    }

    这里要注意的是number里面div的宽度给够,要不然后面用JS布局会出现问题。

    达内Java培训的小编在这里要提醒各位:这组代码要给后面的JS打好基础,所以要格外细心噢。

    推荐文章

上一篇:JS时钟代码分享(上)

下一篇:JS时钟代码分享(下)

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:12/29

Java--零基础业余班

Java--零基础业余班

开班日期:12/29

Java--周末提升班

Java--周末提升班

开班日期:12/29

Java--零基础周末班

Java--零基础周末班

开班日期:12/29

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56