原生基础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>

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

自测基础 js 脚本。
<html> <head> <script> //function(<text>a{[]}lert('x')</text>)() docum ...
Win8/Win7系统下用IE11浏览器调试js脚本
作为一个web开发者,调试js脚本是工作中的一部分,但是并不是所有的浏览器都会很好的兼容js脚本的.随着win8系统的发布,ie11也慢慢进入了大家的视野,ie11的众多优点及新特性就不必多说了(全面 ...
投票系统 & js脚本简单刷票
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
关于JS脚本语言的基础语法
JS脚本语言的基础语法:输出语法 alert("警告!"); confirm("确定吗?"); prompt("请输入密码");为弱 ...
koa 基础（十）原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由推荐*/ ...
AngularJS2+调用原有的js脚本(AngularJS脚本跟本地原有脚本之间的关系)
昨天一个话题说关于AngularJS2以后版本的两个小技巧,不料引出了另外一个话题,话题起始很简单: "很多的前端框架并不复杂,比如JQuery,引入即用,实时看到效果,多好.到了Angul ...
样式其他与JS脚本语言
样式其他:display(显示block和隐藏none,不占位置) visibility(显示visible和隐藏hidden,占位置) overflow(超出范围 hidden隐藏) 透明(op ...
XSS注入,js脚本注入后台
曾经一度流行sql注入,由于现在技术的更新,已经看不到这问题了,但是又出来新的安全问题,XSS攻击,他的原理就是在前端提交表单的时候,在input标签当中输入js脚本,通过js脚本注入后台,请看下图. ...
JS脚本动态给元素/控件添加事件
最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...

随机推荐

设计原则：里式替换原则(LSP)
系列文章设计原则:单一职责(SRP) 设计原则:开闭原则(OCP) 设计原则:里式替换原则(LSP) 设计原则:接口隔离原则(ISP) 设计原则:依赖倒置原则(DIP) 何谓高质量代码? 理解RES ...
源码编译安装MySQL8.0.20
1 概述本文章主要讲述了如何从源码编译安装MySQL社区版8.0.20,首先会介绍一些编译安装的相关知识,然后开始编译安装 2 源码编译安装的相关知识 2.1 make与configure make ...
简单的了解下Java设计模式：迭代器模式（转载）
迭代器模式定义迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示. Java 开发过程中遍历是常用的.如下边程序: for(int i =0 ; ...
JAVAEE_Servlet_17_关于乱码问题
关于乱码问题 * 数据传递过程中的乱码解释:数据传递过程中的乱码是指: 将数据从浏览器发送给服务器的时候,服务器接收到的数据是乱码的. - ISO-8859-1 是国际标准码,不支持中文编码,它兼容 ...
elasticsearch jvm优化
测试环境elasticsearch jvm 4G jdk1.8 [serveradm@test-log-server elasticsearch]$ java -version java versio ...
python进阶（17）偏函数partial
什么是偏函数partial python中提供一种对于函数固定属性的函数偏函数的作用把一个函数的某些参数给固定住(也就是设置默认值),返回一个新的函数偏函数的语法使用偏函数必须先导入from ...
计算机系统原理：cache容量计算
Cache容量计算例题: 假定主存地址位数为32位,按字节编址,主存和cache之间采用4-路组相联映射方式,主存块大小为4个字,每字32位,采用直写(Write Throght)方式和LRU替换策略 ...
Rabbitmq 3.6.5以上版本修改端口号方法
Rabbitmq 3.6.5以上版本修改端口号方法,网上查了下有一些方不管用,所以自己实践了引用官网说明 https://www.rabbitmq.com/configure.html#configu ...
python3存储numpy格式的矩阵
技术背景 numpy在python中的地位是相当高的,即使是入门的python使用者也会经常看到这个库的使用.除了替代python自带的列表数据格式list之外,numpy的一大优势是其底层的高性能实 ...
ASP.NET Core 存储session取不到值
该项目是一个mvc项目,我使用session存储登录后的用户信息,然后发现登录信息存储到session正常,这个时候立马去获取也正常但是如果我跳转到首页后,再去获取session信息,发现sessi ...

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

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

随机推荐

热门专题