自学JavaScript的几个例子
学习了广泛使用的浏览器脚本JavaScript和HTML的DOM模型（也是用JavaScript实现），下面给出两个自己学习时的例子，具体JavaScript语法请参考W3C相关网页（http://www.w3school.com.cn/b.asp）。为了整体程序结构的清晰，编写的程序将结构（.html文件）、表现（.css文件）和表现（.js文件）分开表示。
例子1：并没有什么用处，几种JavaScript语法的堆砌：
ex1.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>JavaScript Basis-1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Wayne Ng" /> <meta name="description" content="JavaScript Basis-1" /> <meta name="revised" content="Wayne Ng, 2016/1/18" /> <link rel="stylesheet" type="text/css" href="style1.css" > </head> <body id = "b" onload = "loadTips()"> <div> <h1>当前时刻</h1> <p id = "time"></p> </div> <div> <h1>改变背景颜色</h1> <button type = "button" onclick = "changeColor()">改变当前背景</button> </div> <div> <h1 onmouseover = "mOver(this)" onmouseout = "mOut(this)">进制转换</h1 > <p>十进制(合法输入数值范围（0-255）)：</p> <input id = "decNum" type = "text" onfocus = "catchFocus(this)"/> <button type = "button" onclick = "decChange()">测试输入值</button> <p id="errResult"></p> <p id="binResult"></p> <p id="octResult"></p> <p id="hexResult"></p> </div> <div> <h1>简单计时器</h1> <input type = "txt" id = "timeCount"><br /> <button type = "button" onclick = "startCount()">开始</button> <button type = "button " onclick = "stopCount()">停止</button> <button type = "button" onclick = "resetCount()">清零</button> </div> <script type="text/javascript" src="func1.js"></script> </body> </html>
style1.css文件：
p{ font-size: 20px; font-style: italic; font-weight: bold; }
func1.js文件：
//用于弹出提示画面 function loadTips(){ alert("欢迎使用该进制转换页面o(╯□╰)o!"); startTime(); } //用于进制转换 function decChange(){ var choice = confirm("确认进行进制转换？"); if(choice){ var binRes = document.getElementById("binResult"); var octRes = document.getElementById("octResult"); var hexRes = document.getElementById("hexResult"); var errRes = document.getElementById("errResult"); //清理上一次运行结果 var blankStr = ""; binRes.innerHTML = octRes.innerHTML = hexRes.innerHTML = errRes.innerHTML = blankStr; try{ var decVal = Number(document.getElementById('decNum').value); if(decVal == ""){throw "值为空";} if(isNaN(decVal)){throw "不是数字";} if(decVal < 0 || decVal > 255){throw "输入值不在给定合法范围内";} binRes.innerHTML = "二进制：" + decVal.toString(2); octRes.innerHTML = "八进制：" + decVal.toString(8); hexRes.innerHTML = "十六进制：" + decVal.toString(16); } catch(err){ errRes.innerHTML = "错误：" + err + "。"; } } } //用于更换当前页面背景 function changeColor(){ //利用Math对象的random函数随机生成下一背景颜色 var rChannel = Math.floor(256 * Math.random()).toString(16); var gChannel = Math.floor(256 * Math.random()).toString(16); var bChannel = Math.floor(256 * Math.random()).toString(16); var newColor = "#" + rChannel.toString() + gChannel.toString() + bChannel.toString(); document.getElementById("b").style.background = newColor; } //输入字符捕获焦点 function catchFocus(obj){ obj.style.background = "#00FF7F"; } //鼠标事件（鼠标置于目标上或离开目标） function mOver(obj){ obj.style.color = "#FF0000"; } function mOut(obj){ obj.style.color = "#000000"; } //显示时钟 function startTime(){ var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); //修正数字小于10的情况 m = preFix(m); s = preFix(s); document.getElementById("time").innerHTML = h + ":" + m + ":" + s; t = setTimeout("startTime()" , 500); } //在小于10的数字前面加前置的0 function preFix(val){ if(val < 10){ val = "0" + val; } return val; } //简单计时器 var c = new Number(0); var t; document.getElementById("timeCount").value = c.toFixed(2); //开始计时 function startCount(){ document.getElementById("timeCount").value = c.toFixed(2); c = c + 0.01; t = setTimeout("startCount()" , 10); } //停止计时 function stopCount(){ clearTimeout(t); } // 清零 function resetCount(){ clearTimeout(t); c = 0; document.getElementById("timeCount").value = c.toFixed(2); }
程序效果：
例子2：最近在读一本《伯恩斯新情绪疗法》（是一本治疗抑郁症的handbook），下面页面实现了其中一个测试易于程度的表格，有空的同学可以测一测，心理郁结要及时派遣（这本书不错，可以看看）。
ex2.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>JavaScript Basis-2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Wayne Ng" /> <meta name="description" content="JavaScript Basis-2" /> <meta name="revised" content="Wayne Ng, 2016/1/19" /> <link rel="stylesheet" type="text/css" href="style2.css" > </head> <body> <h1>贝克抑郁清单(共21题，请仔细作答O(∩_∩)O~)</h1> <div class = "question"> <form> <p id = "n1">No.1<p> <input type = "radio" name = "q1" id = "1" value = "0" onclick = "getMark(this)" /> 0 我没觉得悲伤。<br /> <input type = "radio" name = "q1" id = "1" value = "1" onclick = "getMark(this)" /> 1 我感到悲伤。<br /> <input type = "radio" name = "q1" id = "1" value = "2" onclick = "getMark(this)" /> 2 我一直感到悲伤，没法儿摆脱这种感觉。<br /> <input type = "radio" name = "q1" id = "1" value = "3" onclick = "getMark(this)" /> 3 我这么悲伤、不快乐，我都顶不住了。 </form> <form> <p id = "n2">No.2<p> <input type = "radio" name = "q2" id = "2" value = "0" onclick = "getMark(this)" /> 0 我对将来并不特别感到泄气。<br /> <input type = "radio" name = "q2" id = "2" value = "1" onclick = "getMark(this)" /> 1 我对将来感到泄气。<br /> <input type = "radio" name = "q2" id = "2" value = "2" onclick = "getMark(this)" /> 2 我感到没有盼头。<br /> <input type = "radio" name = "q2" id = "2" value = "3" onclick = "getMark(this)" /> 3 我感到将来没有希望，情况也不可能改善。 </form> <form> <p id = "n3">No.3<p> <input type = "radio" name = "q3" id = "3" value = "0" onclick = "getMark(this)" /> 0 我不觉得自己是一个失败者。<br /> <input type = "radio" name = "q3" id = "3" value = "1" onclick = "getMark(this)" /> 1 我觉得自己比一般人要失败。<br /> <input type = "radio" name = "q3" id = "3" value = "2" onclick = "getMark(this)" /> 2 回首往事，我发现我的人生充满失败。<br /> <input type = "radio" name = "q3" id = "3" value = "3" onclick = "getMark(this)" /> 3 我感觉我是一个彻底失败的人。 </form> <form> <p id = "n4">No.4<p> <input type = "radio" name = "q4" id = "4" value = "0" onclick = "getMark(this)" /> 0 我像过去一样对事情感到满意。<br /> <input type = "radio" name = "q4" id = "4" value = "1" onclick = "getMark(this)" /> 1 我不像过去那样欣赏事物。<br /> <input type = "radio" name = "q4" id = "4" value = "2" onclick = "getMark(this)" /> 2 我不再对事情真正感到满意。<br /> <input type = "radio" name = "q4" id = "4" value = "3" onclick = "getMark(this)" /> 3 我对什么事情都不满意，甚至感到烦躁。 </form> <form> <p id = "n5">No.5<p> <input type = "radio" name = "q5" id = "5" value = "0" onclick = "getMark(this)" /> 0 我没觉得有什么特别的负罪感。<br /> <input type = "radio" name = "q5" id = "5" value = "1" onclick = "getMark(this)" /> 1 好多时候我有一种负罪感。<br /> <input type = "radio" name = "q5" id = "5" value = "2" onclick = "getMark(this)" /> 2 我大部分时间感到有一种负罪感。<br /> <input type = "radio" name = "q5" id = "5" value = "3" onclick = "getMark(this)" /> 3 我一直有一种负罪感。 </form> <form> <p id = "n6">No.6<p> <input type = "radio" name = "q6" id = "6" value = "0" onclick = "getMark(this)" /> 0 我没有觉得我正受到惩罚。<br /> <input type = "radio" name = "q6" id = "6" value = "1" onclick = "getMark(this)" /> 1 我感到自己或许受到了惩罚。<br /> <input type = "radio" name = "q6" id = "6" value = "2" onclick = "getMark(this)" /> 2 我期望受到惩罚。<br /> <input type = "radio" name = "q6" id = "6" value = "3" onclick = "getMark(this)" /> 3 我觉得自己正受到惩罚。 </form> <form> <p id = "n7">No.7<p> <input type = "radio" name = "q7" id = "7" value = "0" onclick = "getMark(this)" /> 0 我不对自己感到失望。<br /> <input type = "radio" name = "q7" id = "7" value = "1" onclick = "getMark(this)" /> 1 我对自己感到失望。<br /> <input type = "radio" name = "q7" id = "7" value = "2" onclick = "getMark(this)" /> 2 我讨厌我自己。<br /> <input type = "radio" name = "q7" id = "7" value = "3" onclick = "getMark(this)" /> 3 我恨我自己。 </form> <form> <p id = "n8">No.8<p> <input type = "radio" name = "q8" id = "8" value = "0" onclick = "getMark(this)" /> 0 我没觉得自己比其他人更糟。<br /> <input type = "radio" name = "q8" id = "8" value = "1" onclick = "getMark(this)" /> 1 我因为自己的弱点和错误而对自己提出批评。<br /> <input type = "radio" name = "q8" id = "8" value = "2" onclick = "getMark(this)" /> 2 我一直因为自己犯下的错误而责备自己。<br /> <input type = "radio" name = "q8" id = "8" value = "3" onclick = "getMark(this)" /> 3 我为发生的所有坏事情而责备自己。 </form> <form> <p id = "n9">No.9<p> <input type = "radio" name = "q9" id = "9" value = "0" onclick = "getMark(this)" /> 0 我压根儿就没有想过要杀掉自己。<br /> <input type = "radio" name = "q9" id = "9" value = "1" onclick = "getMark(this)" /> 1 我曾经想过要杀掉自己，但是没有实施。<br /> <input type = "radio" name = "q9" id = "9" value = "2" onclick = "getMark(this)" /> 2 我愿意杀掉自己。<br /> <input type = "radio" name = "q9" id = "9" value = "3" onclick = "getMark(this)" /> 3 只要一有机会我就杀掉自己。 </form> <form> <p id = "n10">No.10<p> <input type = "radio" name = "q10" id = "10" value = "0" onclick = "getMark(this)" /> 0 我不再像过去那样哭泣了。<br /> <input type = "radio" name = "q10" id = "10" value = "1" onclick = "getMark(this)" /> 1 我现在比过去哭得要多。<br /> <input type = "radio" name = "q10" id = "10" value = "2" onclick = "getMark(this)" /> 2 我现在总是哭。<br /> <input type = "radio" name = "q10" id = "10" value = "3" onclick = "getMark(this)" /> 3 我过去还能哭，但是现在想哭也哭不出来了。 </form> <form> <p id = "n11">No.11<p> <input type = "radio" name = "q11" id = "11" value = "0" onclick = "getMark(this)" /> 0 我不再像过去那样容易被激怒了。<br /> <input type = "radio" name = "q11" id = "11" value = "1" onclick = "getMark(this)" /> 1 我比过去稍稍容易被激怒。<br /> <input type = "radio" name = "q11" id = "11" value = "2" onclick = "getMark(this)" /> 2 很多时候我很苦恼或恼怒。<br /> <input type = "radio" name = "q11" id = "11" value = "3" onclick = "getMark(this)" /> 3 现在我一直感觉很恼怒。 </form> <form> <p id = "n12">No.12<p> <input type = "radio" name = "q12" id = "12" value = "0" onclick = "getMark(this)" /> 0 我一直没有对别人失去兴趣。<br /> <input type = "radio" name = "q12" id = "12" value = "1" onclick = "getMark(this)" /> 1 我不像过去那样对别人有兴趣了。<br /> <input type = "radio" name = "q12" id = "12" value = "2" onclick = "getMark(this)" /> 2 我对别人基本上失去了兴趣。<br /> <input type = "radio" name = "q12" id = "12" value = "3" onclick = "getMark(this)" /> 3 我对别人完全失去了兴趣。 </form> <form> <p id = "n13">No.13<p> <input type = "radio" name = "q13" id = "13" value = "0" onclick = "getMark(this)" /> 0 我像过去那样做出决定。<br /> <input type = "radio" name = "q13" id = "13" value = "1" onclick = "getMark(this)" /> 1 和过去比，我现在总是推迟做决定。<br /> <input type = "radio" name = "q13" id = "13" value = "2" onclick = "getMark(this)" /> 2 和过去比，我现在做起决定来更加困难了。<br /> <input type = "radio" name = "q13" id = "13" value = "3" onclick = "getMark(this)" /> 3 我不再能够做出决定。 </form> <form> <p id = "n14">No.14<p> <input type = "radio" name = "q14" id = "14" value = "0" onclick = "getMark(this)" /> 0 我没觉得自己比过去看起来更糟。<br /> <input type = "radio" name = "q14" id = "14" value = "1" onclick = "getMark(this)" /> 1 我担心我看起来老了，不再吸引人了。<br /> <input type = "radio" name = "q14" id = "14" value = "2" onclick = "getMark(this)" /> 2 我感到自己的形象老是在变化，已经变得不再吸引人了。<br /> <input type = "radio" name = "q14" id = "14" value = "3" onclick = "getMark(this)" /> 3 我相信我很丑陋。 </form> <form> <p id = "n15">No.15<p> <input type = "radio" name = "q15" id = "15" value = "0" onclick = "getMark(this)" /> 0 我可以和过去一样工作得很好。<br /> <input type = "radio" name = "q15" id = "15" value = "1" onclick = "getMark(this)" /> 1 需要加倍努力我才能够开始工作。<br /> <input type = "radio" name = "q15" id = "15" value = "2" onclick = "getMark(this)" /> 2 我需要费很大的劲才能做成一件事。<br /> <input type = "radio" name = "q15" id = "15" value = "3" onclick = "getMark(this)" /> 3 我什么工作也干不了了。 </form> <form> <p id = "n16">No.16<p> <input type = "radio" name = "q16" id = "16" value = "0" onclick = "getMark(this)" /> 0 我和过去一样能睡。<br /> <input type = "radio" name = "q16" id = "16" value = "1" onclick = "getMark(this)" /> 1 我不像过去那样能睡。<br /> <input type = "radio" name = "q16" id = "16" value = "2" onclick = "getMark(this)" /> 2 我比过去要早醒 1—2 个小时，而且很难再入睡。<br /> <input type = "radio" name = "q16" id = "16" value = "3" onclick = "getMark(this)" /> 3 我比过去要早醒好几个小时，而且没法儿再入睡。 </form> <form> <p id = "n17">No.17<p> <input type = "radio" name = "q17" id = "17" value = "0" onclick = "getMark(this)" /> 0 我和过去一样不知疲倦。<br /> <input type = "radio" name = "q17" id = "17" value = "1" onclick = "getMark(this)" /> 1 我比过去更容易疲劳。<br /> <input type = "radio" name = "q17" id = "17" value = "2" onclick = "getMark(this)" /> 2 我几乎做任何事情都容易疲劳。<br /> <input type = "radio" name = "q17" id = "17" value = "3" onclick = "getMark(this)" /> 3 我很疲劳，什么也做不了。 </form> <form> <p id = "n18">No.18<p> <input type = "radio" name = "q18" id = "18" value = "0" onclick = "getMark(this)" /> 0 我的胃口和过去一样好。<br /> <input type = "radio" name = "q18" id = "18" value = "1" onclick = "getMark(this)" /> 1 我的胃口没有过去好。<br /> <input type = "radio" name = "q18" id = "18" value = "2" onclick = "getMark(this)" /> 2 我的胃口现在更糟了。<br /> <input type = "radio" name = "q18" id = "18" value = "3" onclick = "getMark(this)" /> 3 我一点胃口也没有。 </form> <form> <p id = "n19">No.19<p> <input type = "radio" name = "q19" id = "19" value = "0" onclick = "getMark(this)" /> 0 最近，我的体重没有怎么（如果有的话）减轻。<br /> <input type = "radio" name = "q19" id = "19" value = "1" onclick = "getMark(this)" /> 1 我的体重已经减轻了五磅多了。<br /> <input type = "radio" name = "q19" id = "19" value = "2" onclick = "getMark(this)" /> 2 我的体重已经减轻了十磅多了。<br /> <input type = "radio" name = "q19" id = "19" value = "3" onclick = "getMark(this)" /> 3 我的体重已经减轻了十五磅多了。 </form> <form> <p id = "n20">No.20<p> <input type = "radio" name = "q20" id = "20" value = "0" onclick = "getMark(this)" /> 0 我和过去一样并不担心自己的健康。<br /> <input type = "radio" name = "q20" id = "20" value = "1" onclick = "getMark(this)" /> 1 我为自己身体出现的问题感到担心，如腰酸背痛、胃烧、便秘。<br /> <input type = "radio" name = "q20" id = "20" value = "2" onclick = "getMark(this)" /> 2 我很担心自己身体出现的问题，很难再想别的事了。<br /> <input type = "radio" name = "q20" id = "20" value = "3" onclick = "getMark(this)" /> 3 我非常担心自己身体出现的问题，根本顾不上别的事了。 </form> <form> <p id = "n21">No.21<p> <input type = "radio" name = "q21" id = "21" value = "0" onclick = "getMark(this)" /> 0 我对性的兴趣依然不减。<br /> <input type = "radio" name = "q21" id = "21" value = "1" onclick = "getMark(this)" /> 1 我不像过去那样对性那么有兴趣了。<br /> <input type = "radio" name = "q21" id = "21" value = "2" onclick = "getMark(this)" /> 2 我现在对性很少有兴趣了。<br /> <input type = "radio" name = "q21" id = "21" value = "3" onclick = "getMark(this)" /> 3 我对性完全失去了兴趣。 </form> <button type = "button" onclick = "calMark()">确认输入</button> <button type = "button" onclick = "clearChoice()">再测一次</button> <p id = "result"></p> </div> <div> <table id = "description"> <tr> <th>贝克抑郁清单解释</th> </tr> <tr> <td>总 分</td><td>抑郁程度</td> </tr> <tr> <td>1—10</td><td>这个上下的分数可以认为是正常的</td> </tr> <tr> <td>11—16</td><td>轻度情绪紊乱</td> </tr> <tr> <td>17—20</td><td>临床临界抑郁</td> </tr> <tr> <td>21—30</td><td>中度抑郁</td> </tr> <tr> <td>31—40</td><td>严重抑郁</td> </tr> <tr> <td>40 以上</td><td>极端抑郁</td> </tr> </table> </div> <script type="text/javascript" src="func2.js"></script> </body> </html>
style2.css文件：
body{ background: url("http://photo.enterdesk.com/2011-4-14/enterdesk.com-9FDCF3D2DACB51C827AE8386A8F748ED.jpg"); width: 100%; height: 100%; background-attachment: fixed; } h1{ color: #4169E1; } div.question{ font-style: italic; font-weight: 500; }
func2.js文件：
var iQuestionNum = 21; var sOriginalColor = document.getElementById("n1").style.background; //将初始radio选项清空 function clearChoice(){ for(var i = 0; i < iQuestionNum; ++i){ var achoice = document.getElementsByName("q" + (i + 1)); for(var j = 0; j < achoice.length; ++j){ achoice[j].checked = false; } } document.getElementById("result").innerHTML = ""; amark = new Array(); document.getElementById("description").style.visibility = "hidden"; } var amark; //选中radio中项目时设置对应值 function getMark(obj){ amark[parseInt(obj.id) - 1] = parseInt(obj.value); } //计算最终结果 function calMark(){ var isum = 0; aempty = new Array(); for(var i = 0; i < iQuestionNum; ++i){ if(isNaN(amark[i])){ aempty.push(i + 1); document.getElementById("n" + (i + 1)).style.background = "red"; } else{ isum += amark[i]; document.getElementById("n" + (i + 1)).style.background = sOriginalColor; } } if(aempty.length){ alert("第" + aempty.join() + "题未选择选项!\n未选题目已标红。"); } else{ document.getElementById("result").innerHTML = "总得分：" + isum; document.getElementById("description").style.visibility = "visible"; } } //清除初始选项 clearChoice();
显示效果：
修订于2016/1/19 by野马菌