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

html方面的代码  : 正确的答案 value=s

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>答题</title>
  6. </head>
  7. <body>
  8. <!--标题-->
  9. <h1 style="color: green;text-align: center">欢迎您使用在线答题系统</h1>
  10. <h2 style="text-align: center">计时开始，请开始作答
  11.     <span id="hours">00</span>
  12.     <span>:</span>
  13.     <span id="minute">00</span>
  14.     <span>:</span>
  15.     <span id="second">00</span>
  16. </h2>
  17. <hr/>
  18. <!--题目-->
  19. <ol>
  20.     1，你属于什么阶级？
  21.     <input type="radio" name="q1" value="s" id="1-1"/>无产阶级
  22.     <input type="radio" name="q1" value="e" id="1-2"/>资产阶级
  23.     <input type="radio" name="q1" value="e" id="1-3"/>不清楚
  24. </ol>
  25. <br/>
  26.  
  27. <ol>
  28.     2，你觉得物资生活建设重要还是精神建设重要？
  29.     <input type="radio" name="q2" value="e" id="2-1"/>物质生活建设
  30.     <input type="radio" name="q2" value="s" id="2-2"/>精神建设
  31.     <input type="radio" name="q2" value="e" id="2-3"/>都不重要
  32. </ol>
  33. <br>
  34.  
  35. <ol>
  36.     3，你觉得要实现人民当家做主要靠什么？
  37.     <input type="radio" name="q3" value="e" id="3-1"/>私有化建设
  38.     <input type="radio" name="q3" value="s" id="3-2"/>社会主义建设
  39.     <input type="radio" name="q3" value="e" id="3-3"/>由红转蓝
  40. </ol>
  41. <br>
  42.  
  43. <ol>
  44.     4，社会主义初级阶段转向中级阶段的关键点在什么
  45.     <input type="radio" name="q4" value="e" id="4-1"/>人人小康
  46.     <input type="radio" name="q4" value="e" id="4-2"/>社会主义现代化
  47.     <input type="radio" name="q4" value="s" id="4-3"/>建成社会主义强国
  48. </ol>
  49. <br>
  50.  
  51. <button onclick="jiaojuan()">交卷</button>
  52. <div id="show"></div>
  53. </body>
  54. </html>

　　js代码实现<script>

  1. 　　//页面加载时 计时开始
  2.     window.onload = function () {
  3.         var hours = document.getElementById("hours"),
  4.             minute = document.getElementById("minute"),
  5.             second = document.getElementById("second"),
  6.             timer = null,
  7.             Hours = 0,
  8.             Minute = 0,
  9.             Second = 0;
  11.         timer = setInterval(function () {
  12.             Second++;
  13.             if (Second > 59) {
  14.                 Second = 0;
  15.                 Minute++;
  16.                 if (Minute > 59) {
  17.                     Minute = 0;
  18.                     Hours++;
  19.                 }
  20.             }
  22.             if (Second < 10) {
  23.                 second.innerText = "0" + Second;
  24.             } else {
  25.                 second.innerText = Second;
  26.             }
  28.             if (Minute < 10) {
  29.                 minute.innerText = "0" + Minute;
  30.             } else {
  31.                 minute.innerText = Minute;
  32.             }
  34.             if (Hours < 10) {
  35.                 hours.innerText = "0" + Hours;
  36.             } else {
  37.                 hours.innerText = Hours;
  38.             }
  39.         }, 1000)
  40.     };

  41. 　　//定义全局变量 分数、正确的、错误的
  42.     var score = 0;
  43.     var tru = [];
  44.     var fals = [];

  45. 　　　//交卷按钮的实现
  46.     function jiaojuan() {
  47.         tru = [];
  48.         fals = [];
  49.         score = 0;
  50.         var h = document.getElementById('hours');
  51.         var m = document.getElementById('minute');
  52.         var s = document.getElementById('second');
  53.         var show = document.getElementById('show');
  54.         var quNum = 4;  //题目个数
  55.         for (let i = 1; i <= quNum;i++){
  56.             isMain('q'+i, i, quNum);
  57.         }
  59.         var countTime = '共花了时间为：<span style="color: red;">' + h.innerHTML + '小时' + m.innerHTML + '分' + s.innerHTML + '秒</span><br/>';
  60.         var testTrue = "您正确的题目为: " + tru + '<br/>';
  61.         var testFalse = "您答错的题目为: " + fals + '<br/>';
  62.         var userScore = '您的成绩为：' + score + '<br/>';
  63.         show.innerHTML = countTime + testTrue + testFalse + userScore;
  64.     }
  66.     /*显示数据处理*/
  67.     function isMain(tagName, time, numQ) {
  68.         let zz = getRadioButtonCheckedValue(tagName);
  69.         if (zz == 's'){
  70.             score  = score + (100/numQ);
  71.             tru.push(time);
  72.         }else{
  73.             fals.push(time)
  74.         }
  75.     }
  77.     /*判断单选框选中的值*/
  78.     function getRadioButtonCheckedValue(tagNameAttr){
  79.         var radio_tag = document.getElementsByName(tagNameAttr);
  80.         for(var i=0;i<radio_tag.length;i++){
  81.             if(radio_tag[i].checked){
  82.                 return radio_tag[i].value;
  83.             }
  84.         }
  85.     }
  86. </script>

　　运行效果如下：

全部代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>答题</title>
  6. </head>
  7. <body>
  8. <!--标题-->
  9. <h1 style="color: green;text-align: center">欢迎您使用在线答题系统</h1>
  10. <h2 style="text-align: center">计时开始，请开始作答
  11.     <span id="hours">00</span>
  12.     <span>:</span>
  13.     <span id="minute">00</span>
  14.     <span>:</span>
  15.     <span id="second">00</span>
  16. </h2>
  17. <hr/>
  18. <!--题目-->
  19. <ol>
  20.     1，你属于什么阶级？
  21.     <input type="radio" name="q1" value="s" id="1-1"/>无产阶级
  22.     <input type="radio" name="q1" value="e" id="1-2"/>资产阶级
  23.     <input type="radio" name="q1" value="e" id="1-3"/>不清楚
  24. </ol>
  25. <br/>
  26.  
  27. <ol>
  28.     2，你觉得物资生活建设重要还是精神建设重要？
  29.     <input type="radio" name="q2" value="e" id="2-1"/>物质生活建设
  30.     <input type="radio" name="q2" value="s" id="2-2"/>精神建设
  31.     <input type="radio" name="q2" value="e" id="2-3"/>都不重要
  32. </ol>
  33. <br>
  34.  
  35. <ol>
  36.     3，你觉得要实现人民当家做主要靠什么？
  37.     <input type="radio" name="q3" value="e" id="3-1"/>私有化建设
  38.     <input type="radio" name="q3" value="s" id="3-2"/>社会主义建设
  39.     <input type="radio" name="q3" value="e" id="3-3"/>由红转蓝
  40. </ol>
  41. <br>
  42.  
  43. <ol>
  44.     4，社会主义初级阶段转向中级阶段的关键点在什么
  45.     <input type="radio" name="q4" value="e" id="4-1"/>人人小康
  46.     <input type="radio" name="q4" value="e" id="4-2"/>社会主义现代化
  47.     <input type="radio" name="q4" value="s" id="4-3"/>建成社会主义强国
  48. </ol>
  49. <br>
  50.  
  51. <button onclick="jiaojuan()">交卷</button>
  52. <div id="show"></div>
  53. </body>
  54. <script>
  55.     window.onload = function () {
  56.         var hours = document.getElementById("hours"),
  57.             minute = document.getElementById("minute"),
  58.             second = document.getElementById("second"),
  59.             timer = null,
  60.             Hours = 0,
  61.             Minute = 0,
  62.             Second = 0;
  63.  
  64.         timer = setInterval(function () {
  65.             Second++;
  66.             if (Second > 59) {
  67.                 Second = 0;
  68.                 Minute++;
  69.                 if (Minute > 59) {
  70.                     Minute = 0;
  71.                     Hours++;
  72.                 }
  73.             }
  74.  
  75.             if (Second < 10) {
  76.                 second.innerText = "0" + Second;
  77.             } else {
  78.                 second.innerText = Second;
  79.             }
  80.  
  81.             if (Minute < 10) {
  82.                 minute.innerText = "0" + Minute;
  83.             } else {
  84.                 minute.innerText = Minute;
  85.             }
  86.  
  87.             if (Hours < 10) {
  88.                 hours.innerText = "0" + Hours;
  89.             } else {
  90.                 hours.innerText = Hours;
  91.             }
  92.         }, 1000)
  93.     };
  94.  
  95.     var score = 0;
  96.     var tru = [];
  97.     var fals = [];
  98.  
  99.     function jiaojuan() {
  100.         tru = [];
  101.         fals = [];
  102.         score = 0;
  103.         var h = document.getElementById('hours');
  104.         var m = document.getElementById('minute');
  105.         var s = document.getElementById('second');
  106.         var show = document.getElementById('show');
  107.         var quNum = 4;//题目数目
  108.         for (let i = 1; i <= quNum;i++){
  109.             isMain('q'+i, i, quNum);
  110.         }
  111.  
  112.         var countTime = '共花了时间为：<span style="color: red;">' + h.innerHTML + '小时' + m.innerHTML + '分' + s.innerHTML + '秒</span><br/>';
  113.         var testTrue = "您正确的题目为: " + tru + '<br/>';
  114.         var testFalse = "您答错的题目为: " + fals + '<br/>';
  115.         var userScore = '您的成绩为：' + score + '<br/>';
  116.         show.innerHTML = countTime + testTrue + testFalse + userScore;
  117.     }
  118.  
  119.     /*显示数据处理*/
  120.     function isMain(tagName, time, numQ) {
  121.         let zz = getRadioButtonCheckedValue(tagName);
  122.         if (zz == 's'){
  123.             score  = score + (100/numQ);
  124.             tru.push(time);
  125.         }else{
  126.             fals.push(time)
  127.         }
  128.     }
  129.  
  130.     /*判断单选框选中的值*/
  131.     function getRadioButtonCheckedValue(tagNameAttr){
  132.         var radio_tag = document.getElementsByName(tagNameAttr);
  133.         for(var i=0;i<radio_tag.length;i++){
  134.             if(radio_tag[i].checked){
  135.                 return radio_tag[i].value;
  136.             }
  137.         }
  138.     }
  139. </script>
  140. </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. 自动化kolla-ansible部署ubuntu20.04+openstack-victoria之基础配置-04

    自动化kolla-ansible部署ubuntu20.04+openstack-victoria之基础配置-04 欢迎加QQ群:1026880196 进行交流学习 近期我发现网上有人转载或者复制原创博 ...

  2. Mysql之读写分离架构-Atlas

    Atlas介绍 1.png ​ Atlas是由 Qihoo 360, Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目. 它是在mysql-proxy 0.8.2版本的基础上, ...

  3. python 匿名函数，内置函数

    一 :匿名函数 匿名就是没有名字 def func(x,y,z=1): return x+y+z 匿名 lambda x,y,z=1:x+y+z #与函数有相同的作用域,但是匿名意味着引用计数为0,使 ...

  4. php异常及错误信息捕获并记录日志实现方法全解析

    php异常处理 什么是异常? PHP 5 提供了一种新的面向对象的错误处理方法.异常处理用于在指定的错误(异常)情况发生时改变脚本的正常流程.这种情况称为异常. 当异常被触发时,通常会发生: 当前代码 ...

  5. PHP 导出 CSV 0开头数据丢失问题处理

    PHP导出csv格式时,0开头会被office软件省略,如何处理?比如:033736 导出csv时会被excel转换成 33736 展示,不符合业务需求.处理方案: 微信支付的导出是这么处理的,加个反 ...

  6. Thinkphp5助手函数和Thinkphp3的单字母函数对应参照表

  7. POJ3687拓扑排序+贪心

    题意:       给你n个求,他们的重量是1-n(并不是说1号求的重量是1...),然后给你m组关系a,b,表示a的重量小于b的重量,然后让你输出满足要求的前提下每个球的重量,要求字典序最小. 思路 ...

  8. Linux系统应急响应

    目录 排查用户相关的信息 排查进程端口相关的信息 查找恶意程序并杀掉 斩草除根 判断入侵方式,修复漏洞 当我们被告知一台Linux服务器被黑客入侵,黑客利用该服务器进行挖矿,并且在该服务器上放置了木马 ...

  9. Linux系统登录相关

    whoami:查看当前用户 who:查看当前登录系统的所有用户 tty指的是主机的图形化界面的面板 pts/x指的是远程ssh连接的窗口 who -b:主机的上一次启动时间 w:显示已经登陆系统的用户 ...

  10. windows-CODE注入（远程线程注入）

    远程线程注入(先简单说,下面会详细说)今天整理下代码注入(远程线程注入),所谓代码注入,可以简单的理解为是在指定内进程里申请一块内存,然后把我们自己的执行代码和一些变量拷贝进去(通常是以启线程的方式) ...