U148 Archive

Markdown archive served by Next.js

JavaScript就这么回事

来源: BlogBus 原始链接: http://11173.blogbus.com:80/s4806/ 存档链接: https://web.archive.org/web/20060215233756id_/http://11173.blogbus.com:80/s4806/

方 学无止境,不断攀登! | 首页 2006-01-04 JavaScript就这么回事 TAG： JavaScript JavaScript就这么回事1：基础知识 1 创建脚本块 1: 2: JavaScript code goes here 3: 2 隐藏脚本代码 1: 2: 5: 在不支持JavaScript的浏览器中将不执行相关代码 3 浏览器不支持的时候显示 1: 2: Hello to the non-JavaScript browser. 3: 4 链接外部脚本文件 1: <script language=”JavaScript” src="/”filename.js"”> 5 注释脚本 1: // This is a comment 2: document.write(“Hello”); // This is a comment 3: /* 4: All of this 5: is a comment 6: / 6 输出到浏览器 1: document.write(“Hello”); 7 定义变量 1: var myVariable = “some value”; 8 字符串相加 1: var myString = “String1” + “String2”; 9 字符串搜索 1: 2: 7: 10 字符串替换 1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串 1: 2: 21: 12 创建数组 1: 2: 11: 13 数组排序 1: 2: 11: 14 分割字符串 1: 2: 10: 15 弹出警告信息 1: 2: 5: 16 弹出确认框 1: 2: 5: 17 定义函数 1: 2: 8: 18 调用JS函数 1: Link text 2: <a href="/”javascript:functionName"()”>Link text 19 在页面加载完成后执行函数 1: 2: Body of the page 3: 20 条件判断 1: 2: 7: 21 指定次数循环 1: 2: 11: 22 设定将来执行 1: 2: 8: 23 定时执行函数 1: 2: 9: 24 取消定时执行 1: 2: 9: 25 在页面卸载时候执行函数 1: 2: Body of the page 3: JavaScript就这么回事2：浏览器输出 26 访问document对象 1: 2: var myURL = document.URL; 3: window.alert(myURL); 4: 27 动态输出HTML 1: 2: document.write(“Here’s some information about this document:”); 3: document.write(“”); 4: document.write(“Referring Document: “ + document.referrer + “”); 5: document.write(“Domain: “ + document.domain + “”); 6: document.write(“URL: “ + document.URL + “”); 7: document.write(“”); 8: 28 输出换行 1: document.writeln(“a”); 2: document.writeln(“b”); 29 输出日期 1: 2: var thisDate = new Date(); 3: document.write(thisDate.toString()); 4: 30 指定日期的时区 1: 2: var myOffset = -2; 3: var currentDate = new Date(); 4: var userOffset = currentDate.getTimezoneOffset()/60; 5: var timeZoneDifference = userOffset - myOffset; 6: currentDate.setHours(currentDate.getHours() + timeZoneDifference); 7: document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString()); 8: 31 设置日期输出格式 1: 2: var thisDate = new Date(); 3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes(); 4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate(); 5: document.write(thisTimeString + “ on “ + thisDateString); 6: 32 读取URL参数 1: 2: var urlParts = document.URL.split(“?”); 3: var parameterParts = urlParts[1].split(“&”); 4: for (i = 0; i < parameterParts.length; i++) { 5: var pairParts = parameterParts[i].split(“=”); 6: var pairName = pairParts[0]; 7: var pairValue = pairParts[1]; 8: document.write(pairName + “ ：“ +pairValue ); 9: } 10: 你还以为HTML是无状态的么？ 33 打开一个新的document对象 1: 2: function newDocument() { 3: document.open(); 4: document.write(“This is a New Document.”); 5: document.close(); 6: } 7: 34 页面跳转 1: 2: window.location = “http://www.liu21st.com/”; 3: 35 添加网页加载进度窗口 1: 2: 3: 4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); 5: 6: The Main Page 7: 8: 9: This is the main page 10: 11: JavaScript就这么回事3：图像 36 读取图像属性 1: <img src="/”image1.jpg"” name=”myImage”> 2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width 3: 37 动态加载图像 1: 2: myImage = new Image; 3: myImage.src = “Tellers1.jpg”; 4: 38 简单的图像替换 1: 2: rollImage = new Image; 3: rollImage.src = “rollImage1.jpg”; 4: defaultImage = new Image; 5: defaultImage.src = “image1.jpg”; 6: 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: 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: 40 函数实现的图像替换 1: 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: 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: 41 创建幻灯片 1: 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: 19: 20: 21: <img src="/”image1.jpg"” width=100 name=”slideShow”> 42 随机广告图片 1: 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] + ‘“>’); 14: JavaScript就这么回事4：表单 43 表单构成 1: 2: 3: 4: First Choice 5: Second Choice 6: 7: 8: <input type=”submit” value=”Submit Me”> 9: 44 访问表单中的文本框内容 1: 2: 3: 4: Check Text Field 45 动态复制文本框内容 1: 2: Enter some Text: 3: Copy Text: 4: 5: <a href=”#” onClick=”document.myForm.copyText.value = 6: document.myForm.myText.value;”>Copy Text Field 46 侦测文本框的变化 1: 2: Enter some Text: 3: 47 访问选中的Select 1: 2: 3: <option value=”First Choice”>1 4: <option value=”Second Choice”>2 5: <option value=”Third Choice”>3 6: 7: 8: Check Selection List 48 动态增加Select项 1: 2: 3: <option value=”First Choice”>1 4: <option value=”Second Choice”>2 5: 6: 7: 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: 49 验证表单字段 1: 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: 9: 10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”> 11: 12: 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: 2: Username: 3: Password: 4: 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: 52 使用图像按钮 1: 2: Username: 3: Password: <input type=”password”name=”password”> 4: <input type=”image” src="/”login.gif"” value=”Login”> 5: 6: 53 表单数据的加密 1: 2: 17: 18: 19: Enter Some Text: 20: JavaScript就这么回事5：窗口和框架 54 改变浏览器状态栏文字提示 1: 2: window.status = “A new status message”; 3: 55 弹出确认提示框 1: 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: 56 提示输入 1: 2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”); 3: document.write(“Your Name is “ + userName); 4: 57 打开一个新窗口 1: //打开一个名称为myNewWindow的浏览器新窗口 2: 3: window.open(“http://www.liu21st.com/”,”myNewWindow”); 4: 58 设置新窗口的大小 1: 2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300'); 3: 59 设置新窗口的位置 1: 2: window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100'); 3: 60 是否显示工具栏和滚动栏 1: 2: window.open(“http: 61 是否可以缩放新窗口的大小 1: 2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' ); 62 加载一个新的文档到当前窗口 1: <a href='#' onClick='document.location = '125a.html';' >Open New Document 63 设置页面的滚动位置 1: 2: if (document.all) { //如果是IE浏览器则使用scrollTop属性 3: document.body.scrollTop = 200; 4: } else { //如果是NetScape浏览器则使用pageYOffset属性 5: window.pageYOffset = 200; 6: } 64 在IE中打开全屏窗口 1: <a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window 65 新窗口和父窗口的操作 1: 2: //定义新窗口 3: var newWindow = window.open(“128a.html”,”newWindow”); 4: newWindow.close(); //在父窗口中关闭打开的新窗口 5: 6: 在新窗口中关闭父窗口 7: window.opener.close() 66 往新窗口中写内容 1: 2: var newWindow = window.open(“”,”newWindow”); 3: newWindow.document.open(); 4: newWindow.document.write(“This is a new window”); 5: newWIndow.document.close(); 6: 67 加载页面到框架页面 1: 2: <frame name=”frame1” src="/”135a.html"”> 3: <frame name=”frame2” src="/”about:blank"”> 4: 5: 在frame1中加载frame2中的页面 6: parent.frame2.document.location = “135b.html”; 68 在框架页面之间共享脚本 如果在frame1中html文件中有个脚本 1: function doAlert() { 2: window.alert(“Frame 1 is loaded”); 3: } 那么在frame2中可以如此调用该方法 1: 2: This is frame 2. 3: 69 数据公用 可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用 1: 2: var persistentVariable = “This is a persistent value”; 3: 4: 5: <frame name=”frame1” src="/”138a.html"”> 6: <frame name=”frame2” src="/”138b.html"”> 7: 这样在frame1和frame2中都可以使用变量persistentVariable 70 框架代码库 根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库 1: 2: <frame name=”codeFrame” src="/”140code.html"”> 3: <frame name=”frame1” src="/”140a.html"”> 4: <frame name=”frame2” src="/”140b.html"”> 5: 方 发表于 14:16:47 | 阅读全文 | 评论(0) | 引用(0) | 编辑 2006-01-04 javascript 常用代码大全 TAG： JavaScript 一、验证类 1、数字验证内 1.1 整数 /^(-|+)?\d+$/.test(str) 1.2 大于0的整数 （用于传来的ID的验证) /^\d+$/.test(str) 1.3 负整数的验证 /^-\d+$/.test(str) 2、时间类 2.1 短时间，形如 (13:04:06) function isTime(str) { var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/); if (a == null) {alert('输入的参数不是时间格式'); return false;} if (a[1]>24 || a[3]>60 || a[4]>60) { alert("时间格式不对"); return false } return true; } 2.2 短日期，形如 ( 2003-12-05 ) function strDateTime(str) { var r = str.match(/^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2})$/); if(r==null)return false; var d= new Date(r[1], r[3]-1, r[4]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]); } 2.3 长时间，形如 (2003-12-05 13:04:06) function strDateTime(str) { var reg = /^(\d{1,4})(-|/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; var r = str.match(reg); if(r==null)return false; var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]); } 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行文本框的值不能超过sMaxStrleng 3.4 多行文本框的值不能少于sMixStrleng 3.5 判断单选框是否选择。 3.6 判断复选框是否选择. 3.7 复选框的全选，多选，全不选，反选 3.8 文件上传过程中判断文件类型 4、字符类 4.1 判断字符全部由a-Z或者是A-Z的字字母组成 4.2 判断字符由字母和数字组成。 4.3 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母 /^([a-zA-z_]{1})([\w])$/g.test(str) 4.4 字符串替换函数.Replace(); 5、浏览器类 5.1 判断浏览器的类型 window.navigator.appName 5.2 判断ie的版本 window.navigator.appVersion 5.3 判断客户端的分辨率 window.screen.height; window.screen.width; 6、结合类 6.1 email的判断。 function ismail(mail) { return(new RegExp(/^\w+((-\w+)|(.\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/).test(mail)); } 6.2 手机号码的验证 6.3 身份证的验证 function isIdCardNo(num) { if (isNaN(num)) {alert("输入的不是数字！"); return false;} var len = num.length, re; if (len == 15) re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/); else if (len == 18) re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/); else {alert("输入的数字位数不对！"); return false;} var a = num.match(re); if (a != null) { if (len==15) { var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]); var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } else { var D = new Date(a[3]+"/"+a[4]+"/"+a[5]); var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5]; } if (!B) {alert("输入的身份证号 "+ a[0] +" 里出生日期不对！"); return false;} } return true; } 画图:

写注册表：

TABLAE相关(客户端动态增加行列）