1 <style type=
"text/css"
> 2 3 .box{ 4 width: 250px; 5 height: 130px; 6 margin: 50px auto; 7 } 8 .box li{ 9 position: relative;10 text-align: center;11 list-style-type: none;12 display: inline-block;13 width: 150px;14 height:160px;15 text-shadow:0 2px 1px #f4f4f4;16 border:1px solid #9fa2ad;17 border-radius: 5px;18 margin-right:10px;19 background: -webkit-gradient(linear,0 0, 0 100%,20 color-stop(.2,rgba(248,248,248,.3)),21 color-stop(.5,rgba(168,173,190,.5)),22 color-stop(.51,rgba(168,173,190,.3)),23 color-stop(.9,rgba(248,248,248,.2)));24 background: -webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);25 background: -moz-linear-gradient(top, rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);26 background: -o-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);27 background: -ms-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);28 background: linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);29 box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;30 }31 .box li:before,32 .box li:after{33 display: block;34 content:
""
;35 position: absolute;36 width: 150px;37 }38 .box li:before{39 top:50%;40 height: 1px;41 width:62px;
42 box-shadow: 0 1px 0 #868995,0 2px 1px #fff;43 }44 .box li:after{45 bottom: -65px;46 height: 60px;47 border-radius:0 0 5px 5px;48 background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));49 background: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));50 background: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));51 background: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));52 background: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));53 background: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));54 z-index: 155 }56 .box li span:first-child{57 font:60px
'BitstreamVeraSansMonoBold'
;
58 color: #52555a;59 display: block;60 height: 130px;61 line-height: 150px;62 }63 </style>64 65 <div
class
=
"box"
><ul style=
" margin-left: 0px;"
>66 <li style=
" width: 62px; margin-right: 2px;"
><span id=
"hour"
>10</span><span>时</span></li>
67 <li style=
" width: 62px; margin-right: 2px;"
><span id=
"minute"
>37</span><span>分</span></li>68 <li style=
" width: 62px; margin-right: 2px;"
><span id=
"second"
>13</span><span>秒</span></li>69 </ul>70 </div>71 72 <script type=
"text/javascript"
>73
var
hour=document.getElementById(
'hour'
);74
var
minute=document.getElementById(
'minute'
);75
var
second=document.getElementById(
'second'
);76
function
showTime(){77
var
oDate=
new
Date
();78
var
iHours=oDate.getHours();79
var
iMinute=oDate.getMinutes();80
var
iSecond=oDate.getSeconds();81 hour.innerHTML=AddZero(iHours);82 minute.innerHTML=AddZero(iMinute);83 second.innerHTML=AddZero(iSecond);84 }85 showTime();86 setInterval(showTime,1000);87
function
AddZero(n){88
if
(n<10){89
return
'0'
+n;90 }91
return
''
+n;92 }93 </script>