JavaScript方法和技巧大全2

35 添加网页加载进度窗口

1: <html>
2: <head>
3: <script language='javaScript'>
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); 

5: </script>
6: <title>The Main Page</title>
7: </head>
8: <body onLoad='placeHolder.close()'>
9: <p>This is the main page</p>
10: </body>
11: </html>

 

 

JavaScript就这么回事3:图像

 

36 读取图像属性

1: <img src="http://www.knowsky.com/”image1.jpg"” name=”myImage”>
2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3:


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="http://www.knowsky.com/”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;

  • <script src="../gg/info300.js" type="text/javascript"></script> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> 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="http://www.knowsky.com/”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="http://www.knowsky.com/”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);
    <script src="../gg/info300.js" type="text/javascript"></script> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>  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: }


    51 动态改变表单的action

    1: <form name=”myForm” action=”login.html”>
    2: Username: <input type=”text” name=”username”><br>
    3: PassWord: <input type=”password” name=”password”><br>
    4: <input type=”button” value=”Login” onClick=”this.form.submit();”>
    5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
    6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
    7: </form>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值