[html代码收集]圆形钟表

崔健发表于源码 2013-11-30 23:47:20 -0500

<html>圆形钟表

2013-11-02 10:56:43

代码演示：

代码复制:

<script type="text/javascript">
function init(){  
clock();  
setInterval(clock,1000);  
}  
function clock(){  
	  var now = new Date();  
	  var ctx = document.getElementById('canvas').getContext('2d');  
	  ctx.save();  
	  ctx.clearRect(0,0,150,150);  
	  ctx.translate(75,75);  
	  ctx.scale(0.4,0.4);  
	  ctx.rotate(-Math.PI/2);  
	  ctx.strokeStyle = "black";  
	  ctx.fillStyle = "white";  
	  ctx.lineWidth = 8;  
	  ctx.lineCap = "round";  
	  ctx.save();  
	  for (var i=0;i<12;i++){  
		ctx.beginPath();  
		ctx.rotate(Math.PI/6);  
		ctx.moveTo(100,0);  
		ctx.lineTo(120,0);  
		ctx.stroke();  
	  }  
	  ctx.restore();  
	  ctx.save();  
	  ctx.lineWidth = 5;  
	  for (i=0;i<60;i++){  
		if (i%5!=0) {  
		  ctx.beginPath();  
		  ctx.moveTo(117,0);  
		  ctx.lineTo(120,0);  
		  ctx.stroke();  
		}  
		ctx.rotate(Math.PI/30);  
	  }  
	  ctx.restore();  	
	  var sec = now.getSeconds();  
	  var min = now.getMinutes();  
	  var hr  = now.getHours();  
	  hr = hr>=12 ? hr-12 : hr;  
	  ctx.fillStyle = "black";  
	  ctx.save();  
	  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )  
	  ctx.lineWidth = 14;  
	  ctx.beginPath();  
	  ctx.moveTo(-20,0);  
	  ctx.lineTo(80,0);  
	  ctx.stroke();  
	  ctx.restore();  
	  ctx.save();  
	  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )  
	  ctx.lineWidth = 10;  
	  ctx.beginPath();  
	  ctx.moveTo(-28,0);  
	  ctx.lineTo(112,0);  
	  ctx.stroke();  
	  ctx.restore();  
	  ctx.save();  
	  ctx.rotate(sec * Math.PI/30);  
	  ctx.strokeStyle = "#D40000";  
	  ctx.fillStyle = "#D40000";  
	  ctx.lineWidth = 6;  
	  ctx.beginPath();  
	  ctx.moveTo(-30,0);  
	  ctx.lineTo(83,0);  
	  ctx.stroke();  
	  ctx.beginPath();  
	  ctx.arc(0,0,10,0,Math.PI*2,true);  
	  ctx.fill();  
	  ctx.beginPath();  
	  ctx.arc(95,0,10,0,Math.PI*2,true);  
	  ctx.stroke();  
	  ctx.fillStyle = "#555";  
	  ctx.arc(0,0,3,0,Math.PI*2,true);  
	  ctx.fill();  
	  ctx.restore();   
	  ctx.beginPath();  
	  ctx.lineWidth = 14;  
	  ctx.strokeStyle = '#325FA2';  
	  ctx.arc(0,0,142,0,Math.PI*2,true);  
	  ctx.stroke();  
	  ctx.restore();  
}  
</script>
<body onload="init();">
<canvas id="canvas" width="150" height="150"></canvas> /TEXTAREA></div><br /></div>

<script type="text/javascript">
(function(){
var p = {
url:location.href,
showcount:'1',/*是否显示分享总数,显示：'1'，不显示：'0' */
desc:'',/*默认分享理由(可选)*/
summary:'',/*分享摘要(可选)*/
title:'',/*分享标题(可选)*/
site:'',/*分享来源 如：腾讯网(可选)*/
pics:'', /*分享图片的路径(可选)*/
style:'101',
width:199,
height:30
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a version="1.0" class="qzOpenerDiv" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank">分享</a>'].join(''));
})();
</script>
<script src="http://qzonestyle.gtimg.cn/qzone/app/qzlike/qzopensl.js#jsdate=20111201" charset="utf-8"></script>

<script type="text/javascript">
(function(){
var p = {
url:location.href, /*获取URL，可加上来自分享到QQ标识，方便统计*/
desc:'这款软件太好用了太好用了', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
title:'我的磨分享', /*分享标题(可选)*/
summary:'你也来试试', /*分享摘要(可选)*/
pics:'', /*分享图片(可选)*/flash: '', /*视频地址(可选)*/
site:'http://allall02.baidupcs.com/file/b5c306db5f4168bb7166f5733b503c3d?bkt=p3-1400b5c306db5f4168bb7166f5733b503c3de0adc7eb000000113f22&fid=3293427827-250528-839874412468551&time=1457793880&sign=FDTAXGERLBH-DCb740ccc5511e5e8fedcff06b081203-dT1jNK%2F3LWh79wmVIUH12jcMX5Q%3D&to=ib&fm=Yan,B,M,mn&sta_dx=1&sta_cs=0&sta_ft=apk&sta_ct=0&fm2=Yangquan,B,M,mn&newver=1&newfm=1&secfm=1&flow_ver=3&pkey=1400b5c306db5f4168bb7166f5733b503c3de0adc7eb000000113f22&sl=76480590&expires=1457794480&rt=sh&r=116460831&mlogid=1668670281359785247&sh=1&vuk=-&vbdid=3356683994&fin=com.SunLife.qingyi.apk&fn=com.SunLife.qingyi.apk&slt=pm&uta=0&rtype=1&iv=0&isw=0&dp-logid=1668670281359785247&dp-callid=0.1.1', /*分享来源(可选) 如：QQ分享*/style:'101',
width:96,
height:24
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a class="qcShareQQDiv" href="http://connect.qq.com/widget/shareqq/index.html?',s.join('&'),'" target="_blank">分享到QQ</a>'].join(''));
})();
</script>
<script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script>

<div class="wo-entry-prev-next"><a href="/entry/246669" title="我的磨调用JS和HTML部分命令">«Newer</a>      <a href="/entry/244453" title="崔健社区客户端">Older»</a></div>
<form method="POST" action="https://s.wodemo.com/"><input type="hidden" name="act" value="file_talk" /><input type="hidden" name="fid" value="244867" />Comment:<br /><textarea name="content" cols="15" rows="3" class="wo-reply-textarea">

Name:

Back to home

Subscribe | Register | Login | N