原生基础js脚本实现--在线答题系统

全部代码在最下面----需要的直接往下翻

 

html方面的代码  : 正确的答案 value=s

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>答题</title>
</head>
<body>
<!--标题-->
<h1 style="color: green;text-align: center">欢迎您使用在线答题系统</h1>
<h2 style="text-align: center">计时开始，请开始作答
    <span id="hours">00</span>
    <span>:</span>
    <span id="minute">00</span>
    <span>:</span>
    <span id="second">00</span>
</h2>
<hr/>
<!--题目-->
<ol>
    1，你属于什么阶级？
    <input type="radio" name="q1" value="s" id="1-1"/>无产阶级
    <input type="radio" name="q1" value="e" id="1-2"/>资产阶级
    <input type="radio" name="q1" value="e" id="1-3"/>不清楚
</ol>
<br/>

<ol>
    2，你觉得物资生活建设重要还是精神建设重要？
    <input type="radio" name="q2" value="e" id="2-1"/>物质生活建设
    <input type="radio" name="q2" value="s" id="2-2"/>精神建设
    <input type="radio" name="q2" value="e" id="2-3"/>都不重要
</ol>
<br>

<ol>
    3，你觉得要实现人民当家做主要靠什么？
    <input type="radio" name="q3" value="e" id="3-1"/>私有化建设
    <input type="radio" name="q3" value="s" id="3-2"/>社会主义建设
    <input type="radio" name="q3" value="e" id="3-3"/>不清楚
</ol>
<br>

<ol>
    4，社会主义初级阶段转向中级阶段的关键点在什么
    <input type="radio" name="q4" value="e" id="4-1"/>人人小康
    <input type="radio" name="q4" value="e" id="4-2"/>社会主义现代化
    <input type="radio" name="q4" value="s" id="4-3"/>建成社会主义现代化强国
</ol>
<br>

<button onclick="jiaojuan()">交卷</button>
<div id="show"></div>
</body>
</html>

　　js代码实现<script>

　　//页面加载时 计时开始
    window.onload = function () {
        var hours = document.getElementById("hours"),
            minute = document.getElementById("minute"),
            second = document.getElementById("second"),
            timer = null,
            Hours = 0,
            Minute = 0,
            Second = 0;

        timer = setInterval(function () {
            Second++;
            if (Second > 59) {
                Second = 0;
                Minute++;
                if (Minute > 59) {
                    Minute = 0;
                    Hours++;
                }
            }


            if (Second < 10) {
                second.innerText = "0" + Second;
            } else {
                second.innerText = Second;
            }


            if (Minute < 10) {
                minute.innerText = "0" + Minute;
            } else {
                minute.innerText = Minute;
            }


            if (Hours < 10) {
                hours.innerText = "0" + Hours;
            } else {
                hours.innerText = Hours;
            }
        }, 1000)
    };

　　//定义全局变量 分数、正确的、错误的
    var score = 0;
    var tru = [];
    var fals = [];

　　　//交卷按钮的实现
    function jiaojuan() {
        tru = [];
        fals = [];
        score = 0;
        var h = document.getElementById('hours');
        var m = document.getElementById('minute');
        var s = document.getElementById('second');
        var show = document.getElementById('show');
        var quNum = 4;  //题目个数
        for (let i = 1; i <= quNum;i++){
            isMain('q'+i, i, quNum);
        }

        var countTime = '共花了时间为：<span style="color: red;">' + h.innerHTML + '小时' + m.innerHTML + '分' + s.innerHTML + '秒</span><br/>';
        var testTrue = "您正确的题目为: " + tru + '<br/>';
        var testFalse = "您答错的题目为: " + fals + '<br/>';
        var userScore = '您的成绩为：' + score + '<br/>';
        show.innerHTML = countTime + testTrue + testFalse + userScore;
    }

    /*显示数据处理*/
    function isMain(tagName, time, numQ) {
        let zz = getRadioButtonCheckedValue(tagName);
        if (zz == 's'){
            score  = score + (100/numQ);
            tru.push(time);
        }else{
            fals.push(time)
        }
    }

    /*判断单选框选中的值*/
    function getRadioButtonCheckedValue(tagNameAttr){
        var radio_tag = document.getElementsByName(tagNameAttr);
        for(var i=0;i<radio_tag.length;i++){
            if(radio_tag[i].checked){
                return radio_tag[i].value;
            }
        }
    }
</script>

　　运行效果如下：

 全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>答题</title>
</head>
<body>
<!--标题-->
<h1 style="color: green;text-align: center">欢迎您使用在线答题系统</h1>
<h2 style="text-align: center">计时开始，请开始作答
    <span id="hours">00</span>
    <span>:</span>
    <span id="minute">00</span>
    <span>:</span>
    <span id="second">00</span>
</h2>
<hr/>
<!--题目-->
<ol>
    1，你属于什么阶级？
    <input type="radio" name="q1" value="s" id="1-1"/>无产阶级
    <input type="radio" name="q1" value="e" id="1-2"/>资产阶级
    <input type="radio" name="q1" value="e" id="1-3"/>不清楚
</ol>
<br/>

<ol>
    2，你觉得物资生活建设重要还是精神建设重要？
    <input type="radio" name="q2" value="e" id="2-1"/>物质生活建设
    <input type="radio" name="q2" value="s" id="2-2"/>精神建设
    <input type="radio" name="q2" value="e" id="2-3"/>都不重要
</ol>
<br>

<ol>
    3，你觉得要实现人民当家做主要靠什么？
    <input type="radio" name="q3" value="e" id="3-1"/>私有化建设
    <input type="radio" name="q3" value="s" id="3-2"/>社会主义建设
    <input type="radio" name="q3" value="e" id="3-3"/>不清楚
</ol>
<br>

<ol>
    4，社会主义初级阶段转向中级阶段的关键点在什么
    <input type="radio" name="q4" value="e" id="4-1"/>人人小康
    <input type="radio" name="q4" value="e" id="4-2"/>社会主义现代化
    <input type="radio" name="q4" value="s" id="4-3"/>建成社会主义现代化强国
</ol>
<br>


<button onclick="jiaojuan()">交卷</button>
<div id="show"></div>
</body>
<script>
    window.onload = function () {
        var hours = document.getElementById("hours"),
            minute = document.getElementById("minute"),
            second = document.getElementById("second"),
            timer = null,
            Hours = 0,
            Minute = 0,
            Second = 0;

        timer = setInterval(function () {
            Second++;
            if (Second > 59) {
                Second = 0;
                Minute++;
                if (Minute > 59) {
                    Minute = 0;
                    Hours++;
                }
            }


            if (Second < 10) {
                second.innerText = "0" + Second;
            } else {
                second.innerText = Second;
            }


            if (Minute < 10) {
                minute.innerText = "0" + Minute;
            } else {
                minute.innerText = Minute;
            }


            if (Hours < 10) {
                hours.innerText = "0" + Hours;
            } else {
                hours.innerText = Hours;
            }
        }, 1000)
    };

    var score = 0;
    var tru = [];
    var fals = [];

    function jiaojuan() {
        tru = [];
        fals = [];
        score = 0;
        var h = document.getElementById('hours');
        var m = document.getElementById('minute');
        var s = document.getElementById('second');
        var show = document.getElementById('show');
        var quNum = 4;//题目数目
        for (let i = 1; i <= quNum;i++){
            isMain('q'+i, i, quNum);
        }

        var countTime = '共花了时间为：<span style="color: red;">' + h.innerHTML + '小时' + m.innerHTML + '分' + s.innerHTML + '秒</span><br/>';
        var testTrue = "您正确的题目为: " + tru + '<br/>';
        var testFalse = "您答错的题目为: " + fals + '<br/>';
        var userScore = '您的成绩为：' + score + '<br/>';
        show.innerHTML = countTime + testTrue + testFalse + userScore;
    }

    /*显示数据处理*/
    function isMain(tagName, time, numQ) {
        let zz = getRadioButtonCheckedValue(tagName);
        if (zz == 's'){
            score  = score + (100/numQ);
            tru.push(time);
        }else{
            fals.push(time)
        }
    }

    /*判断单选框选中的值*/
    function getRadioButtonCheckedValue(tagNameAttr){
        var radio_tag = document.getElementsByName(tagNameAttr);
        for(var i=0;i<radio_tag.length;i++){
            if(radio_tag[i].checked){
                return radio_tag[i].value;
            }
        }
    }
</script>
</html>

 

posted @ 2021-01-06 19:05  无产铁锤  阅读(1913)  评论(0)    收藏  举报