原生基础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脚本里面有个方法可以给控件在原有事件的基础 ...

随机推荐

CentOS8搭建FTP服务器
2021.2.20 更新 1 概述文章核心: CentOS8使用vsftpd搭建FTP服务器安装以及测试的详细过程 2 安装 2.1 安装vsftpd+ftp sudo yum install - ...
本地+分布式Hadoop完整搭建过程
1 概述 Hadoop在大数据技术体系中极为重要,被誉为是改变世界的7个Java项目之一(剩下6个是Junit.Eclipse.Spring.Solr.HudsonAndJenkins.Android ...
Typora+PicGo+阿里云写博客笔记
Typora+PicGo+阿里云写博客笔记选择这三个工具的理由我一直有在使用typora使用mardown写作,毕竟typora很香,可以实时预览,非常丝滑. 配合上PicGo这个图床工具简直绝了 ...
k8s 无头service 方式向内发布
k8s 无头service 是指 clusterIP 为 None 的service 案例,假定有一个 deployment,containerPort 端口80,同时还被打上 python=mywe ...
table边框完全去掉的方法
表格中边框的显示只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左.右边框 <table frame= ...
SpringCloud之远程调用OpenFeign和Ribbon
Ribbon.Feign和OpenFeign的区别 SpringCloudAlibaba微服务实战教程系列 Spring Cloud 微服务架构学习记录与示例一简介 Feign是Netflflix ...
CVE-2014-7911学习笔记
工作日分析的差不多了,写个标题周末搞
不安全的HTTP方法
我们常见的HTTP请求方法是GET.POST和HEAD.但是,其实除了这两个之外,HTTP还有一些其他的请求方法. WebDAV (Web-based Distributed Authoring an ...
RDPInception攻击手法
在讲RDPInception攻击手段之前,我们先了解一下RDP远程桌面(Remote Desktop Protocol)协议.RDP远程桌面协议(Remote Desktop Protocol)是一个 ...
Intel汇编语言程序设计学习-第五章过程-下
5.3.3 库测试程序测试程序#1:整数I/O 该测试程序把输出文本的颜色改为蓝底黄字,然后以十六进制数显示七个数组的内容,最后提示用户输入一个有符号整数,再分别以十进制.十六进制和二进制格式重复 ...

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

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

随机推荐

热门专题