《JavaScript从零开始学：视频教学版》试读：网页吸引人之处，莫过于具有动态效果，利用CSS伪类元素可以轻松地实现超链接的动态效果。不过利用CSS能实现的动态效果非常有限。在网页设计中，还可以将CSS与JavaScript结合创建出具有动态效果的页面。
13.1 实战演练1——打字效果的文字
文字是网页的灵魂，没有文字的网页，不管特效多么绚丽多彩也没有任何实际意义。文字特效始终是网页设计追求的目标，通过JavaScript可以实现多个网页特效。文字的打字效果是JavaScript脚本程序，将预先设置好的文字逐一在页面上显示出来，具体步骤如下所示：
分析需求。如果要在网页中实现打字效果，需要创建一个预先设置好的文字，作为输出信息。该实例完成效果如图13-1所示。
图13-1 打字效果
创建HTML页面，设置页面基本样式。
<!DOCTYPE html>
<html>
<head>
<title>打字效果的文字</title>
<style type="text/css">
body{font-size:14px;font-weight:bold;}
</style>
</head>
<body>
松风水月最新微博信息：<a id="HotNews" href="" target="_blank"></a>
</body>
</html>
上面代码中，在<head>标记中设置body页面的基本样式，例如字体大小为14px，字形加粗。并在body页面创建了一个超链接。
在IE 9.0中的浏览效果如图13-2所示，可以看到在页面中只显示了一个提示信息。
图13-2 页面基本样式
添加JavaScript代码，实现打字特效。
<SCRIPT LANGUAGE="JavaScript">
<!--
var NewsTime = 2000; //每条微博的停留时间
var TextTime = 50; //微博文字出现等待时间，越小越快
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
var newstitle = new Array(); //微博标题
var newshref = new Array(); //微博链接
newstitle[0] = "健康是身体的本钱";
newshref[0] = "#";
newstitle[1] = "关心身体，就是关心自己";
newshref[1] = "#";
newstitle[2] = "去西藏旅游了";
newshref[2] = "#";
newstitle[3] = "大雨倾盆，很大呀";
newshref[3] = "#";
function shownew()
{
var endstr = "_"
hwnewstr = newstitle[newsi];
newslink = newshref[newsi];
if(txti==(hwnewstr.length-1)){endstr="";}
if(txti>=hwnewstr.length){
clearInterval(txttimer);
clearInterval(newstimer);
newsi++;
if(newsi>=newstitle.length){
newsi = 0
}
newstimer = setInterval("shownew()",NewsTime);
txti = 0;
return;
}
clearInterval(txttimer);
document.getElementById("HotNews").href=newslink;
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;
txti++;
txttimer = setInterval("shownew()",TextTime);
}
shownew();
//-->
</SCRIPT>
因为上面代码是一个整体，这里就不分开介绍了。在以上代码中，主要调用shownew()函数完成打字效果。在JavaScript代码开始部分，定义了多个变量，其中数组对象newstitle用于存放文本标题。下面创建了shownew()函数，并在函数中通过变量和条件获取要显示的文字，通过setInterval("shownew()",NewsTime)语句输出文字内容。代码最后使用shownew()语句循环执行该函数中的输出信息。
在IE 9.0中的浏览效果如图13-3所示，可以看到页面中每隔一定时间，会在提示信息后逐个打出单个文字，字体颜色为蓝色。
图13-3 实现打字
13.2 实战演练2——文字升降特效
有的网页为了加大广告宣传力度，往往在网页上设置一个自动升降的文字，用于吸引人的注意力。当单击这个升降文字，会自动跳转到宣传页面。本实例将使用JavaScript和CSS实现文字升降效果。具体步骤如下所示。
分析需求。如果要实现文字升降效果，需要指定文字内容和文字升降范围，即在HTML页面为文字指定一个层，用于升降文字。实例完成后，实际效果如图13-4所示。
图13-4 文字升降
创建HTML，构建升降DIV层。
<!DOCTYPE html>
<html>
<head>
<title>升降的文字效果</title>
</head>
<body>
<div id="napis" style="position: absolute;top: -50;color: #000000;font-family:宋体;font-size:9pt;border:1px #ddeecc solid">
<a href="" style="font-size:12px;text-decoration:none;">
水月大酒店，欢迎天下来宾！
</a></div>
<script language="JavaScript">
<!--
setTimeout('start()',20);
//-->
</script>
</body>
</html>
上面代码创建了一个DIV层，用于存放升降的文字，层的ID名称是napis，并在层的style属性中定义了层显示样式。例如字体大小，带有边框，字形等。在DIV层中，创建了一个超链接，并设定了超链接的样式。其中的script代码用于定时调用start函数。
在IE 9.0中的浏览效果如图13-5所示，可以看到页面空白，无文字显示。
图13-5 空白页面
添加JavaScript代码，实现文字升降效果。
<script language="JavaScript">
<!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp;
else document.all["napis"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
var nap=document.getElementById("napis");
nap.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
napis.style.left=11;
anim(60,document.body.offsetHeight - 60)
}}//-->
</script>
上面代码创建了函数anim()和start()，其中anim()函数用于设定每次升降的数值，start()函数用于设定每次开始的升降坐标。在IE 9.0中的浏览效果如图13-6所示，可以看到页面中超链接自动上下移动。
图13-6 上下移动
13.3 实战演练3——跑马灯效果
网页中有一种特效称为跑马灯，即文字从左到右自动输出，和晚上写字楼的广告霓虹灯非常相似。在网页中，如果CSS样式设计非常完美，就会设计出更加靓丽的网页效果。具体步骤如下所示。
分析需求。完成跑马灯效果，需要使用JavaScript语言设置文字内容、移动速度和相应输入框，使用CSS设置显示文字样式。输入框用来显示水平移动文字。实例完成后效果如图13-7所示。
图13-7 马灯效果
创建HTML，实现输入表单效果。
<!DOCTYPE html>
<html>
<head>
<title>跑马灯</title>
</head>
<body onLoad="LenScroll()">
<center>
<form name="nextForm">
<input type=text name="lenText">
</form>
</center>
</body>
上面代码非常简单，创建了一个表单，表单中存放了一个文本域，用于显示移动文字。
在IE 9.0中的浏览效果如图13-8所示，可以看到页面中只是存在一个文本域，没有其他显示信息。
图13-8 实现基本表单
添加JavaScript代码，实现文字移动效果。
<script language="javascript">
var msg="品味中原文化，寄情黄河风景"; //移动文字
var interval = 400; //移动速度
var seq=0;
function LenScroll() {
document.nextForm.lenText.value = msg.substring(seq, msg.length) + " " + msg;
seq++;
if ( seq > msg.length )
seq = 0;
window.setTimeout("LenScroll();", interval);
}
</script>
上面代码中，创建了一个变量msg用于定义移动的文字内容，变量interval用于定义文字移动速度，LenScroll()函数用于在表单输入框中显示移动信息。在IE 9.0中的浏览效果如图13-9所示，可以看到输入框中显示了移动信息，并且从右向左移动。
图13-9 实现移动效果
添加CSS代码，修饰输入框和页面。
<style type="text/css">
<!--
body{
background-color:#FFFFFF; /* 页面背景色 */
}
input{
background:transparent; /* 输入框背景透明 */
border:none; /* 无边框 */
color:#ffb400;
font-size:45px;
font-weight:bold;
font-family:黑体;
}--></style>
上面代码设置了页面背景颜色为白色，在input标记选择器中定义了边框背景为透明，无边框，字体颜色为黄色，大小为45px，加粗并黑体显示。在IE 9.0中的浏览效果如图13-10所示，可以看到页面中相比较原来页面字体变大，颜色为黄色，没有输入框显示。
图13-10 最终效果
13.4 实战演练4——闪烁图片
图片闪烁是常用的一种特效，用JavaScript实现起来非常简单，这时需要注意时间间隔这个参数，数值越大闪烁越不连续，数值越小闪烁越历害，可以随意更改这个值，直到取得满意的效果。具体步骤如下所示：
分析需求。将图片放在一个DIV层上，设定图片为可见，然后使用JavaScript程序代码设置DIV层的显示和隐藏，这样即可达到图片的闪烁效果。实例完成后，效果如图13-11所示。
图13-11 闪烁效果
创建HTML页面，构建DIV层。
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>闪烁图片</TITLE>
</HEAD>
<BODY ONLOAD="soccerOnload()" topmargin="0">
<DIV ID="soccer" STYLE="position:absolute; left:150; top:0">
<a href="">
<IMG SRC="feng.jpg" border="0"></a>
</DIV>
</BODY>
</HTML>
上面代码中，创建一个层，其ID名称为soccer，样式为绝对定位，坐标位置在（150,0）。然后在层中创建了一个图片，不带有边框。
在IE 9.0中的浏览效果如图13-12所示，可以看到显示一个图片，不具有闪烁效果。
图13-12 图片效果
添加JavaScript代码，实现图片闪烁效果。
<SCRIPT LANGUAGE="JavaScript">
var msecs = 500; //改变时间得到不同的闪烁间隔；
var counter = 0;
function soccerOnload() {
setTimeout("blink()", msecs);
}
function blink() {
soccer.style.visibility =
(soccer.style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
setTimeout("blink()", msecs);
}
</SCRIPT>
在JavaScript代码中，创建变量msecs，用于定义闪烁时间间隔，创建变量counter用于计数。在函数soccerOnload()中设定每隔指定时间图片闪烁一次，函数blink()用于设定图片显示，即层是隐藏函数还是可见。
在IE 9.0中的浏览效果如图13-13所示，可以看到显示一个图片，在指定时间内闪烁。
图13-13 最终效果
13.5 实战演练5——左右移动的图片
在广告栏中，经常会存在从右到左移动或者从左到右移动的一张或者多张图片。不但增加了页面效果，也会相应取得取经济利益。本实例将使用JavaScript和CSS创建一个左右移动的图片。具体步骤如下所示：
分析需求。实现左右移动的图片，需要在页面上定义一张图片，然后利用JavaScript程序代码获取图片对象，并使其在一定范围内，即水平方向上自由移动。实例完成效果如图13-14所示。
图13-14 图片移动
创建HTML页面，导入图片。
<!DOCTYPE html>
<html>
<head>
<title>左右移动图片</title>
</head>
<body>
<img src="feng.jpg" name="picture"
style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40">
<script LANGUAGE="JavaScript"><!--
setTimeout("moveLR('picture',300,1)",10);
//--></script>
</body>
</html>
上面代码定义了一个图片，图片是绝对定位的，左边位置是（70,30），无边框，宽度为140px，高度为40px。在script标记中，使用setTimeout方法定时移动图片。在IE 9.0中的浏览效果如图13-15所示，可以看到网页上显示一个图片。
图13-15 图片显示
加入JavaScript代码，实现图片左右移动。
<script LANGUAGE="JavaScript"><!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//--></script>
上面代码和文字水平方向移动原理基本相同，只不过对象不同罢了，这里就不再介绍了。
在IE 9.0中的浏览效果如图13-16所示，可以看到网页上显示一个图片，并在水平方向上自由移动。
图13-16 最终效果
13.6 实战演练6——向上滚动菜单
网页包含信息比较多的时候，就需要设计出一些导航菜单来实现页面导航。如果使用JavaScript 代码，将菜单做成动态效果，此时菜单会更加吸引人。本实例将结合前面学习的内容，创建一个向上滚动的菜单。具体步骤如下：
分析需求。实现菜单自动从下到上滚动，需要把握两个元素，一个是使用JavaScript实现要滚动的菜单，即导航栏，另一个是使用JavaScript控制菜单移动方向。实例完成效果如图13-17所示。
图13-17 菜单滚动
构建HTML页面。
<!DOCTYPE html>
<html>
<head>
<title>向上滚动的菜单</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
</body></html>
上面代码比较简单，只是实现了一个空白页面，页面背景色为白色，前景色为黑色。在IE 9.0中的浏览效果如图13-18所示，可以看到显示了一个空白页面。
图13-18 空白HTML页面
加入JavaScript代码，实现菜单滚动。
<script language=javascript>
<!--
var index = 9
link = new Array(8);
link[0] ='time1.htm'
link[1] ='time2.htm'
link[2] ='time3.htm'
link[3] ='time1.htm'
link[4] ='time2.htm'
link[5] ='time3.htm'
link[6] ='time1.htm'
link[7] ='time2.htm'
link[8] ='time3.htm'
text = new Array(8);
text[0] ='首页'
text[1] ='产品天地'
text[2] ='关于我们'
text[3] ='资讯动态'
text[4] ='服务支持'
text[5] ='会员中心'
text[6] ='网上商城'
text[7] ='官方微博'
text[8] ='企业文化'
document.write ("<marquee scrollamount='1' scrolldelay='100' direction= 'up' width='150' height='150'>");
for (i=0;i<index;i++)
{
document.write (" <img src='dian3.gif' width='12' height='12'><a href="+link[i]+" target='_blank'>");
document.write (text[i] + "</A><br>");
}
document.write ("</marquee>")
// --></script>
上面代码创建了两个数组对象link和text，用来存放菜单链接对象和菜单内容，在下面JavaScript代码中，使用<marquee>定义页面在垂直方向上下移动。
在IE 9.0中的浏览效果如图13-19所示，可以看到页面左侧有一个菜单，自下向上自由移动。
图13-19 最终效果
13.7 实战演练7——跟随鼠标移动图片
在众多网站中，特别是游戏网站或小型商业网站，都喜欢用鼠标图片跟随的特效，一方面可以在鼠标指针旁边加上网站说明的相关信息或者欢迎信息；另一方面也会吸引人的注意力，使其更加关注此类网站。本实例实现了图片跟随鼠标走的特效，具体步骤如下所示：
分析需求。需要通过JavaScript获取鼠标指针的位置，并且动态地调整图片位置。图片需要通过position的绝对定位，很容易得到调整。采用CSS的绝对定位是JavaScript调整页面元素常用的方法。实例完成效果如图13-20所示。
图13-20 图片移动
创建基本HTML页面。
<!DOCTYPE html>
<html >
<head>
<title>随鼠标移动的图片</title>
</head>
<body>
</body>
</html>
上面代码比较简单，只是实现了一个HTML页面结构。这里就不再演示了。
添加JavaScript代码，实现图片随鼠标移动的效果。
<script type="text/javascript">
function badAD(html){
var ad=document.body.appendChild(document.createElement('div'));
ad.style.cssText="border:1px solid #000;background:#FFF;position:absolute;padding:4px 4px 4px 4px;font: 12px/1.5 verdana;";
ad.innerHTML=html||'This is bad idea!';
var c=ad.appendChild(document.createElement('span'));
c.innerHTML="×";
c.style.cssText="position:absolute;right:4px;top:2px;cursor:pointer";
c.onclick=function (){
document.onmousemove=null;
this.parentNode.style.left='-99999px'
};
document.onmousemove=function (e){
e=e||window.event;
var x=e.clientX,y=e.clientY;
setTimeout(function() {
if(ad.hover)return;
ad.style.left=x+5+'px';
ad.style.top=y+5+'px';
},120)
}
ad.onmouseover=function (){
this.hover=true
};
ad.onmouseout=function (){
this.hover=false
}
}
badAD('<img src="18.png">')
</script>
上面代码中，使用appendChild()方法为当前页面创建了一个DIV对象，并为DIV层设置了相应样式。下面e.clientX和e.clientY语句确定鼠标位置，并动态调整图片位置，从而实现图片移动效果。在IE 9.0中的浏览效果如图13-21所示，可以看到鼠标在页面移动时，图片跟着移动。
图13-21 最终效果
13.8 实战演练8——树型菜单
作为一个首页，其特点之一是需要导航的页面很多，有时为了效果不得不将所有需要导航的部分都放到一个导航菜单中。树型导航菜单是网页设计中最常用的菜单之一。本实例将创建一个树型菜单，具体步骤如下所示：
分析需求。实现一个树型菜单，需要三个方面配合，一个是<ul>无序列表，用于显示的菜单，一个是CSS样式，修饰树型菜单样式，一个是JavaScript 程序，实现单击展开菜单选项。实例完成后，效果如图13-22所示。
图13-22 树型菜单
创建HTML页面，实现菜单列表。
<!DOCTYPE html>
<html >
<head>
<title>树型菜单</title>
</head>
<body>
<ul id="menu_zzjs_net">
<li>
<label><a href="javascript:;">计算机图书</a></label>
<ul class="two">
<li>
<label><a href="javascript:;">程序类图书</a></label>
<ul class="two">
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">Java类图书</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">Java语言类图像</a></label></li>
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">Java框架类图像</a></label>
<ul class="two">
<li>
<label><input type="checkbox" value="123456"><a href="javascript:;">Struts2图书</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">Struts1</a></label></li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">Struts2</a></label></li>
</ul>
</li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">Hibernate入门</a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<label><a href="javascript:;">设计类图像</a></label>
<ul class="two">
<li><label><input type="checkbox" value="123456"><a href="javascript:;">PS实例大全</a></label></li>
<li><label><input type="checkbox" value="123456"><a href="javascript:;">Flash基础入门</a></label></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
在IE 9.0中的浏览效果如图13-23所示，可以看到无序列表在页面上的显示，并且显示全部元素，字体颜色为蓝色。
图13-23 无序列表
添加JavaScript代码，实现单击展开。
<script type="text/javascript" >
function addEvent(el,name,fn){//绑定事件
if(el.addEventListener) return el.addEventListener(name,fn,false);
return el.attachEvent('on'+name,fn);
}
function nextnode(node){//寻找下一个兄弟节点并剔除空的文本节点
if(!node)return ;
if(node.nodeType == 1)
return node;
if(node.nextSibling)
return nextnode(node.nextSibling);
}
function prevnode(node){//寻找上一个兄弟节点并剔除空的文本节点
if(!node)return ;
if(node.nodeType == 1)
return node;
if(node.previousSibling)
return prevnode(node.previousSibling);
}
function parcheck(self,checked){//递归寻找父亲元素，并找到input元素进行操作
var par = prevnode(self.parentNode.parentNode.parentNode.previousSibling),parspar;
if(par&&par.getElementsByTagName('input')[0]){
par.getElementsByTagName('input')[0].checked = checked;
parcheck(par.getElementsByTagName('input')[0],sibcheck(par.getElementsByTagName('input')[0]));
}
}
function sibcheck(self){//判断兄弟节点是否已经全部选中
var sbi = self.parentNode.parentNode.parentNode.childNodes,n=0;
for(var i=0;i<sbi.length;i++){
if(sbi[i].nodeType != 1)//由于孩子节点中包括空的文本节点，所以这里累计长度的时候也要算上去
n++;
else if(sbi[i].getElementsByTagName('input')[0].checked)
n++;
}
return n==sbi.length?true:false;
}
addEvent(document.getElementById('menu_zzjs_net'),'click',function(e){//绑定input单击事件，使用menu_zzjs_net根元素代理
e = e||window.event;
var target = e.target||e.srcElement;
var tp = nextnode(target.parentNode.nextSibling);
switch(target.nodeName){
case 'A'://单击A标签展开和收缩树型目录，并改变其样式会选中checkbox
if(tp&&tp.nodeName == 'UL'){
if(tp.style.display != 'block' ){
tp.style.display = 'block';
prevnode(target.parentNode.previousSibling).className = 'ren'
}else{
tp.style.display = 'none';
prevnode(target.parentNode.previousSibling).className = 'add'
}
}
break;
case 'SPAN'://单击图标只展开或者收缩
var ap = nextnode(nextnode(target.nextSibling).nextSibling);
if(ap.style.display != 'block' ){
ap.style.display = 'block';
target.className = 'ren'
}else{
ap.style.display = 'none';
target.className = 'add'
}
break;
case 'INPUT'://单击checkbox，将父亲元素选中，则孩子节点中的checkbox也同时选中，孩子节点取消则父元素随之取消
if(target.checked){
if(tp){
var checkbox = tp.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked = true;
}
}else{
if(tp){
var checkbox = tp.getElementsByTagName('input');
for(var i=0;i<checkbox.length;i++)
checkbox[i].checked = false;
}
}
parcheck(target,sibcheck(target));//当孩子节点取消选中的时候调用该方法递归其父节点的checkbox逐一取消选中
break;
}
});
window.onload = function(){//页面加载时给有孩子节点的元素动态添加图标
var labels = document.getElementById('menu_zzjs_net').getElementsByTagName('label');
for(var i=0;i<labels.length;i++){
var span = document.createElement('span');
span.style.cssText ='display:inline-block;height:18px;vertical-align:middle;width:16px;cursor:pointer;';
span.innerHTML = ' '
span.className = 'add';
if(nextnode(labels[i].nextSibling)&&nextnode(labels[i].nextSibling).nodeName == 'UL')
labels[i].parentNode.insertBefore(span,labels[i]);
else
labels[i].className = 'rem'
}
}
</script>
在IE 9.0中的浏览效果如图13-24所示，可以看到无序列表在页面上的显示，使用单击可以展开或关闭相应的选项，但其样式非常难看。
图13-24 实现单击事件
添加CSS代码，修饰列表选项。
<style type="text/css">
body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif;}
ul,li,{margin:0;padding:0;}
ul{list-style:none;}
#menu_zzjs_net{margin:10px;width:200px;overflow:hidden;}
#menu_zzjs_net li{line-height:25px;}
#menu_zzjs_net .rem{padding-left:16px;}
#menu_zzjs_net .add{background:url() -4px -31px no-repeat;}
#menu_zzjs_net .ren{background:url() -4px -7px no-repeat;}
#menu_zzjs_net li a{color:#666666;padding-left:5px;outline:none;blr:expression(this.onFocus=this.blur());}
#menu_zzjs_net li input{vertical-align:middle;margin-left:5px;}
#menu_zzjs_net .two{padding-left:20px;display:none;}
</style>
在IE 9.0中的浏览效果如图13-25所示，相较原来的页面，样式变得非常漂亮。
图13-25 最终效果
13.9 实战演练9——时钟特效
在HTML 5技术中，新增了一个容器画布canvas，用来在页面上绘制一些图形，利用这个新的特性，可以在网页中创建一个类似于钟表的特效。本实例结合第2章知识，创建了一个时钟特效的页面。具体步骤如下：
分析需求。在画布上绘制时钟，需要绘制几个必要的图形，表盘、时针、分针、秒针和中心圆这几个图形。这样将上面几个图形组合起来，构成一个时针界面，然后使用JavaScript代码，根据时间确定秒针，分针和时针。实例完成后，效果如图13-26所示。
图13-26 时钟特效
创建HTML页面。
<!DOCTYPE html>
<html>
<head>
<title>canvas时钟</title>
</head><body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">您的浏览器不支持Canvas。</canvas></body></html>
上面代码创建了一个画布，其宽度为200px，高度为200px，带有边框，颜色为黑色，样式为直线型。在Firefox 5.0中浏览效果如图13-27所示，可以看到显示了一个带有黑色边框的画布，画布中没有任何信息。
图13-27 定义画布
添加JavaScript，绘制不同的图形。
<script type="text/javascript" language="javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if(ctx){
var timerId;
var frameRate = 60;
function canvObject(){
this.x = 0;
this.y = 0;
this.rotation = 0;
this.borderWidth = 2;
this.borderColor = '#000000';
this.fill = false;
this.fillColor = '#ff0000';
this.update = function(){
if(!this.ctx)throw new Error('你没有指定ctx对象。');
var ctx = this.ctx
ctx.save();
ctx.lineWidth = this.borderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);
if(this.rotation)ctx.rotate(this.rotation * Math.PI/180);
if(this.draw)this.draw(ctx);
if(this.fill)ctx.fill();
ctx.stroke();
ctx.restore();
} };………….
timerId = setInterval(function(){
// 清除画布
ctx.clearRect(0,0,200,200);
// 填充背景色
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,200,200);
// 表盘
circle.update();
// 刻度
for(var i=0;cache=ls[i++];)cache.update();
// 时针
hour.rotation = (new Date()).getHours() * 30;
hour.update();
// 分针
minute.rotation = (new Date()).getMinutes() * 6;
minute.update();
// 秒针
seconds.rotation = (new Date()).getSeconds() * 6;
seconds.update();
// 中心圆
center.update();
},(1000/frameRate)|0);
}else{
alert('您的浏览器不支持Canvas无法预览.\n跟我一起说：“很遗憾!”');
}
</script>
上面代码由于篇幅比较长，只显示了部分代码。其详细代码可以在本书附赠的网络资源中查询。上面代码首先绘制不同类型的图形，例如时针，秒针和分针等。然后在将其组合在一起，并根据时间定义时针等的指向。在Firefox 5.0中浏览效果如图13-28所示，可以看到页面中出现了一个时钟，其秒针在不停地移动。
图13-28 最终特效
13.10 实战演练10——颜色选择器
在页面中定义背景色和字体颜色，是比较常见的一种操作，但在选取颜色时有时不知道哪种颜色适合，并且不知道颜色值是什么。此时可以利用颜色选择器来定义颜色并获取颜色值。本实例将创建一个颜色选择器，可以自由获取颜色值。具体步骤如下所示。
分析需求。本实例原理非常简单，即将几个常用的颜色值进行组合然后再合并，就是所要选择的颜色值。这些都是利用JavaScript代码完成的。实例完成后，实际效果如图13-29所示。
图13-29 设定页面背景色
创建基本HTML页面。
<!DOCTYPE html>
<html>
<head><title>背景色选择器</title>
</head>
<body bgcolor="#FFFFFF">
</body></html>
上述代码比较简单，只是实现了一个页面框架，这里就不再详细叙述了。
添加JavaScript代码，实现颜色选择。
<script language="JavaScript">
<!--
var hex = new Array(6)
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"
function display(triplet)
{
document.bgColor = '#' + triplet
alert('现在的背景色是 #'+triplet)
}
function drawCell(red, green, blue)
{
document.write('<TD BGCOLOR="#' + red + green + blue + '">')
document.write('<A HREF="javascript:display(\'' + (red + green + blue) + '\')">')
document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12 WIDTH=12>')
document.write('</A>')
document.write('</TD>')
}
function drawRow(red, blue)
{
document.write('<TR>')
for (var i = 0; i < 6; ++i)
{
drawCell(red, hex[i], blue)
} document.write('</TR>')
}function drawTable(blue)
{
document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
for (var i = 0; i < 6; ++i)
{
drawRow(hex[i], blue)
}
document.write('</TABLE>')
}
function drawCube()
{
document.write('<TABLE CELLPADDING=5 CELLSPACING=0 BORDER=1><TR>')
for (var i = 0; i < 6; ++i)
{
document.write('<TD BGCOLOR="#FFFFFF">')
drawTable(hex[i])
document.write('</TD>')
} document.write('</TR></TABLE>')
}drawCube()
// --></script>
上面代码中，创建了一个数组对象hex用来存放不同的颜色值。下面几个函数分别将数组中的颜色组合在一起，并在页面显示，display函数完成定义背景颜色和显示颜色值。
在IE 9.0中的浏览效果如图13-30所示，可以看到页面显示多个表格，每个单元格代表一种颜色。
图13-30 最终效果
13.11 疑难解惑
1．JavaScript中数组中常用的方法有哪些？
jion()：将array中的所有element以string的形式连在一起。
var a = [1,2,3];
s = a.join(); // s == "1,2,3"
s = a.join(": "); // s == "1: 2: 3"
reverse()：将Array的element顺数颠倒。
var a = [1,2,3];
a.reverse();
s = a.join(); // s == "3,2,1"
sort()：排序，默认按字母顺序排序case sensitive，可以自定义排序方式。
var a = [111,4,33,2];
a.sort(); // a == [111,2,33,4]
a.sort(function(a,b) { // a == [2,4,33,111]
return a-b; // Returns < 0, 0, or > 0
});
concat()：连接多个Array。
var a = [1,2,3];
a.concat(4,5); // return [1,2,3,4,5]
a.concat([4,5]); // return [1,2,3,4,5]
a.concat([4,5], [6,7]) // return [1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]); // return [1,2,3,4,5,6,7]
2．JavaScript中的注释有哪些？
在程序中添加注释来描述代码的功能，通过注释还可以使一些代码无效，以实现逐行检查程序，及时发现并解决问题。JavaScript主要提供了三种注释的方法。
单行注释：在需要注释的代码前添加字符“//”，“//”后面的部分会被注释。
多行注释：在代码前添加“/*”，之后添加“*/”，之间的部分会被注释。
HTML注释：使用传统的HTML注释，<!--和-->之间的部分会被注释，注释内容可以一行或多行。
作者: 刘增杰，陈伟光，刘玉萍，张俊彬
isbn: 7302375232
书名: JavaScript从零开始学：视频教学版
页数: 444
定价: 65.00元
出版社: 清华大学出版社
装帧: 平装
出版年: 2014-10-1