原⽣基础js脚本实现--在线答题系统全部代码在最下⾯----需要的直接往下翻
html⽅⾯的代码  : 正确的答案 value=s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>答题</title>
</head>
<body>
<!--标题-->
<h1 >欢迎您使⽤在线答题系统</h1>
<h2 >计时开始，请开始作答
<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>
  //页⾯加载时计时开始
var hours = ElementById("hours"),
minute = ElementById("minute"),
second = ElementById("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 = ElementById('hours');
var m = ElementById('minute');
var s = ElementById('second');
var show = ElementById('show');
var quNum = 4;  //题⽬个数
for (let i = 1; i <= quNum;i++){
isMain('q'+i, i, quNum);
}
var countTime = '共花了时间为：<span >' + 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 = ElementsByName(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 >欢迎您使⽤在线答题系统</h1>
<h2 >计时开始，请开始作答
<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>
var hours = ElementById("hours"),
minute = ElementById("minute"),
second = ElementById("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 = ElementById('hours');
var m = ElementById('minute');
var s = ElementById('second');
var show = ElementById('show');
var quNum = 4;//题⽬数⽬
for (let i = 1; i <= quNum;i++){
isMain('q'+i, i, quNum);
}
var countTime = '共花了时间为：<span >' + 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 = ElementsByName(tagNameAttr);
for(var i=0;i<radio_tag.length;i++){
if(radio_tag[i].checked){
return radio_tag[i].value;
}
}
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。