怎样用HTML5制作旋转时钟
2018-03-31 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省（部）级重点计算机专业学校，采用三元化管理模式，教学设备先进，师资雄厚学生毕业即就业，学院引进了电商企业入驻，创建心为电商创业园区，实现在校即创业
向TA提问
关注
![]()
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:206px;height:206px; margin:80px auto; position:relative;}
#dial{height:200px;border:3px solid #000; border-radius:103px; position:relative;}
#box span{ width:2px;height:6px;background:#666; position:absolute;left:99px;top:0;-webkit-transform-origin:0 100px;}
#hand{ width:12px;height:12px; position:absolute;left:97px;top:97px;}
#hour{ width:4px; height:45px;background:#000; position:absolute;left:4px;bottom:6px; -webkit-transform-origin:bottom;}
#min{width:2px;height:60px;background:#666; position:absolute;left:5px;bottom:6px;-webkit-transform-origin:bottom;}
#sec{width:2px;height:75px;background:red; position:absolute;left:5px;bottom:6px;-webkit-transform-origin:bottom;}
#centre{height:12px;border-radius:9px;background:#000; position:relative;}
#dial span:nth-of-type(5n+1){height:10px;background:#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=0;i<60;i++)
{
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>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
