小白javascript做考试页（三）

最新推荐文章于 2024-08-11 18:40:36 发布

weixin_33895516

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量139

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/oisanblog/blog/742041

版权

2019独角兽企业重金招聘Python工程师标准>>>

前面提到按钮变灰色不能点。原来disabled="disabled"就会显示灰色

那么提交按钮在一开始未点答题是灰色的了 <button type="button" οnclick="clickbutton()" id="bt2" disabled="disabled">提交</button>如图

那点了答题后，答题按钮是灰色的提交不灰色又显示可以点，要用js来了。

点答题是answer()函数，那么在那里面写。先给答题按钮加个id，<button type="button" οnclick="answer()" id="bt1">答题</button>。好了在js的answer()里写

document.getElementById("bt1").disabled = true;

document.getElementById("bt2").disabled = false;点了答题后如图

那么要点了提交后提交是灰色的不能点。

那么同理在提交函数里document.getElementById("bt2").style.display = "none";改为document.getElementById("bt2").disabled = true;

到这里答题和提交处理好了。提交后不能提交。点了题不能再点答题。那么提交后上面那两个框是不是也可以设定灰色不能填呢？一查果然是可以的和按钮差不多。

document.getElementById("number1").disabled =true;
document.getElementById("number2").disabled =true;

那么开始想时间的问题了。就是点了答题后有时间限制，时间一到就不能再答。这个以点费脑力，开始时想加个什么循环计时比如while或者for之类的，但是要有1秒时间间隔。查了一查，原来有计时器函数可以实现时间间隔。而且还有两个setInterval(),setTimeout();虽然看解释setInterval()是为间隔时间自动重复执行，setTimeout()在延迟一段时间执行，开始我以为只能用setInterval()，后来知道其实两个都是可以的。

有了计时器就可以开始写倒计时函数了,现在就是想怎么写这个函数的问题了。

肯定要定义时分秒变量且设定一个时间。

function timeover(){

var h=0,m=1,s=10;

}

这里设的是一分十秒，倒计时的那接下来应该是秒--，当减到小于0时怎么样？那就秒又从59开始同时分--，时与分也同理，那么就是

function timeover(){
var h=0,m=1,s=10;
    s--;
    if (s < 0) {
        s = 59;
        m--;
        if (m < 0) {
            m = 59;
            h--;
        }
    }
}

加个定时器，同时显示到页面上。在html的题目里面加一行因为点答题才计时

<p id="ytime"></p>

还要在时间函数里面加显示呢。

function timeover() {
    var h=0,m=1,s=10;
    document.getElementById("ytime").innerHTML = "考试剩余时间：" + h + "时" + m + "分" + s + "秒";
    s--;
    if (s < 0) {
        s = 59;
        m--;
        if (m < 0) {
            m = 59;
            h--;
        }
    }
}

这下在答题函数里加定时器了。var yourtime=setInterval("timeover()", 1000);

好了打开页面测试，为什么时间不走了。回头看看代码，哦，那个时分钞应该设为全局变量，倒计时函数循环执行的如果设成函数里面的局部变量那每执行又到h=0,m=1,s=10时间一直不变了。

var h=0,m=1,s=10;
function timeover() {
    document.getElementById("ytime").innerHTML = "考试剩余时间：" + h + "时" + m + "分" + s + "秒";
    s--;
    if (s < 0) {
        s = 59;
        m--;
        if (m < 0) {
            m = 59;
            h--;
        }
    }
}

果然时间正常倒计时了，设了全局变量，时间到了也好判断执行提交函数了，那var yourtime这个也设全局，为什么要定义这个呢，为了清理定时器。那个判断应该加在显示计时的后面了，如果放函数在最下面的话显示是1秒时就停了因为中间隔关s--;

var h = 0, m = 1, s = 10, yourtime;
function timeover() {
    document.getElementById("ytime").innerHTML = "考试剩余时间：" + h + "时" + m + "分" + s + "秒";
    if (h == 0 && m == 0 && s == 0) {
        clickbutton();
        clearInterval(yourtime);
    }
    s--;
    if (s < 0) {
        s = 59;
        m--;
        if (m < 0) {
            m = 59;
            h--;
        }
    }
}

上面clearInterval(yourtime);就是清理定时器。

正在倒计时

OK。时间到也和提交一样不能再答题。

倒计时有了，但这时当我没到时间就按提交时，虽然是不能答题了，但时间还在跳。那么在提交函数就要清理定时器，既然在提交那里加了那么时间函数上面就不用了。测试没问题。

最后html里的代码

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>hello JSworld</title>
</head>
<script type="text/javascript" src="first.js"></script>

<body>
    <h2>考试网页</h2>
    <p>点答题开始答题，一题十分，提交显示分数.</p>
    <div id="main" style="display:none;">
        <p id="ytime"></p>
        <p>
            21+33=<input type="text" id="number1" /> </p>
        <p>
            42x38=<input type="text" id="number2" /></p>
    </div>
    <p>
        <button type="button" onclick="answer()" id="bt1">答题</button>
        <button type="button" onclick="clickbutton()" id="bt2" disabled="disabled">提交</button>
    </p>
    <p id="score"></p>
</body>
</html>

js里的代码

function clickbutton() {
    var input1 = document.getElementById("number1").value;
    var input2 = document.getElementById("number2").value;
    var score1 = 0;
    var score2 = 0;//分数
    var sum;
    if (input1 == 54) {
        score1 = 10;
    }
    if (input2 == 1596) {
        score2 = 10;
    }
    sum = score1 + score2;
    document.getElementById("score").innerHTML = "你的分数：" + sum;
    document.getElementById("bt2").disabled = true;
    document.getElementById("number1").disabled = true;
    document.getElementById("number2").disabled = true;
    clearInterval(yourtime);
}
function answer() {
    yourtime = setInterval("timeover()", 1000);
    document.getElementById("main").style.display = "";
    document.getElementById("bt1").disabled = true;
    document.getElementById("bt2").disabled = false;

}
var h = 0, m = 1, s = 10, yourtime;
function timeover() {
    document.getElementById("ytime").innerHTML = "考试剩余时间：" + h + "时" + m + "分" + s + "秒";
    if (h == 0 && m == 0 && s == 0) {
        clickbutton();
    }
    s--;
    if (s < 0) {
        s = 59;
        m--;
        if (m < 0) {
            m = 59;
            h--;
        }
    }
}

PS：对了,上面说的两个定时器都可以的。用另一个定时器的话。

function timeover() {
    document.getElementById("ytime").innerHTML = "考试剩余时间：" + h + "时" + m + "分" + s + "秒";
    if (h == 0 && m == 0 && s == 0) {
        clickbutton();
    }
    s--;
    if (s < 0) {
        s = 59;
        m--;
        if (m < 0) {
            m = 59;
            h--;
        }
    }
yourtime=setTimeout("timeover()",1000);
}

而回答里直接用上面timeover()这个函数了，清理计时器也不同clearTimeout(yourtime)。

待续......

转载于:https://my.oschina.net/oisanblog/blog/742041