JavaScript的方法和技巧(三)

 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: }