JavaScript就这么回事3：图像
36 读取图像属性
1:
<
img
src
="/”image1.jpg"
” name
=”myImage”
>
2:
<
a
href
=”#
” onClick
=”window.alert(document.myImage.width)”
>
Width
</
a
>
37 动态加载图像
1
:
<
script language
=
”JavaScript”
>
2
: myImage
=
new
Image;
3
: myImage.src
=
“Tellers1.jpg”;
4
:
</
script
>
38 简单的图像替换
1
:
<
script language
=
”JavaScript”
>
2
: rollImage
=
new
Image;
3
: rollImage.src
=
“rollImage1.jpg”;
4
: defaultImage
=
new
Image;
5
: defaultImage.src
=
“image1.jpg”;
6
:
</
script
>
7
:
<
a href
=
"
/”myUrl
"
” onMouseOver
=
”document.myImage.src
=
rollImage.src;”
8
: onMouseOut
=
”document.myImage.src
=
defaultImage.src;”
>
9
:
<
img src
=
"
/”image1.jpg
"
” name
=
”myImage” width
=
100
height
=
100
border
=
0
>
39 随机显示图像
1
:
<
script language
=
”JavaScript”
>
2
:
var
imageList
=
new
Array;
3
: imageList[
0
]
=
“image1.jpg”;
4
: imageList[
1
]
=
“image2.jpg”;
5
: imageList[
2
]
=
“image3.jpg”;
6
: imageList[
3
]
=
“image4.jpg”;
7
:
var
imageChoice
=
Math.floor(Math.random()
*
imageList.length);
8
: document.write(‘
<
img src
=
”’
+
imageList[imageChoice]
+
‘“
>
’);
9
:
</
script
>
40 函数实现的图像替换
1
:
<
script language
=
”JavaScript”
>
2
:
var
source
=
0
;
3
:
var
replacement
=
1
;
4
:
function
createRollOver(originalImage,replacementImage)
...
{5: var imageArray = new Array;6: imageArray[source] = new Image;7: imageArray[source].src = originalImage;8: imageArray[replacement] = new Image;9: imageArray[replacement].src = replacementImage;10: return imageArray;11: }
12
:
var
rollImage1
=
createRollOver(“image1.jpg”,”rollImage1.jpg”);
13
:
</
script
>
14
:
<
a href
=
”#” onMouseOver
=
”document.myImage1.src
=
rollImage1[replacement].src;”
15
: onMouseOut
=
”document.myImage1.src
=
rollImage1[source].src;”
>
16
:
<
img src
=
"
/”image1.jpg
"
” width
=
100
name
=
”myImage1” border
=
0
>
17
:
</
a
>
41 创建幻灯片
1:
<
script
language
=”JavaScript”
>
...
2: var imageList = new Array;3: imageList[0] = new Image;4: imageList[0].src = “image1.jpg”;5: imageList[1] = new Image;6: imageList[1].src = “image2.jpg”;7: imageList[2] = new Image;8: imageList[2].src = “image3.jpg”;9: imageList[3] = new Image;10: imageList[3].src = “image4.jpg”;11: function slideShow(imageNumber) ......{12: document.slideShow.src = imageList[imageNumber].src;13: imageNumber += 1;14: if (imageNumber < imageList.length) ......{15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);16: }17: }18:
</
script
>
19:
</
head
>
20:
<
body
onLoad
=”slideShow(0)”
>
21:
<
img
src
="/”image1.jpg"
” width
=100
name
=”slideShow”
>
42 随机广告图片
1
:
<
script language
=
”JavaScript”
>
2
:
var
imageList
=
new
Array;
3
: imageList[
0
]
=
“image1.jpg”;
4
: imageList[
1
]
=
“image2.jpg”;
5
: imageList[
2
]
=
“image3.jpg”;
6
: imageList[
3
]
=
“image4.jpg”;
7
:
var
urlList
=
new
Array;
8
: urlList[
0
]
=
“http:
//
some.host/”;
9
: urlList[
1
]
=
“http:
//
another.host/”;
10
: urlList[
2
]
=
“http:
//
somewhere.else/”;
11
: urlList[
3
]
=
“http:
//
right.here/”;
12
:
var
imageChoice
=
Math.floor(Math.random()
*
imageList.length);
13
: document.write(‘
<
a href
=
”’
+
urlList[imageChoice]
+
‘“
><
img src
=
”’
+
imageList[imageChoice]
+
‘“
></
a
>
’);
14
:
</
script
>
JavaScript就这么回事4：表单
还是先继续写完JS就这么回事系列吧～
43 表单构成
1:
<
form
method
=”post”
action
=”target.html”
name
=”thisForm”
>
2:
<
input
type
=”text”
name
=”myText”
>
3:
<
select
name
=”mySelect”
>
4:
<
option
value
=”1”
>
First Choice
</
option
>
5:
<
option
value
=”2”
>
Second Choice
</
option
>
6:
</
select
>
7:
<
br
/>
8:
<
input
type
=”submit”
value
=”Submit
Me”
>
9:
</
form
>
44 访问表单中的文本框内容
1:
<
form
name
=”myForm”
>
2:
<
input
type
=”text”
name
=”myText”
>
3:
</
form
>
4:
<
a
href
='#'
onClick
='window.alert(document.myForm.myText.value);'
>
Check Text Field
</
a
>
45 动态复制文本框内容
1:
<
form
name
=”myForm”
>
2: Enter some Text:
<
input
type
=”text”
name
=”myText”
><
br
/>
3: Copy Text:
<
input
type
=”text”
name
=”copyText”
>
4:
</
form
>
5:
<
a
href
=”#”
onClick
=”document.myForm.copyText.value =6:
document.myForm.myText.value;”
>
Copy Text Field
</
a
>
46 侦测文本框的变化
1:
<
form
name
=”myForm”
>
2: Enter some Text:
<
input
type
=”text”
name
=”myText”
onChange
=”alert(this.value);”
>
3:
</
form
>
47 访问选中的Select
1
:
<
form name
=
”myForm”
>
2
:
<
select name
=
”mySelect”
>
3
:
<
option value
=
”First Choice”
>
1
</
option
>
4
:
<
option value
=
”Second Choice”
>
2
</
option
>
5
:
<
option value
=
”Third Choice”
>
3
</
option
>
6
:
</
select
>
7
:
</
form
>
8
:
<
a href
=
'
#
'
onClick
=
'
alert(document.myForm.mySelect.value);
'
>
Check Selection List
</
a
>
48 动态增加Select项
1:
<
form
name
=”myForm”
>
2:
<
select
name
=”mySelect”
>
3:
<
option
value
=”First
Choice”
>
1
</
option
>
4:
<
option
value
=”Second
Choice”
>
2
</
option
>
5:
</
select
>
6:
</
form
>
7:
<
script
language
=”JavaScript”
>
...
8: document.myForm.mySelect.length++;9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;11:
</
script
>
49 验证表单字段
1:
<
script
language
=”JavaScript”
>
...
2: function checkField(field) ...{3: if (field.value == “”) ...{4: window.alert(“You must enter a value in the field”);5: field.focus();6: }7: }8:
</
script
>
9:
<
form
name
=”myForm”
action
=”target.html”
>
10: Text Field:
<
input
type
=”text”
name
=”myField”onBlur=”checkField(this)”
>
11:
<
br
/><
input
type
=”submit”
>
12:
</
form
>
50 验证Select项
1
:
function
checkList(selection)
...
{2: if (selection.length == 0) ...{3: window.alert(“You must make a selection from the list.”);4: return false;5: }6: return true;7: }
