昆明java培训
达内昆明广州春城路

18487146383

热门课程

JS时钟代码分享(中)

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

上一篇文章中,达内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时钟代码分享(下)

达内培训小米MIX 2尊享版工艺精湛

程序猿教你java的创建和销毁对象

昆明java培训-程序猿带你入门到精通

昆明达内-有趣的轻量级图像浏览器

选择城市和中心
贵州省

广西省

海南省