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

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>

最新文章

  1. bzoj4518--斜率优化DP
  2. 二分查找-python
  3. C++位操作符总结
  4. mongodb添加用户和认证
  5. 【转】Adobe CC 的下载地址
  6. mysql order by 妙用
  7. 2^x mod n = 1（hd1395）
  8. 可用类型的几何对象esriGeometryType Constants
  9. 我用MATLAB撸了一个2D LiDAR SLAM
  10. oracle语句insert into select如何加后续插入条件
  11. Servlet知识点回顾
  12. hdu 1576 A/B 【扩展欧几里德】
  13. hdu 5095 多项式模拟+有坑
  14. mongoose入门
  15. Laravel中pluck的使用——返回指定的字段值信息列表
  16. JS数组对象的方法
  17. Linux ntpdate命令详解
  18. 2017 jq 总结
  19. VarPtr 得到地址 指针
  20. Halcon 笔记2 Blob分析

热门文章

  1. 【NCRE】三级网络技术 选择题易错点记录（1）
  2. Unity2D项目-平台、解谜、战斗！ 1.5 Player框架、技能管理组件
  3. 【pytest官方文档】解读fixtures - 10. fixture有效性、跨文件共享fixtures
  4. 一文上手Python3
  5. D - 下个也是签到题 FZU - 2221(博弈)
  6. java语言写一个建议的五子棋
  7. 2.1.1- css产生的原因
  8. Thinkphp5 日期与时间戳相互转换
  9. Python爬虫之-动态网页数据抓取
  10. vscode 将本地项目上传到github、从github克隆项目以及删除github上的某个文件夹