📄 day4_7.html
字号:
Status:
<input type="text" size="60" name="pet_status" value>
<br>
<input type="button" value="feed" onClick="pet1.feed();" name="button">
<input type="button" value="play" onClick="pet1.play();" name="button">
<input type="button" value="medicate" onClick="pet1.medicate();" name="button">
</p>
</form>
<form>
<p>Name:
<input type="text" name="pet_name2" value size="20">
<br>
Status:
<input type="text" size="60" name="pet_status" value>
<br>
<input type="button" value="feed" onClick="pet2.feed();" name="button">
<input type="button" value="play" onClick="pet2.play();" name="button">
<input type="button" value="medicate" onClick="pet2.medicate();" name="button">
</p>
</form>
<form>
<p>
<input type="button" value="start" onClick="start();" name="button">
<input type="button" value="stop the madness!" onClick="clearTimeout(the_time_out);" name="button">
</p>
</form>
<hr>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="449">
<tr>
<td width="449"> <font face="verdana, arial" size="2"></font><font size="3">也许你能猜到，我并不是个称职的宠物饲养员，我的可怜的<br>
宠物每次还没养大就死掉了。</font>
<p><font face="verdana, arial" size="2"></font><font size="3">虽然如此，这整个都是用对象编出来的。每个宠物都是宠物<br>
对象的一个实例。每个宠物具有以下属性：</font>
<ul>
<li> <font face="verdana, arial" size="3">health</font><font size="3">健康
</font></li>
<font size="3">
<li> <font face="verdana, arial">happiness</font>快乐 </li>
<li> <font face="verdana, arial">hunger</font>饥饿 </li>
<li> <font face="verdana, arial">age</font>年龄 </li>
<li> <font face="verdana, arial">pet_name</font>宠物的名字 </li>
<li> <font face="verdana, arial">form_number -</font>表单号<font face="verdana, arial">--</font>宠物所在的<font face="verdana, arial">HTML</font>表单号。
</li>
</font>
</ul>
<font size="3">
<p> <font face="verdana, arial"></font>下列方法能够影响这些属性：
</font>
<ul>
<font size="3">
<li> <font face="verdana, arial"><tt>play()</tt> - </font>增加快乐
</li>
<li> <font face="verdana, arial"><tt>feed()</tt> - </font>减少饥饿
</li>
<li> <font face="verdana, arial"><tt>medicate()</tt> - </font>增加一点健康
</li>
<li> <font face="verdana, arial"><tt>makeOlder()</tt> - </font>宠物长大
</li>
</font>
<li><font size="3"> <font face="verdana, arial"><tt>display()</tt>
-</font></font><font face="verdana, arial" size="3"> </font><font size="3">在状态框里显示宠物的信息。
</font></li>
</ul>
<p> <font face="verdana, arial" size="3"></font><font size="3">把这些记在脑子里，我们来创建宠物对象。首先我们来写一<br>
个构造函数。 这里就是最基本的构造函数（即还没有加任何<br>
方法的代码）：</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<blockquote>
<pre><big>
</big>function Pet(the_pet_name, the_form_number)
{
this.age = 0;
this.hunger = Math.random() * 5; // random num<br>ber between 0 <br>and 4.99
this.health = Math.random() * 5 + 1 ; // rand<br>om numb<br>er betwe<br>en 1 and 3.99
this.happiness = Math.random() * 5;
this.pet_name = the_pet_name;
this.form_number = the_form_number;
window.document.forms[the_form_number].pet_name.value<br> = the_pet_name;
}
</pre>
</blockquote>
<table width="458">
<tr>
<td width="454"><font size="3">这个构造函数有两个参数：宠物名字和要显示其信息的表单号。<br>
要创建两个宠物，我们这么做：</font>
<blockquote>
<pre>
<font face="verdana, arial" size="3"></font><font size="3">
var pet1 = new Pet("barney",0);
var pet2 = new Pet("betty",1);
</font></pre>
</blockquote>
<p> <font size="3">我们把构造函数写的能使每个宠物都不一样。用了<br>
<font face="verdana, arial"><tt>Math.random()</tt> </font>方法来产生一个<font face="verdana, arial">0</font>到<font face="verdana, arial">1</font>之间的随机数，<br>
<font face="verdana, arial"><tt>Math.random()</tt></font>方法并不是完全随机的，但在这里够用了，它<br>
能保证给每个产生的宠物一个不同的饥饿，健康和快乐的初<br>
始值。宠物的名字从参数传递过来，年龄则设为<font face="verdana, arial">0</font>。 最后两行<br>
设定了宠物使用的表单号，并把宠物的名字写到相应的文本<br>
框去。记住：一个页面的第一个表单可以被索引为<br>
</font><font size="4" face="verdana, arial"><tt>window.document.forms[0]</tt></font><font face="verdana, arial" size="3">,</font><font size="3">第二个可以索引为<br>
<font face="verdana, arial"><tt>window.document.forms[1]</tt>, </font>依次类推。</font></p>
<font size="3">
<p> <font face="verdana, arial"></font>我们已建立好了属性，现在来看看方法。我并不打算把每个方<br>
法都展开讲，而只把其中几个讲一讲：
</font></td>
</tr>
</table>
<pre>function feed()
{
var meal_quality = Math.random() * 2;
this.hunger = this.hunger - meal_quality;
if (this.hunger <0)
{
this.hunger = 0;
}
this.display();
}
</pre>
<table width="451">
<tr>
<td width="447"><font size="3">这是一个喂宠物的方法。如果你调用了 <font face="verdana, arial"><tt>pet1.feed()</tt></font>方法<font face="verdana, arial">,</font>首<br>
先它会产生一个<font face="verdana, arial">0</font>到<font face="verdana, arial">2</font>之间的数，然后把饥饿度减去这个数。<br>
我们确使饥饿度不小于<font face="verdana, arial">0</font>，然后调用显示方法去显示信息。
<p><font face="verdana, arial"></font><font size="3">显示方法的代码如下：</font>
</font></td>
</tr>
</table>
<blockquote>
<pre>function display()
{
var the_string = "";
if (this.health < min_health)
{
the_string = this.pet_name + " IS DEAD!";
} else {
the_string += "Happiness " + parseInt<br>(this.happiness);
the_string += ". Health: " + parseInt<br>(this.health);
the_string += ". Hunger: " + parseInt<br>(this.hunger);
the_string += ". Age: " + parseInt<br>(this.age);
the_string += ".";
}
window.document.forms[this.form_number].pet_status.<br>value = the_string;
}<big> </big></pre>
</blockquote>
<table width="463">
<tr>
<td width="459">This这个方法建立了一个字符串并把它显示到正确的文本框里，<br>
表单号属性保证了状态信息放到合适的文本框。每当我们创建<br>
一个宠物，我们就给它一个表单号 - 第一个宠物的表单号是0，<br>
第二个宠物的表单号是1。使用这种表单号我们知道第一个宠物<br>
的状态应放在 window.document.forms[0].pet_status.value，<br>
而第二个宠物的状态应放在window.document.forms<br>
[1].pet_status.value. 这个方法里的最后一行根据<br>
this.form_number决定在哪个form放状态信息.
<p>这个方法里的另一个有趣的地方是 parseInt函数. 由于使用了<br>
随机数，象健康和快乐的值可能是 2.738993720. 它们是实数，<br>
但是显得有点长，所以parseInt函数把小数点后的数给拿掉了，<br>
比如 parseInt(2.738)得到的结果是2。</p>
<p>第三个有趣的方法是makeOlder().它把宠物年龄增加一岁并让<br>
宠物更饿一点和更不高兴一点。这个方法通过setTimeout设成<br>
每秒被调用一次（我们在第三天的课里曾讲过怎么做的）：
</td>
</tr>
</table>
<blockquote>
<pre>
function makeOlder()
{
var max_hunger = 5;
var good_happiness = 5;
if (this.health > min_health)
{
this.age +=1;
this.happiness -= Math.random() * 2;
this.hunger += Math.random() * 2;
if (this.hunger > max_hunger)
{
this.health -= Math.random() * 2;
this.happiness -= Math.random() * 2;
}
}
this.display();
}
</pre>
</blockquote>
<table width="463">
<tr>
<td width="459">你能看到，这个方法把宠物的年龄增加一岁，把快乐值降低了<br>
一个随机数，把饥饿度增加了一个随机数。然后又设定了一些<br>
规则（这儿只示意了一个），如“如果宠物真的饿极了，就让<br>
它不快乐一点和不健康一点。
<p>既然我们已经有了这些方法，就把它放进到构造函数里去完成<br>
整个的虚拟宠物对象的创建：
</td>
</tr>
</table>
<blockquote>
<pre>
function Pet(the_pet_name, the_form_number)
{
this.age = 0;
this.hunger = Math.random() * 5; // random numb<br>er between 0 and 4.99
this.health = Math.random() * 3 +1 ; // random nm<br>ber between 1 and 3.99
this.happiness = Math.random() * 5;
this.pet_name = the_pet_name;
this.form_number = the_form_number;
this.feed = feed;
this.play = play;
this.medicate = medicate;
this.display = display;
this.makeOlder = makeOlder;
window.document.forms[the_form_number].pet_name.value<br> = the_pet_name;
this.display();
}
</pre>
</blockquote>
<table width="457">
<tr>
<td width="453">最后设定让<tt>makeOlder()</tt>方法每三秒种就调用一次。这个函数<br>
在你按动start按钮时被调用。</td>
</tr>
</table>
<blockquote>
<pre><big>
</big>function moveTime()
{
pet1.makeOlder();
pet2.makeOlder();
the_time_out = setTimeout("moveTime();", 3000);
}
</pre>
</blockquote>
<table width="453">
<tr>
<td width="449">你可以看到这个函数调用了每个宠物<tt>的makeOlder()</tt>方法，并<br>
在三秒种后又调用了它自己。这个定时事件将一直持续下去<br>
直到用户通过<tt>clearTimeout(the_time_out)</tt>把它取消掉.
<p>这个例子几乎用到了我们今天讲到的所有内容。如果你理<br>
解了，你对JavaScript已经了解的很深入了。在我们进入最<br>
后一个话题之前再休息一下，最后要讲的是：利用JavaScript<br>
的快捷方式获取很难索引的对象。<a href="day4_8.html">>></a>
</td>
</tr>
</table>
<p align="left"><font face="宋体" size="3" color="#000000"><strong>JavaScript高级教程</strong></font><font color="#FF0000" face="宋体" size="3"><br>
</font><font size="3"><font color="#FF3300">第一页</font> <a href="day4_1.html"><font face="verdana, arial, geneva, sans-serif">JavaScript</font>高级教程<font face="verdana, arial, geneva, sans-serif">-
</font>第<font face="verdana, arial, geneva, sans-serif">4</font>天</a>
<br>
<font color="#FF3300">第二页 </font><a href="day4_2.html">图象映射与<font face="verdana, arial, geneva, sans-serif">JavaScript</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第三页 </font><a href="day4_3.html">预装图象 - 是什么<font face="verdana, arial, geneva, sans-serif">?</font></a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第四页 </font><a href="day4_4.html">预装图象 - 怎么做?</a><font face="verdana, arial, geneva, sans-serif"><br>
</font><font color="#FF3300">第五页 </font><a href="day4_5.html">对象的优点</a><br>
<font color="#FF3300">第六页 </font><a href="day4_6.html">创建你自己的对象</a><br>
<font color="#FF3300">第七页 </font>你的面向对象的虚拟宠物<br>
<font color="#FF3300">第八页 </font><a href="day4_8.html">计算字符串</a><br>
<font color="#FF3300">第九页 </font><a href="day4_9.html">获取难以索引的对象</a><br>
<font color="#FF3300">第十页 </font><a href="day4_10.html">另一种获取难以索引的对象的手段</a><br>
<font color="#FF3300">第十一页 </font><a href="day4_11.html">第四天课程复习</a></font></p>
<p>[<a href="day1_1.html">第1课</a>][<a href="day2_1.html">第2课</a>][<a href="day3_1.html">第3课</a>][第4课][<a href="day5_1.html">第5课</a>]</p>
<!-- #EndEditable --></div>
</td>
<!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) -->
<!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) -->
<!-- End of other stuff (column 4: right column) --> </tr>
</table>
<!-- End of table surrounding page contents -->
<hr noshade size=1 width=700>
<span class=eng><br>
Copyright (C) 1998-2000 Internet Technologies China. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -