原生基础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脚本里面有个方法可以给控件在原有事件的基础 ...
随机推荐
- 死磕Spring之AOP篇 - Spring AOP自动代理（一）入口
该系列文章是本人在学习 Spring 的过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring 源码分析 GitHub 地址 进行阅读. Spring 版本:5.1 ...
- python程序—一键部署keepalived+lvs
一个DS 两个RS keepalived端在/root下准备好已经修改好的配置文件 import paramiko # keepalived端 需要修改的信息 keepalived_ip='192.1 ...
- 八戒转世投胎竟然是Java设计模式：桥接模式
目录 示例 代码实例 桥接模式 定义 意图 主要解决问题 何时使用 优缺点 八戒转世投胎的故事 示例 请开发一个画图程序,可以画各种颜色不同形状的图形,请用面向对象的思 想设计图形 分析: 1.比如有 ...
- Mybatis3源码笔记（四）Configuration（续）
1.pluginElement(root.evalNode("plugins")) 解析plugins节点(注册interceptorChain里记录对应的拦截器) private ...
- 实现服务端和客户端的实时双向数据传输-WebSocket简单了解
WebSocket 前段时间项目中遇到了消息推送的问题,当时采用客户端轮询,每隔 5s 请求一次数据.由于轮询的效率低,非常浪费资源.后面准备把轮询调整为使用 WebSocket 来建立连接,实现推送 ...
- Scrapy 爬虫项目框架
1. Scrapy 简介 2. Scrapy 项目开发介绍 3. Scrapy 项目代码示例 3.1 setting.py:爬虫基本配置 3.2 items.py:定义您想抓取的数据 3.3 spid ...
- 1083 List Grades
Given a list of N student records with name, ID and grade. You are supposed to sort the records with ...
- ASP调用SDK微信分享好友、朋友圈
ASP调用SDK微信分享好友.朋友圈需要用到sha1.asp,我先来上主代码,然后再附加sha1.asp,方便大家直接复制过去即可使用. 页面:shara.asp 1 <%@LANGUAGE=& ...
- 04- HTML常用标签
HTML标签分类 通过上节博客我们知道了网页的组成:文字 图片 连接 视频 音频.在HTML页面中,带有"< >"符号的元素被称为HTML标签,如上面提到的 <H ...
- B/S与C/S架构的区别
C/S架构优点:1)界面比较丰富2)安全性高3)实现的功能更多,可以实现更复杂的业务4)客户端可以处理部分业务,分担服务器端压力缺点:1)需要开发独立的客户端软件,开发成本高2)需要安装独立的客户端软 ...