本来想在网上找一些js实例来练练手，结果发现一本书《突破JavaScript编程实例五十讲》，看了下内容还不错，就下了下来；
后面又下了该书籍的源码，一看才发现这本书编的日期是2002年的，代码运行之后，有些代码可以运行，有些代码已经失效，原因是其所用的一些语言是已经淘汰的了。
其次就是由于是很早之前写的，那时候可能还没有css，js,html分离的想法，都是杂糅在一起的，看起来很不舒服。
还有就是，代码末尾都是不带分号的，还有各种不加关键字var的隐性全局变量等，都影响了程序的整洁性，简洁性。
于是就想，要不我把他的代码重新编写，来实现书中的要求。
在此，也对该书的作者马健兵等编著表示致敬，感谢他们的辛苦编著。
由于空间的限制，就不将js,css以单独文件存储了，全部都在html文件中，但已分离。
1、指定位置的时钟显示
时钟始终显示在网页的正中间，12小时制。
效果图：
源代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>指定位置的时钟</title> <style> body{ font-size: 30px; font-family: Arial; background: #fef4d9; } #Current-time{ color:#66ff00; font-size: 30px; } #liveclock{ position:absolute; top:50%; left: 50%; width: 250px; height: 100px; margin: -50px 0 0 -125px; } p{ text-align: center; color:#ff00ff; margin: 0px; } </style> </head> <body> <div > <div></div> </div> <script > function display() { var Digital=new Date(); var hours=Digital.getHours(); var minutes=Digital.getMinutes(); var seconds=Digital.getSeconds(); var dn="AM"; if(hours>12) //改成12小时制的 { dn="PM"; hours=hours-12; } if(hours==0) hours=12; if(minutes<=9) minutes="0"+minutes; //改成两位数的显示 if(seconds<=9) seconds="0"+seconds; var myclock="<b><p>Current time is:</p><p>"+hours+":"+minutes+":"+seconds+" "+dn+"</p></b>"; var liveclock=document.getElementById("liveclock"); liveclock.innerHTML=myclock; setTimeout("display()",1000); } display(); </script> </body> </html>
2、表针式时钟
由于书上的代码太老了，看不懂，自己重新写了一份。效果图如下：
源代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表针式时钟</title> <style> body{ background: #fef4d9; } #time{ position: absolute; width: 212px; height: 216px; top:50%; left: 50%; margin: -108px 0 0 -106px; border: 2px solid yellow; } .timeNum{ position: absolute; } #pt0{ position: absolute; top:20px; left: 105px; border: 4px solid red; height: 90px; z-index: 1px; } #pt1{ position: absolute; top:35px; left: 105px; border: 4px solid blue; height: 75px; z-index: 100px; } #pt2{ position: absolute; top:50px; left: 105px; border: 4px solid yellow; height: 60px; z-index: 110px; } </style> </head> <body> <div> <div > </div> <div><b>1</b></div> <div><b>2</b></div> <div><b>3</b></div> <div><b>4</b></div> <div><b>5</b></div> <div><b>6</b></div> <div><b>7</b></div> <div><b>8</b></div> <div><b>9</b></div> <div><b>10</b></div> <div><b>11</b></div> <div><b>12</b></div> <div > </div> <div ></div> <div ></div> </div> </body> <script language=javascript> function getid(id){ return document.getElementById(id); } //将数字以圆形的形式显示在屏幕上。根据三角函数的计算 function clockNum(){ for (var i=1; i<13;i++){ var c1=getid("c"+i); angle=i*30/360*Math.PI*2; c1.style.top=0+(100-Math.cos(angle)*100)+"px"; c1.style.left=100+Math.sin(angle)*100+"px"; } } function clockRotate(){ //获取当前的时间 var start= new Date(); var H=start.getHours(); var M=start.getMinutes(); var S=start.getSeconds(); //设置其旋转的角度，分针每次6度，秒针每次6度，时针每次0.5度 var mDu=M*6; var hDu=M*0.5+H*30; var sDu=S*6; var pt0=getid("pt0"); var pt1=getid("pt1"); var pt2=getid("pt2"); //设置其绕末端旋转，宽度是在中间，高度是在整个高度的末尾，采用百分数的形式 pt0.setAttribute('style',''+'transform:rotate('+ sDu +'deg); '+'transform-origin: center 93%;'); pt1.setAttribute('style',''+'transform:rotate('+ mDu +'deg); '+'transform-origin: center 94%;'); pt2.setAttribute('style',''+'transform:rotate('+ hDu +'deg); '+'transform-origin: center 95%;'); } //每隔1毫秒检测一次 setInterval(clockRotate,100); function init(){ clockNum(); } init(); </script> </html>
3、带按钮开关的form时钟
采用按钮的形式进行控制，按下开，显示时间和日期，按下关，则清空。效果图如下
源代码：