JavaScript就这么回事3:图像
36 读取图像属性
37 动态加载图像
38 简单的图像替换
39 随机显示图像
40 函数实现的图像替换
41 创建幻灯片
42 随机广告图片
JavaScript就这么回事4:表单
还是先继续写完JS就这么回事系列吧~
43 表单构成
44 访问表单中的文本框内容
45 动态复制文本框内容
46 侦测文本框的变化
47 访问选中的Select
48 动态增加Select项
49 验证表单字段
50 验证Select项
36 读取图像属性
1:
<
img
src
="/”image1.jpg"
” name
=”myImage”
>
2: < a href =”# ” onClick =”window.alert(document.myImage.width)” > Width </ a >
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 >
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 >
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 >
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 >
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” >
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 >
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 >
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 >
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 >
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 >
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 >
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 >
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 >
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: }
2: if (selection.length == 0) ...{
3: window.alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: }