JavaScript教程:JS中创建新对象范例
使用JavaScript可以创建自己的对象。虽然JavaScript内部和浏览器本身的功能已十分强大，但JavaScript还是提供了创建一个新对象的方法。 网页教学网
使其不必像超文本标识语言那样，求于或其它多媒体工具，就能完成许多复杂的工作。 网页教学网
在JavaScript中创建一个新的对象是十分简单的。首先它必须定义一个对象，而后再为该对象创建一个实例。这个实例就是一个新对象，它具有对象定义中的基本特征。
五、范例 网页教学网
范例1：一个动态文字滚动的例子。
test5_1.htm 网页教学网
<html>
Webjx.Com
<head> 网页教学网
<title></title>
<script LANGUAGE="JavaScript"> Webjx.Com
with (top.window.location)
{baseURL = href.substring (0,href.lastIndexOf ("/") + 1)} Webjx.Com
total_toc_items = 0;
current_overID = "";
last_overID = "";
browser = navigator.appName;
version = parseInt(navigator.appVersion);
client=null;
loaded = 0;
if (browser == "Netscape" && version >= 3) client = "ns3";
function toc_item (img_name,icon_col,width,height) {
if (client =="ns3") { 网页教学网
img_prefix = baseURL + img_name; 网页教学网
this.icon_col = icon_col;
this.toc_img_off = new Image (width,height);
this.toc_img_off.src = img_prefix + "_off.gif";
Webjx.Com
this.toc_img_on = new Image (width,height);
网页教学网
this.toc_img_on.src = img_prefix + "_on.gif";
Webjx.Com
}
}
function new_toc_item (img_name,icon_row,width,height) {
toc_item [img_name] = new toc_item (img_name,icon_row,width,height); Webjx.Com
} Webjx.Com
function toc_mouseover (itemID) { 网页教学网
if (client =="ns3") {
current_overID = itemID;
if (current_overID != last_overID) {
document [current_overID].src = toc_item [current_overID].toc_img_on.src;
if (last_overID != "") { Webjx.Com
document.images [last_overID].src = toc_item[last_overID].toc_img_off.src;
}
Webjx.Com
last_overID = current_overID;
网页教学网
}
}
} 网页教学网
function toc_mouseout () { 网页教学网
if (client =="ns3") { 网页教学网
if (current_overID != "") {
document.images [current_overID].src = toc_item [current_overID].toc_img_off.src;
}
current_overID = "";
last_overID = "";
}
} Webjx.Com
new_toc_item ("1",2,120,20);
<!-- Begin 网页教学网
function bannerObject(p){
this.msg = MESSAGE 网页教学网
this.out = " "
this.pos = POSITION 网页教学网
this.delay = DELAY
this.i = 0 网页教学网
this.reset = clearMessage}
function clearMessage(){
this.pos = POSITION}
var POSITION = 50; 网页教学网
var DELAY = 150;
var MESSAGE = "这是一个动态JavaScript文字显示的例子";
var scroll = new bannerObject(); Webjx.Com
function scroller(){
scroll.out += " ";
if(scroll.pos>0) Webjx.Com
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out +=" " ; }
if (scroll.pos>= 0)
scroll.out += scroll.msg
else
Webjx.Com
scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
document.noticeForm.notice.value = scroll.out
scroll.out = " ";
scroll.pos--;
网页教学网
scroll.pos--; Webjx.Com
if (scroll.pos < -(scroll.msg.length)) { scroll.reset(); } setTimeout
('scroller()',scroll.delay);} 网页教学网
</script> Webjx.Com
</head>
<body onload="scroller()" bgcolor="#000000" link="#C0C0C0" vlink="#C0C0C0"
alink="#008080" 网页教学网
text="#C0C0C0"> Webjx.Com
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form NAME="noticeForm">
<p><input TYPE="text" name="notice" size="40" style="background-color: rgb(192,192,192)"></p> Webjx.Com
</form>
</td>
</tr> Webjx.Com
</table>
</center></div>
</body>
</html>
范例2:颜色变化的例子。
test5_2.htm
Webjx.Com
<html>
<head>
<script>
<!--
Webjx.Com
function makearray(n) {
this.length = n; 网页教学网
for(var i = 1; i <= n; i++) 网页教学网
this[i] = 0;
return this;} Webjx.Com
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
网页教学网
hexa[i] = i;
hexa[10]="a";
Webjx.Com
hexa[11]="b";
Webjx.Com
hexa[12]="c"; Webjx.Com
hexa[13]="d";
hexa[14]="e";
hexa[15]="f";
Webjx.Com
function hex(i) { 网页教学网
if (i < 0)
return "00"; 网页教学网
else if (i > 255)
return "ff";
else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b) { Webjx.Com
var hr = hex(r);
var hg = hex(g);
var hb = hex(b); 网页教学网
document.bgColor = "#"+hr+hg+hb;}
function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++) { Webjx.Com
setbgColor( Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb *
Webjx.Com
((step-i)/step) + eb * (i/step))); }}
function fadein() {
fade(255,0,0,0,0,255,100);
fade(0,0,255,0,255,0,100);
fade(0,255,0, 0,0,0, 100);}
fadein();
Webjx.Com
// -->
</script>
<body> Webjx.Com
</body>
</html> Webjx.Com
本讲介绍了用户自行创建对象的方法, 用户可根据需要创建自己的对象。并介绍了JavaScript中建数组的方法。
文章评论
共有 0 位网友发表了评论 查看完整内容