本文共 4545 字，大约阅读时间需要 15 分钟。
1.JavaScript 浏览器检测
navigator 浏览器:navigator.appName 浏览器版本:navigator.appVersion 代码:navigator.appCodeName 平台:navigator.platform Cookies 启用:navigator.cookieEnabled 浏览器的用户代理报头:navigator.userAgent 以下信息可能找不到 MinorVersion:navigator.appMinorVersion CPUClass:navigator.cpuClass OnLine:navigator.onLine BrowserLanguage::navigator.browserLanguage SystemLanguage:navigator.systemLanguage UserLanguage:navigator.userLanguage 重要事项：在 IE 5.0 及以后版本中，版本号是不正确的！在 IE 5.0 和 IE 6.0 中，微软为 appVersion 字符串赋的值是 4.0。 案例: 判断浏览器信息 实际上 判断浏览器、系统、平台都用的navigator.userAgent function detectBrowser() { var browser = navigator.appName var b_version = navigator.appVersion var version = parseFloat(b_version) if ((browser == "Netscape" || browser == "Microsoft Internet Explorer") && (version >= 4)) { alert("Your browser is good enough!") } else { alert("It's time to upgrade your browser!") } } 2.JavaScript Cookies cookie 用来识别用户 每个key都有自己的失效时间,并且设置一个key的value不会影响到其他KEY escape()方法把字符串按 URL 编码方法来编码 toGMTString()设定 Cookie 的时效日期都是用 GMT 格式的时间的，其它格式的时间是没有作用的。 不指定有效期expires 默认关闭浏览器后失效 function setCookie(key, value, expiredays) { var exdate = new Date() exdate.setDate(exdate.getDate() + expiredays) document.cookie = key + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toGMTString()); } function getCookie(key) { if (document.cookie.length > 0) { keyStart = document.cookie.indexOf(key + "=") if (keyStart != -1) { keyStart = keyStart + key.length + 1 keyEnd = document.cookie.indexOf(";", keyStart) if (keyEnd == -1) keyEnd = document.cookie.length return unescape(document.cookie.substring(keyStart, keyEnd)) } } return "" } function delCookie(key) { var expires = new Date(); expires.setTime(expires.getTime() - 1); document.cookie = key + '=value;expires=' + expires.toGMTString(); } 3.JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 (1)验证表单通过form标签的onsubmit属性，来调用JS方法实现，如果JS方法返回false，则不提交数据 (2)可以在标签中指定name,并在JS方法中用with语句方便开发。需要注意的是，如果有重名的情况下,请使用tagName[index] (3)如果判断为false，可以通过tagName.focus获得焦点 案例 <form id="testForm" action="submitpage.htm" οnsubmit="return validate_form(this)" method="post"> Email: <input type="text" name="email" size="30"> <input type="submit" value="Submit"> </form> function validate_form(thisform) { with (thisform) { if (email.length > 1) { if (validate_required(email[0], "Email must be filled out!") == false) { email[0].focus(); return false } } else { if (validate_required(email, "Email must be filled out!") == false) { email.focus(); return false } } } } function validate_required(field, alerttxt) { with (field) { if (value == null || value == "") { alert(alerttxt); return false } else { // return truedocument.testForm.submit();
}
} } 4.JavaScript 动画 我们可以使用 JavaScript 来创建动态的图像。 利用两个不同的事件来驱动两个相应的函数，来切换两张对应的图片以创造出动画效果。 窍门是：使用 JavaScript 通过不同的事件来切换不同的图像。比如利用onmouseover和onmouseout 案例: <a href="/index.html" target="_blank"> <img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()" /> </a> function mouseOver() { document.b1.src = "/i/eg_mouse.jpg" } function mouseOut() { document.b1.src = "/i/eg_mouse2.jpg" } 5.JavaScript 图像地图 图像地图指的是带有可点击区域的图像。 图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就会到达相关的链接。 我们可向图像地图内部的 <area> 标签添加（能调用JavaScript的）事件。 <area> 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。 6.JavaScript 计时 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 JavaScript 计时事件 通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScritp 中使用计时事件是很容易的，两个关键方法是: setTimeout() 未来的某时执行代码 语法 var t=setTimeout("javascript语句",毫秒) clearTimeout() 取消setTimeout() 语法 clearTimeout(setTimeout_variable) 案例 计时和消除计时 var c = 0 var t function timedCount() { document.getElementById('txt').value = c c = c + 1 t = setTimeout("timedCount()", 1000) } function stopCount() { clearTimeout(t) } 7.创建你自己的 JavaScript 对象 JavaScript 对象 JavaScript 拥有若干内置的对象，比如 String、Date、Array 等等。除了这些对象，你还可以创建自己的对象。 对象仅仅是一种特殊的数据类型而已，并拥有一系列的属性和方法。 让我们用一个例子来理解：一个人就是一个对象。属性是和对象有关的值。人的属性包括其名字、身高、体重、年纪、肤色、眼睛的颜色等等。所有的人都有这些属性，但是每个人的属性的值却各不相同。对象也拥有方法。方法是可施加于对象上的行为。人的方法可能是吃、睡、工作、玩等等。 案例 function person(firstname, lastname, age, eyecolor) { var obj = new Object(); obj.firstname = firstname obj.lastname = lastname obj.age = age obj.eyecolor = eyecolor obj.getFirstname = function() { alert('1111'); return this.firstname; }; return obj } var person = person("John", "Adams", 35, "black") document.write(person.getFirstname() + " 的年龄是 " + person.age + " 岁。")
转载地址：http://qoyci.baihongyu.com/