|
|
软件教程首图:
软件教程分类：Java 图文教程
软件图文教程视频教程分类：软件图文教程
软件教程难易程度：软件初级教程
软件教程发布日期：2017-06-07
软件教程关键字：JavaScript 网络时钟让您的网页很动态很可爱
① 本信息收集于网络，如有不对的地方欢迎联系我纠正！
② 本信息免费收录，不存在价格的问题！
③ 如果您的网站也想这样出现在这里，请您加好友情链接，我当天会审核通过！
④友情链接关键字：软件定制网站 网址：http://www.postbbs.com
软件教程详细描述
 | |  |  | 各位各位，大家好哇！都见识过网页上不少种类的日历和时钟吧！
今天给各位介绍的这个“跟着鼠标跑的时钟和日历”极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>
| |  | |  |
|
untoJavaScript找了好久才找到的闪烁原理这次可就亮瞎眼睛了next软件群发便民网哪个软件最好用呢
|
|( 京ICP备09078825号 )
发表于 2017-6-7 00:06:47
收藏
发表于 2017-7-3 08:00:16
