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

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>

原生基础js脚本实现--在线答题系统的更多相关文章

  1. 自测 基础 js 脚本。

    <html> <head> <script> //function(<text>a{[]}lert('x')</text>)() docum ...

  2. Win8/Win7系统下用IE11浏览器调试js脚本

    作为一个web开发者,调试js脚本是工作中的一部分,但是并不是所有的浏览器都会很好的兼容js脚本的.随着win8系统的发布,ie11也慢慢进入了大家的视野,ie11的众多优点及新特性就不必多说了(全面 ...

  3. 投票系统 & js脚本简单刷票

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 关于JS脚本语言的基础语法

    JS脚本语言的基础语法:输出语法  alert("警告!");  confirm("确定吗?");   prompt("请输入密码");为弱 ...

  5. koa 基础（十）原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  6. AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)

    昨天一个话题说关于AngularJS2以后版本的两个小技巧,不料引出了另外一个话题,话题起始很简单: "很多的前端框架并不复杂,比如JQuery,引入即用,实时看到效果,多好.到了Angul ...

  7. 样式其他与JS脚本语言

    样式其他:display(显示block和隐藏none,不占位置)  visibility(显示visible和隐藏hidden,占位置)  overflow(超出范围 hidden隐藏) 透明(op ...

  8. XSS注入,js脚本注入后台

    曾经一度流行sql注入,由于现在技术的更新,已经看不到这问题了,但是又出来新的安全问题,XSS攻击,他的原理就是在前端提交表单的时候,在input标签当中输入js脚本,通过js脚本注入后台,请看下图. ...

  9. JS脚本动态给元素/控件添加事件

    最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...

随机推荐

  1. 在一些64位的glibc的payload调用system函数失败问题

    在一些64位的glibc的payload调用system函数失败问题 当我在做题的时候就发现一个奇怪的事情,我在ubuntu16.04运行成功的exp在ubuntu 18.04却报出了timeout: ...

  2. Day08_40_集合_List

    List集合 List接口是继承Collection接口,所以Collection集合中有的方法,List集合也会继承过来,可以直接使用. All Superinterfaces: Collectio ...

  3. 痞子衡嵌入式：利用i.MXRT1xxx系列内部DCP引擎计算Hash值时需特别处理L1 D-Cache

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是利用i.MXRT1xxx系列内部DCP引擎计算Hash值时需特别处理L1 D-Cache. 关于i.MXRT1xxx系列内部通用数据协处 ...

  4. 2021S软件工程——案例分析作业

    2021S软件工程--案例分析作业 18231169 黄思为 项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任建) 这个作业的要求在哪里 案例分析作业 我在这个课程的目标是 了解并熟悉 ...

  5. 1036 Boys vs Girls

    This time you are asked to tell the difference between the lowest grade of all the male students and ...

  6. git 配置ssh

    git 配置ssh 生成一个个人账号/邮箱的sshkey ssh-keygen -t rsa -C "youremail@yourcompany.com" -f ~/.ssh/XX ...

  7. 深入浅出：MySQL的左连接、右连接、等值连接

    深入浅出:MySQL的左连接.右连接.等值连接 三种连接的语法 为便于更多的技友快速读懂.理解,我们只讨论2张表对象进行连接操作的情况,大于2张表对象进行的连接操作原理也是一样的. 1.左连接(LEF ...

  8. CVE-2010-2883：基于样本分析 PDF SING表字符溢出漏洞

    0x01 前言 CVE-2010-2883 漏洞的成因是由于 CoolType.dll 这个动态链接库在解析 SING 表中的 uniqueName 这个项时没有对长度进行限制,导致使用 strcat ...

  9. Access+Mssql+Oracle数据库注入

    Access数据库注入 前言:在常见的注入测试中,由于每个数据库内置架构和应用不同,导致数据库类型将决定注入的手法,Access数据库是小型数据库类型,普遍用于小型WEB应用,其中Access注入手法 ...

  10. [LeetCode每日一题]153.寻找旋转排序数组中的最小值

    [LeetCode每日一题]153.寻找旋转排序数组中的最小值 问题 已知一个长度为 n 的数组,预先按照升序排列,经由 1 到 n 次 旋转 后,得到输入数组.例如,原数组 nums = [0,1, ...