站长资源网页制作
html5时钟实现代码
简介复制代码代码如下: 时钟</ti</div>
<div class="news_infos"><div id="MyContent"><br><u>复制代码</u>代码如下:<br><!DOCTYPE HTML><br><html><br><head><br> <meta charset="UTF-8"><br> <style type="text/css"><br> canvas{position:absolute;top:0px;left:0px;}<br> </style><br> <title>时钟</title><br></head><br><body><br> <canvas id="canvas" width="200" height="200"></canvas><br> <canvas id="p_canvas" width="200" height="200"></canvas><br> <script type="text/javascript"><br> //获取绘图对象<br> var canvas = document.getElementById('canvas');<br> var context = canvas.getContext('2d'); <br> <br> var p_canvas = document.getElementById('p_canvas');<br> var p_context = p_canvas.getContext('2d');<br> <br> var height=200,width=200;<br> //画大圆 <br> context.beginPath();<br> context.strokeStyle="#009999";<br> context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true);<br> context.stroke();<br> context.closePath();<br> //画中间点<br> context.beginPath();<br> context.fillStyle="#000";<br> context.arc(width/2,height/2,3,0,Math.PI*2,true);<br> context.fill();<br> context.closePath();<br> <br> //画小刻度<br> var angle = 0,radius = width/2 - 4; <br> for(var i=0;i<60;i++){<br> context.beginPath();<br> context.strokeStyle="#000";<br> //确认刻度的起始点<br> var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle); <br> context.moveTo(x,y);<br> //这里是用来将刻度的另一点指向中心点，并给予正确的角度<br> //PI是180度，正确的角度就是 angle+180度，正好相反方向<br> var temp_angle = Math.PI +angle; <br> context.lineTo(x +3*Math.cos(temp_angle),y+3*Math.sin(temp_angle));<br> context.stroke();<br> context.closePath();<br> angle+=6/180*Math.PI;<br> }<br> //大刻度<br> angle = 0,radius = width/2 - 4; <br> context.textBaseline = 'middle';<br> context.textAlign = 'center';<br> context.lineWidth = 2;<br> for(var i=0;i<12;i++){<br> var num = i+3>12? i+3-12:i+3 ; <br> context.beginPath();<br> context.strokeStyle="#FFD700";<br> var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle); <br> context.moveTo(x,y);<br> var temp_angle = Math.PI +angle; <br> context.lineTo(x +8*Math.cos(temp_angle),y+8*Math.sin(temp_angle));<br> context.stroke();<br> context.closePath();<br> //大刻度 文字<br> context.fillText(num,x+16*Math.cos(temp_angle),y+16*Math.sin(temp_angle));<br> angle+=30/180*Math.PI;<br> }<br> <br> function Pointer(){<br> var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3]];<br> function drwePointer(type,angle){<br> type = p_type[type];<br> angle = angle*Math.PI*2 - 90/180*Math.PI; <br> var length= type[1];<br> p_context.beginPath();<br> p_context.lineWidth = type[2];<br> p_context.strokeStyle = type[0];<br> p_context.moveTo(width/2,height/2); <br> p_context.lineTo(width/2 + length*Math.cos(angle),height/2 + length*Math.sin(angle)); <br> p_context.stroke();<br> p_context.closePath();<br> <br> }<br> setInterval(function (){<br> p_context.clearRect(0,0,height,width);<br> var time = new Date();<br> var h = time.getHours();<br> var m = time.getMinutes();<br> var s = time.getSeconds(); <br> h = h>12?h-12:h;<br> h = h+m/60; <br> h=h/12;<br> m=m/60;<br> s=s/60;<br> drwePointer(0,s);<br> drwePointer(1,m);<br> drwePointer(2,h); <br> },500);<br> }<br> var p = new Pointer();<br> </script><br></body><br></html><br></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/69788.html" title="HTML5 本地存储和内容按需加载的思路和方法">HTML5 本地存储和内容按需加载的思路和方法</a></p>
<p>下一篇：<a href="/3g/1/69790.html" title="html5 canvas 使用示例 ">html5 canvas 使用示例 </a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>