信息发布软件,b2b软件,广告发布软件
标题: JavaScript 网络时钟让您的网页很动态很可爱 [打印本页]
作者: 群发软件 时间: 2017-6-7 00:06
标题: JavaScript 网络时钟让您的网页很动态很可爱
各位各位，大家好哇！都见识过网页上不少种类的日历和时钟吧！
今天给各位介绍的这个“跟着鼠标跑的时钟和日历”极COOL的，准保你没见过！
只须将如下的JavaScript代码插入到你页面html的<head>区即可！
<SCRIPT language=JavaScript><BR><!--<BR>dCol=′yellow′; //定义日历颜色<BR>fCol=′#ff0000′; //定义1-12这12个数的颜色<BR>sCol=′#00ff00′; //定义秒针颜色<BR>mCol=′#0000ff′; //定义分针颜色<BR>hCol=′#ff0000′; //定义时针颜色<BR>ClockHeight=40; //定义时钟的高度<BR>ClockWidth=40; //定义时钟的宽度<BR>ClockFromMouseY=0; //定义时钟的中心距鼠标的相对垂直距离<BR>ClockFromMouseX=100; //定义时钟中心距鼠标的相对水平距离<BR>//以上颜色值你要据你页面的背景颜色进行修改！注意不要你页面的背景色一致哦。<BR>d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");<BR>m=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月",<BR>"十月","十一月","十二月"); //以上是给定星期和月份的取值范围<BR>date=new Date();<BR>day=date.getDate(); //取得当前日期命令<BR>year=date.getYear(); //取得当前年份命令<BR>if (year < 2000) year=year+1900;<BR>TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year;<BR>D=TodaysDate.split(′′); //显示“某年某月某日”<BR>H=′...′;<BR>H=H.split(′′);<BR>M=′....′;<BR>M=M.split(′′);<BR>S=′.....′;<BR>S=S.split(′′); //使秒、分、时针反向相应的位置<BR>Face=′1 2 3 4 5 6 7 8 9 10 11 12′;<BR>font=′Arial′;<BR>size=1; //定义秒、分、时针及1-12等字符的宋体、大小（最好匆改动哦）<BR>speed=0.8; //定义一旦鼠标位置发生变化时所有相关字符跟随至前面指定的鼠标的相对位置的速度，<BR>能看到各字符的轨迹，值可在0.1-1.0之间改动（值最小为0.1时跟随过来的速度最慢，值为1.0时跟随速度最快且与轨迹显示）<BR>ns=(document.layers);<BR>ie=(document.all); //说明在NS和IE两种不同浏览器里都适用<BR><BR>//以下的大段语句定义了NS和IE浏览器各自如何控制并完成时间和旋转的日历跟随鼠标转的<BR>Face=Face.split(′ ′);<BR>n=Face.length;<BR>a=size*10;<BR>ymouse=0;<BR>xmouse=0;<BR>scrll=0;<BR>props="<font face="+font+" size="+size+" color="+fCol+">";<BR>props2="<font face="+font+" size="+size+" color="+dCol+">";<BR>Split=360/n;<BR>Dsplit=360/D.length;<BR>HandHeight=ClockHeight/4.5<BR>HandWidth=ClockWidth/4.5<BR>HandY=-7;<BR>HandX=-2.5;<BR>scrll=0;<BR>step=0.06;<BR>currStep=0;<BR>y=new Array();x=new Array();Y=new Array();X=new Array();<BR>for (i=0; i < n; i++){y=0;x=0;Y=0;X=0}<BR>Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();<BR>for (i=0; i < D.length; i++){Dy=0;Dx=0;DY=0;DX=0}<BR><BR>if (ns){<BR>for (i=0; i < D.length; i++)<BR>document.write(′<layer name="nsDate′+i+′" top=0 left=0 height=′+a+′ width=′+a+′><center>′+props2+D+′</font></center></layer>′);<BR>for (i=0; i < n; i++)<BR>document.write(′<layer name="nsFace′+i+′" top=0 left=0 height=′+a+′ width=′+a+′><center>′+props+Face+′</font></center></layer>′);<BR>for (i=0; i < S.length; i++)<BR>document.write(′<layer name=nsSeconds′+i+′ top=0 left=0 width=15<BR>height=15><font face=Arial size=3 color=′+sCol+′><center><b>′+S+′</b></center></font></layer>′);<BR>for (i=0; i < M.length; i++)<BR>document.write(′<layer name=nsMinutes′+i+′ top=0 left=0 width=15<BR>height=15><font face=Arial size=3 color=′+mCol+′><center><b>′+M+′</b></center></font></layer>′);<BR>for (i=0; i < H.length; i++)<BR>document.write(′<layer name=nsHours′+i+′ top=0 left=0 width=15<BR>height=15><font face=Arial size=3 color=′+hCol+′><center><b>′+H+′</b></center></font></layer>′);<BR>}<BR><BR>if (ie){<BR>document.write(′<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">′);<BR>for (i=0; i < D.length; i++)<BR>document.write(′<div id="ieDate" style="position:absolute;top:0px;left:0;height:′+a+′;width:′+a+′;text-align:center">′+props2+D+′</font></div>′);<BR>document.write(′</div></div>′);<BR>document.write(′<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">′);<BR>for (i=0; i < n; i++)<BR>document.write(′<div id="ieFace" style="position:absolute;top:0px;left:0;height:′+a+′;width:′+a+′;text-align:center">′+props+Face+′</font></div>′);<BR>document.write(′</div></div>′);<BR>document.write(′<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">′);<BR>for (i=0; i < H.length; i++)<BR>document.write(′<div id="ieHours" style="position:absolute;width:16px;<BR>height:16px;font-family:Arial;font-size:16px;color:′+hCol+′;text-align:center;font-weight:bold">′+H+′</div>′);<BR>document.write(′</div></div>′);<BR>document.write(′<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">′);<BR>for (i=0; i < M.length; i++)<BR>document.write(′<div id="ieMinutes" style="position:absolute;width:16px;<BR>height:16px;font-family:Arial;font-size:16px;color:′+mCol+′;text-align:center;font-weight:bold">′+M+′</div>′);<BR>document.write(′</div></div>′)<BR>document.write(′<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">′);<BR>for (i=0; i < S.length; i++)<BR>document.write(′<div id="ieSeconds" style="position:absolute;width:16px;<BR>height:16px;font-family:Arial;font-size:16px;color:′+sCol+′;text-align:center;font-weight:bold">′+S+′</div>′);<BR>document.write(′</div></div>′)<BR>}<BR>(ns)?window.captureEvents(Event.MOUSEMOVE):0;<BR>function Mouse(evnt){<BR>ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):<BR>event.y+ClockFromMouseY;<BR>xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;<BR>}<BR>(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;<BR>function ClockAndAssign(){<BR>time = new Date ();<BR>secs = time.getSeconds();<BR>sec = -1.57 + Math.PI * secs/30;<BR>mins = time.getMinutes();<BR>min = -1.57 + Math.PI * mins/30;<BR>hr = time.getHours();<BR>hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;<BR>if (ie){<BR>Od.style.top=window.document.body.scrollTop;<BR>Of.style.top=window.document.body.scrollTop;<BR>Oh.style.top=window.document.body.scrollTop;<BR>Om.style.top=window.document.body.scrollTop;<BR>Os.style.top=window.document.body.scrollTop;<BR>}<BR>for (i=0; i < n; i++){<BR>var F=(ns)?document.layers[′nsFace′+i]:ieFace.style;<BR>F.top=y + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;<BR>F.left=x + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);<BR>}<BR>for (i=0; i < H.length; i++){<BR>var HL=(ns)?document.layers[′nsHours′+i]:ieHours.style;<BR>HL.top=y+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;<BR>HL.left=x+HandX+(i*HandWidth)*Math.cos(hrs);<BR>}<BR>for (i=0; i < M.length; i++){<BR>var ML=(ns)?document.layers[′nsMinutes′+i]:ieMinutes.style;<BR>ML.top=y+HandY+(i*HandHeight)*Math.sin(min)+scrll;<BR>ML.left=x+HandX+(i*HandWidth)*Math.cos(min);<BR>}<BR>for (i=0; i < S.length; i++){<BR>var SL=(ns)?document.layers[′nsSeconds′+i]:ieSeconds.style;<BR>SL.top=y+HandY+(i*HandHeight)*Math.sin(sec)+scrll;<BR>SL.left=x+HandX+(i*HandWidth)*Math.cos(sec);<BR>}<BR>for (i=0; i < D.length; i++){<BR>var DL=(ns)?document.layers[′nsDate′+i]:ieDate.style;<BR>DL.top=Dy + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;<BR>DL.left=Dx + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);<BR>}<BR>currStep-=step;<BR>}<BR>function Delay(){<BR>scrll=(ns)?window.pageYOffset:0;<BR>Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);<BR>Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);<BR>for (i=1; i < D.length; i++){<BR>Dy=Math.round(DY+=(Dy[i-1]-DY)*speed);<BR>Dx=Math.round(DX+=(Dx[i-1]-DX)*speed);<BR>}<BR>y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);<BR>x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);<BR>for (i=1; i < n; i++){<BR>y=Math.round(Y+=(y[i-1]-Y)*speed);<BR>x=Math.round(X+=(x[i-1]-X)*speed);<BR>}<BR>ClockAndAssign();<BR>setTimeout(′Delay()′,20);<BR>}<BR>if (ns||ie)window.onload=Delay;<BR>//--><BR></SCRIPT>
JS+ Html 画布实现的时钟
效果图：
闲来无聊做了一个网页的时钟，效果模拟传统时钟的运行方式，
运用了html 的画布实现指针，背景图片引用了网络图片。
具体原理：
首先将时钟分为四个不同区域，对每个区域计算cos，sin 来确实指针顶点位置。在通过画布来绘画出指针。
通过setInterval 每秒刷新指针位置实现 传统机械表针的动态跳动。
本人是JS开发程序员，从业1年多。闲来无聊的简单页面，
欢迎大家提问，或者建议。共同进步
代码部分，直接复制HTML 文件中即可查看效果：
<!DOCTYPE html><html><head> <meta charset=utf-8> <title>clock</title></head><body style="color:green; <!--background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png');--> background-size:100%; background-repeat: no-repeat; background-attachment:fixed"> <div style="width: 900px; height: 900px; margin-top: 50px; margin-left: 50px;"> <div style="position: absolute; left:119px;top: 193px; width: 900px; height: 900px; background-image:url('http://image.lxway.com/upload/b/f0/bf0d97dcee487096548e6edbc89d4963_thumb.png'); background-repeat: no-repeat; z-index: -1;"> </div> <canvas id="t" width="800" height="800"></canvas> <div style="position: absolute; left:118px;top: 464px; width: 100px; height: 200px; background-color: white; background-repeat: no-repeat; z-index: 10;"> </div> </div> <script language="javascript"> var s = setInterval(moveI, 1000); function moveI() { var c = document.getElementById("t"); var pc = c.getContext("2d"); c.height = c.height; //秒 pc.lineWidth = 3; pc.strokeStyle = 'rgba(255,0,0,0.8)'; var now = new Date(); var sindex = getxy(150, now.getSeconds()); pc.moveTo(400, 400); pc.lineTo(sindex.x, sindex.y); pc.stroke(); pc.beginPath(); //分 pc.lineWidth = 7; pc.strokeStyle = 'rgba(50,50,50,0.8)'; var mindex = getxy(120, now.getMinutes() + (now.getSeconds() / 60)); pc.moveTo(400, 400); pc.lineTo(mindex.x, mindex.y); pc.stroke(); pc.beginPath(); //时 pc.lineWidth = 10; pc.strokeStyle = 'rgba(0,0,0,0.8)'; var hindex = getxy(80, ((now.getHours() > 12 ? now.getHours() - 12 : now.getHours()) + (now.getMinutes() / 60)) * 5); pc.moveTo(400, 400); pc.lineTo(hindex.x, hindex.y); pc.stroke(); }; function getxy(r, t) { //计算分区 0,1,2,3 var a = parseInt(t / 15); //分区角度 t = t - 15 * a; var y; var x; //基于分区的坐标计算 switch (a) { case 0: y = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15))); x = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15))); break; case 1: y = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15))); x = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15))); break; case 2: y = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15))); x = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15))); break; case 3: y = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15))); x = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15))); break; default: break; } y = (400 - r) + y; x = (400 - r) + x; return { 'x': x, 'y': y }; }; </script></body></html>
作者: 万能群发 时间: 2017-6-10 12:54
我是来刷分的，嘿嘿
作者: 694012770 时间: 2017-6-10 12:59
教程很丰富，很有用。支持店主。
作者: huangge 时间: 2017-6-17 05:18
值得购买
作者: yangjiang1 时间: 2017-6-22 17:22
边弄了好几年了，可惜优惠力度一般
作者: kevin3898 时间: 2017-6-24 18:35
做网站的亲们：辛苦了，你们做事情认真负责，反应快速，你们就是现在少有的良心卖家，在这个比较扯蛋的商业环境，你们还这么出污泥而不染，难能可贵。加油笨蛋们
作者: bysqb 时间: 2017-6-29 13:08
错，虽然教程要自己学，但是技术都很热情，回答的也很及时，问题都给解决了。之前怕一付款技术就不理我了，所以故意延迟付款，但是技术人员一直都很耐心，现在想想是我太多心了，希望卖家生意兴隆！
作者: niubt 时间: 2017-7-3 08:00
家可以看看效果
作者: 小白 时间: 2017-7-3 12:52
您的帮助，优质服务，五星级别
作者: pxynmi018 时间: 2017-7-3 14:29
态度不错。
| 欢迎光临 信息发布软件,b2b软件,广告发布软件 (http://www.postbbs.com/) |
Powered by Discuz! X3.2 |