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

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. HashSet、CopyOnWriteArraySet、ConcurrentSkipListSet源码解析（JDK1.8）

    目录 HashSet源码解析 HashSet简单使用的demo HashSet中的变量 HashSet的构造函数 HashSet的add方法 HashSet的iterator方法 HashSet的si ...

  2. 阿里巴巴面试-Java后端-社招5面技术总结（Offer已拿）

    最近接到阿里妈妈的面试通知,历经一个月,虽然过程挺坎坷,但总算是拿到了offer.这里简单记录下面试所遇问题,仅供各位大佬参考. 由于前面两面的时间过去的有点久了,只能根据记忆大概写些记得问题. 部门 ...

  3. Mycat Web监控工具

    简介 Mycat-web 是 Mycat 可视化运维的管理和监控平台,弥补了 Mycat 在监控上的空白.帮 Mycat 分担统计任务和配置管理任务.Mycat-web 引入了 ZooKeeper 作 ...

  4. 【Redis连接超时】记录线上RedisConnectionFailureException异常排查过程

    项目架构: 部分组件如下: SpringCloudAlibaba(Nacos+Gateway+OpenFeign)+SpringBoot2.x+Redis 问题背景: 最近由于用户量增大,在高峰时期, ...

  5. spring boot 或 spring 集成 atomikos jta 完成多数据源事务管理

    前言:对于事务,spring 不提供自己的实现,只是定义了一个接口来供其他厂商实现,具体些的请看我的这篇文章: https://www.cnblogs.com/qiaoyutao/p/11289996 ...

  6. 【MySQL】若sql语句中order by指定了多个字段,则怎么排序？

    举个例子吧:order by id desc,time desc先是按 id 降序排列 (优先)如果 id 字段 有些是一样的话 再按time 降序排列 (前提是满足id降序排列)   order b ...

  7. 开启Android Apk调试与备份选项的Xposed模块的编写

    本文博客地址:https://blog.csdn.net/QQ1084283172/article/details/80963610 在进行Android应用程序逆向分析的时候,经常需要进行Andro ...

  8. hdu2102 水搜索

    题意:                                    A计划 Problem Description 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次 ...

  9. hdu2604 矩阵快速幂

    题意:      给你n个人,排成一个长度是n的队伍,人只有两类f,m,问可以有多少种排法使度列中不出现fff,fmf这样的子串.思路:      一开始暴力,结果超时了,其实这个题目要是能找到类似于 ...

  10. POJ2528线段树段更新逆序异或（广告牌）

    题意:      可以这样理解,有一条直线,然后用n条线段去覆盖,最后问全部都覆盖完之后还有多少是没有被完全覆盖的. 思路:      一开始想的有点偏,想到起点排序,然后..失败了,原因是忘记了题目 ...