欢迎来到圣道地球村!
当前位置:首页 > 网络资源 > 程序源码 > JavaScript方法和技巧(三) 内容

JavaScript方法和技巧(三)

选择字号: 超大 标准 发布时间:2016-01-15 09:43 | 作者:编辑

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


  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>
  52 使用图像按钮
  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=”image” src="/”login.gif"” value=”Login”>
  5: </form>
  6:
  53 表单数据的加密
  1: <SCRIPT LANGUAGE='JavaScript'>
  2: <!--
  3: function encrypt(item) {
  4: var newItem = '';
  5: for (i=0; i < item.length; i++) {
  6: newItem += item.charCodeAt(i) + '.';
  7: }
  8: return newItem;
  9: }
  10: function encryptForm(myForm) {
  11: for (i=0; i < myForm.elements.length; i++) {
  12: myForm.elements[i].value = encrypt(myForm.elements[i].value);
  13: }
  14: }
  15:
  16: //-->
  17: </SCRIPT>
  18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
  19: Enter Some Text: <input type=text name=myField><input type=submit>
  20: </form>
  JavaScript就这么回事5:窗口和框架
  54 改变浏览器状态栏文字提示
  1: <script language=”JavaScript”>
  2: window.status = “A new status message”;
  3: </script>
  55 弹出确认提示框
  1: <script language=”JavaScript”>
  2: var userChoice = window.confirm(“Click OK or Cancel”);
  3: if (userChoice) {
  4: document.write(“You chose OK”);
  5: } else {
  6: document.write(“You chose Cancel”);
  7: }
  8: </script>
  56 提示输入
  1: <script language=”JavaScript”>
  2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
  3: document.write(“Your Name is “ + userName);
  4: </script>
  57 打开一个新窗口
  1: //打开一个名称为myNewWindow的浏览器新窗口
  2: <script language=”JavaScript”>
  3: window.open(“http://www.liu21st.com/”,”myNewWindow”);
  4: </script>
  58 设置新窗口的大小
  1: <script language=”JavaScript”>
  2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
  3: </script>
  59 设置新窗口的位置
  1: <script language=”JavaScript”>
  2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
  3: </script>
  60 是否显示工具栏和滚动栏
  1: <script language=”JavaScript”>
  2: window.open(“http:

      JavaScript方法和技巧(二)

网站分类
最新文章
随机文章