本来想在网上找一些js实例来练练手，结果发现一本书《突破JavaScript编程实例五十讲》，看了下内容还不错，就下了下来；
后面又下了该书籍的源码，一看才发现这本书编的日期是2002年的，代码运行之后，也没有效果，原因是其所用的一些语言是已经淘汰的了。于是就想，要不我把他的代码整理整理，再添加一些自己的想法在里面，顺便练练手。
在此，也对该书的作者马健兵等编著表示致敬，感谢他们的辛苦编著。如本文有侵权，立删！
由于空间的限制，就不将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 id="liveclock" >
<div id="show"></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 id=‘Current-time‘>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 id="time">
<div id="c0" class="timeNum" > </div>
<div id="c1" class="timeNum"><b>1</b></div>
<div id="c2" class="timeNum"><b>2</b></div>
<div id="c3" class="timeNum"><b>3</b></div>
<div id="c4" class="timeNum"><b>4</b></div>
<div id="c5" class="timeNum"><b>5</b></div>
<div id="c6" class="timeNum"><b>6</b></div>
<div id="c7" class="timeNum"><b>7</b></div>
<div id="c8" class="timeNum"><b>8</b></div>
<div id="c9" class="timeNum"><b>9</b></div>
<div id="c10" class="timeNum"><b>10</b></div>
<div id="c11" class="timeNum"><b>11</b></div>
<div id="c12" class="timeNum"><b>12</b></div>
<div id="pt0" > </div>
<div id="pt1" ></div>
<div id="pt2" ></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>
时间： 2024-12-10 21:47:55