JavaScript

来源：互联网发布：淘宝店卖家版官方下载编辑：程序博客网时间：2024/06/11 18:27

JavaScript基础

If..else if...else 语句：<html><body><script type="text/javascript">var d = new Date()var time = d.getHours()if (time<10){document.write("<b>Good morning</b>")}else if (time>=10 && time<16){document.write("<b>Good day</b>")}else{document.write("<b>Hello World!</b>")}</script><p>本例演示 if..else if...else 语句。</p></body></html>var r=Math.random()随机数确认框：<html><head><script type="text/javascript">function show_confirm(){var r=confirm("Press a button!");if (r==true)  {  alert("You pressed OK!");  }else  {  alert("You pressed Cancel!");  }}</script></head><body><input type="button" onclick="show_confirm()" value="Show a confirm box" /></body></html>提示框：<html><head><script type="text/javascript">function disp_prompt()  {  var name=prompt("请输入您的名字","Bill Gates")  if (name!=null && name!="")    {    document.write("你好！" + name + " 今天过得怎么样？")    }  }</script></head><body><input type="button" onclick="disp_prompt()" value="显示提示框" /></body></html>带有参数的函数：<html><head><script type="text/javascript">function myfunction(txt){alert(txt)}</script></head><body><form><input type="button" onclick="myfunction('您好！')" value="调用函数"></form><p>通过点击这个按钮，可以调用一个带参数的函数。该函数会输出这个参数。</p></body></html>带有参数并返回值的函数：<html><head><script type="text/javascript">function product(a,b){return a*b}</script></head><body><script type="text/javascript">document.write(product(6,5))</script><p>body 部分中的脚本调用一个带有两个参数（6 和 5）的函数。</p><p>该函数会返回这两个参数的乘积。</p></body></html>for循环：<html><body><script type="text/javascript">for (i = 0; i <= 5; i++){document.write("数字是 " + i)document.write("<br />")}</script></body></html>while循环：<script type="text/javascript">i = 0while (i <= 5){document.write("数字是 " + i)document.write("<br />")i++}</script>For...In 声明来遍历数组内的元素：<html><body><script type="text/javascript">var xvar mycars = new Array()mycars[0] = "宝马"mycars[1] = "奔驰"mycars[2] = "宾利"for (x in mycars){document.write(mycars[x] + "<br />")}</script></body></html>

JavaScript 错误处理

<html><head><script type="text/javascript">var txt=""function message(){try   {   adddlert("Welcome guest!")   }catch(err)   {   txt="本页中存在错误。\n\n"   txt+="错误描述：" + err.description + "\n\n"   txt+="点击“确定”继续。\n\n"   alert(txt)   }}</script></head><body><input type="button" value="查看消息" onclick="message()" /></body></html>确认框的 try...catch 语句：<script type="text/javascript">var txt=""function message(){try   {   adddlert("Welcome guest!")   }catch(err)   {     txt="本页中存在错误。\n\n"     txt+="点击“确定”继续查看本页，\n"     txt+="点击“取消”返回首页。\n\n"     if(!confirm(txt))         {         document.location.href="/index.html"         }   }}</script>document.location.href="/index.html"跳转链接throw 声明：<html><body><script type="text/javascript">var x=prompt("请输入 0 至 10 之间的数：","")try{ if(x>10)   throw "Err1" else if(x<0)  throw "Err2"else if(isNaN(x))  throw "Err3"} catch(er){if(er=="Err1")   alert("错误！该值太大！")if(er == "Err2")   alert("错误！该值太小！") if(er == "Err3")   alert("错误！该值不是数字！") }</script></body></html>onerror 事件：<html><head><script type="text/javascript">onerror=handleErrvar txt=""function handleErr(msg,url,l){txt="本页中存在错误。\n\n"txt+="错误：" + msg + "\n"txt+="URL: " + url + "\n"txt+="行：" + l + "\n\n"txt+="点击“确定”继续。\n\n"alert(txt)return true}function message(){adddlert("Welcome guest!")}</script></head><body><input type="button" value="查看消息" onclick="message()" /></body></html>

js实例

按钮动画：<html><head><script type="text/javascript">function mouseOver(){document.b1.src ="/i/eg_mouse.jpg"}function mouseOut(){document.b1.src ="/i/eg_mouse2.jpg"}</script></head><body><a href="/index.html" target="_blank"><img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"  onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html>简单的计时：<html><head><script type="text/javascript">function timedText(){var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)}</script></head><body><form><input type="button" value="显示计时的文本" onClick="timedText()"><input type="text" id="txt"></form><p>点击上面的按钮。输入框会显示出已经逝去的时间（2、4、6 秒）。</p></body></html>计时事件制作的钟表：<html><head><script type="text/javascript">function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)}function checkTime(i){if (i<10)   {i="0" + i}  return i}</script></head><body onload="startTime()"><div id="txt"></div></body></html>创建用于对象的模板：<html><body><script type="text/javascript">function person(firstname,lastname,age,eyecolor){this.firstname=firstnamethis.lastname=lastnamethis.age=agethis.eyecolor=eyecolor}myFather=new person("John","Adams",35,"black")document.write(myFather.firstname + " 的年龄是 " + myFather.age + " 岁。")</script></body></html>

为字符串添加样式：<html><body><script type="text/javascript">var txt="Hello World!"document.write("<p>Big: " + txt.big() + "</p>")document.write("<p>Small: " + txt.small() + "</p>")document.write("<p>Bold: " + txt.bold() + "</p>")document.write("<p>Italic: " + txt.italics() + "</p>")document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")document.write("<p>Fixed: " + txt.fixed() + "</p>")document.write("<p>Strike: " + txt.strike() + "</p>")document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")document.write("<p>Subscript: " + txt.sub() + "</p>")document.write("<p>Superscript: " + txt.sup() + "</p>")document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")</script></body></html>替换字符：<html><body><script type="text/javascript">var str="Visit Microsoft!"document.write(str.replace(/Microsoft/,"W3School"))</script></body></html>创建数组：<html><body><script type="text/javascript">var xvar mycars = new Array()mycars[0] = "Saab"mycars[1] = "Volvo"mycars[2] = "BMW"for (i=0;i<mycars.length;i++){document.write(mycars[i] + "<br />")}/*for (x in mycars){document.write(mycars[x] + "<br />")}*/</script></body></html>for循环和for...in遍历合并两个数组：<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"var arr2 = new Array(3)arr2[0] = "James"arr2[1] = "Adrew"arr2[2] = "Martin"document.write(arr.concat(arr2))</script>数组元素组成字符串：<script type="text/javascript">var arr = new Array(3);arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr.join());document.write("<br />");document.write(arr.join("."));</script>文字数组 - sort()：<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "<br />")document.write(arr.sort())</script>数字数组 - sort()：<script type="text/javascript">function sortNumber(a, b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "<br />")document.write(arr.sort(sortNumber))</script>检查逻辑值：<script type="text/javascript">var b1=new Boolean( 0)var b2=new Boolean(1)var b3=new Boolean("")var b4=new Boolean(null)var b5=new Boolean(NaN)var b6=new Boolean("false")document.write("0 是逻辑的 "+ b1 +"<br />")document.write("1 是逻辑的 "+ b2 +"<br />")document.write("空字符串是逻辑的 "+ b3 + "<br />")document.write("null 是逻辑的 "+ b4+ "<br />")document.write("NaN 是逻辑的 "+ b5 +"<br />")document.write("字符串 'false' 是逻辑的 "+ b6 +"<br />")</script>/*0 是逻辑的 false1 是逻辑的 true空字符串是逻辑的 falsenull 是逻辑的 falseNaN 是逻辑的 false字符串 'false' 是逻辑的 true*/

Math（算数对象）

round() 对数字进行舍入:<script type="text/javascript">document.write(Math.round(0.60) + "<br />")document.write(Math.round(0.50) + "<br />")document.write(Math.round(0.49) + "<br />")document.write(Math.round(-4.40) + "<br />")document.write(Math.round(-4.60))</script>/*110-4-5*/random() 来返回 0 到 1 之间的随机数:<script type="text/javascript">document.write(Math.random())</script>max() 来返回两个给定的数中的较大的数:<script type="text/javascript">document.write(Math.max(5,7) + "<br />")document.write(Math.max(-3,5) + "<br />")document.write(Math.max(-3,-5) + "<br />")document.write(Math.max(7.25,7.30))</script>min() 来返回两个给定的数中的较小的数:<script type="text/javascript">document.write(Math.min(5,7) + "<br />")document.write(Math.min(-3,5) + "<br />")document.write(Math.min(-3,-5) + "<br />")document.write(Math.min(7.25,7.30))</script>

阅读全文

0 0