自学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野马菌

你可能感兴趣的:(自学JavaScript的几个例子)