<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
#myTime {
color: white
border-style: solid
background-color: black
width: 200
height: 200
text-align: center
font-family: "agency fb"
}
#hm {
color: white
text-align: center
font-style: bold
font-size: 40px
}
#other {
color: white
text-align: center
}
</style>
<script language="javascript">
function showTime()
{
var theMoment = new Date()
var theHour = theMoment.getHours()
var theMinute = theMoment.getMinutes()
var hm = document.getElementById("hm")
hm.innerHTML = theHour + "<br/>" + theMinute
var other = document.getElementById("other")
other.innerHTML = theMoment.getSeconds()
}
var handler = window.setInterval('showTime()',1000)
</script>
</head>
<body>
<div id="myTime">
<div id="hm">
</div>
<span id="other">
</span>
</div>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload() }, 500) })</script></body>
</html>
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:206pxheight:206px margin:80px auto position:relative}
#dial{height:200pxborder:3px solid #000 border-radius:103px position:relative}
#box span{ width:2pxheight:6pxbackground:#666 position:absoluteleft:99pxtop:0-webkit-transform-origin:0 100px}
#hand{ width:12pxheight:12px position:absoluteleft:97pxtop:97px}
#hour{ width:4px height:45pxbackground:#000 position:absoluteleft:4pxbottom:6px -webkit-transform-origin:bottom}
#min{width:2pxheight:60pxbackground:#666 position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}
#sec{width:2pxheight:75pxbackground:red position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}
#centre{height:12pxborder-radius:9pxbackground:#000 position:relative}
#dial span:nth-of-type(5n+1){height:10pxbackground:#000}
</style>
<script>
window.onload=function()
{
var oDial=document.getElementById("dial")
var oHour=document.getElementById("hour")
var oMin=document.getElementById("min")
var oSec=document.getElementById("sec")
toDial(oDial)
toTime(oHour,oMin,oSec)
setInterval(function(){
toTime(oHour,oMin,oSec)
},1000)
}
function toTime(oHour,oMin,oSec)
{
var oDate=new Date()
var iSec=oDate.getSeconds()
var iMin=oDate.getMinutes()+iSec/60
var iHour=(oDate.getHours()%12)+iMin/60
oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)"
oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)"
oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)"
}
function toDial(obj)
{
var sHtml=""
var iDeg=6
for(var i=0i<60i++)
{
sHtml+="<span style='-webkit-transform:rotate("+iDeg*i+"deg)'></span>"
}
obj.innerHTML=sHtml
}
</script>
</head>
<body>
<div id="box">
<div id="dial">
</div>
<div id="hand">
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="centre"></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）