本文实例为大家分享了JavaScript实现答题评分功能的具体代码，供大家参考，具体内容如下
效果图
直接上代码
HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./index.css" > <link rel="stylesheet" href="./timeTo.css" > <title>JavaScript实现一个在线做题测试网页</title> </head> <body> <div class="testContainer"> <h3>在线答题</h3> <div class="testHeader"> <div class="testLeft">测试已开始，请开始作答,请在30分钟内完成答题</div> <div class="testRight" id="countdown-11"></div> </div> <ul class="testContent"> </ul> <div onclick="submitAnswer()" id="submitBtn">提交</div> </div> <script src="/UploadFiles/2021-04-02/jquery-2.1.1.min.js">CSS部分
index.css
timeTo.css
figure, figcaption { display: block; } .transition { -webkit-transition: top 400ms linear; -moz-transition: top 400ms linear; -ms-transition: top 400ms linear; -o-transition: top 400ms linear; transition: top 400ms linear; } .timeTo { font-family: Tahoma, Verdana, Aial, sans-serif; font-size: 28px; line-height: 108%; font-weight: bold; height: 32px; } .timeTo span { vertical-align: top; } .timeTo.timeTo-white div { color: black; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 38%, #cccccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(38%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 38%,#cccccc 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 38%,#cccccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */ } .timeTo.timeTo-black div { color: white; background: #45484d; /* Old browsers */ background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .timeTo.timeTo-black .timeTo-alert { background: #a74444; /* Old browsers */ background: -moz-linear-gradient(top, #a74444 0%, #3f0000 67%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a74444), color-stop(67%,#3f0000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a74444 0%,#3f0000 67%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a74444 0%,#3f0000 67%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a74444 0%,#3f0000 67%); /* IE10+ */ background: linear-gradient(to bottom, #a74444 0%,#3f0000 67%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a74444', endColorstr='#3f0000',GradientType=0 ); /* IE6-9 */ } .timeTo.timeTo-white .timeTo-alert { background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 35%, #e17373 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,#ffffff), color-stop(100%,#e17373)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 35%,#e17373 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 35%,#e17373 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 35%,#e17373 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 35%,#e17373 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e17373',GradientType=0 ); /* IE6-9 */ } .timeTo figure { display: inline-block; margin: 0; padding: 0; } .timeTo figcaption { text-align: center; /*font-size: 12px;*/ line-height: 80%; font-weight: normal; color: #888; } .timeTo div { position: relative; display: inline-block; width: 25px; height: 30px; border-top: 1px solid silver; border-right: 1px solid silver; border-bottom: 1px solid silver; overflow: hidden; } .timeTo div.first { border-left: 1px solid silver; } .timeTo ul { list-style-type: none; margin: 0; padding: 0; position: absolute; left: 3px; } .timeTo ul li { margin: 0; padding: 0; list-style: none; }jquery.time-to.js部分
/** * Time-To jQuery plug-in * Show countdown timer or realtime clock * * @author Oleksii Teterin <altmoc@gmail.com> * @version 1.3.0 * @license MIT http://opensource.org/licenses/MIT * @date 2019-05-14 * @host https://github.com/Lexxus/jq-timeTo */ (function (factory) { if (typeof define === 'function' && define.amd) { // AMD (RequireJS) define(['jquery'], factory); } else if (typeof exports === 'object') { // CommonJS (Node) /* eslint-disable import/no-unresolved */ module.exports = factory(require('jquery')); } else { // globals factory(jQuery); } }(function ($) { var SECONDS_PER_DAY = 86400; var SECONDS_PER_HOUR = 3600; /* eslint-disable no-multi-spaces */ var defaults = { callback: null, // callback function for exec when timer out step: null, // callback function to exec every {stepCount} ticks stepCount: 1, // number of ticks to increment before executing stepCount captionSize: 0, // font-size by pixels for captions, if 0 then calculate automaticaly countdown: true, // is countdown or real clock countdownAlertLimit: 10, // limit in seconds when display red background displayCaptions: false, // display captions under digit groups displayDays: 0, // display day timer, count of days digits displayHours: true, // display hours fontFamily: 'Verdana, sans-serif', fontSize: 0, // font-size of a digit by pixels (0 - use CSS instead) lang: 'en', // language of caption languages: {}, // extra or overridden languages seconds: 0, // timer's countdown value in seconds start: true, // true to start timer immediately theme: 'white', // 'white' or 'black' theme fo timer's view width: 25, // width of a digit area height: 30, // height of a digit area gap: 11, // gap size between numbers vals: [0, 0, 0, 0, 0, 0, 0, 0, 0], // private, current value of each digit limits: [9, 9, 9, 2, 9, 5, 9, 5, 9], // private, max value of each digit iSec: 8, // private, index of second digit iHour: 4, // private, index of hour digit tickTimeout: 1000, // timeout betweet each timer tick in miliseconds intervalId: null, // private tickCount: 0 // private }; var methods = { start: function (sec) { var intervalId; if (sec) { init.call(this, sec); intervalId = setTimeout(tick.bind(this), 1000); // save start time this.data('ttStartTime', $.now()); this.data('intervalId', intervalId); } }, stop: function () { var data = this.data(); if (data.intervalId) { clearTimeout(data.intervalId); this.data('intervalId', null); } return data; }, reset: function (sec) { var data = methods.stop.call(this); var secs = typeof sec === 'undefined' "left:' + left + 'px; top:-' + data.height + 'px"><li>0</li><li>0</li></ul></div>'; style = data.fontSize "width:' + data.width + 'px; height:' + data.height + 'px;"' : ' style=""'; dhtml1 = '<div class="first"' + style + '>' + ulhtml; dhtml2 = '<div' + style + '>' + ulhtml; dot2 = '<span>:</span>'; maxWidth = Math.round((data.width * 2) + 3); captionSize = data.captionSize || (data.fontSize && Math.round(data.fontSize * 0.43)); fsStyleVal = captionSize "' + fsStyleVal + '"' : ''; thtml = (data.displayCaptions "max-width:' + maxWidth + 'px">$1<figcaption' + fsStyle + '>' + language.hours + '</figcaption></figure>' + dot2 : '') + '<figure style="max-width:' + maxWidth + 'px">$1<figcaption' + fsStyle + '>' + language.min + '</figcaption></figure>' + dot2 + '<figure style="max-width:' + maxWidth + 'px">$1<figcaption' + fsStyle + '>' + language.sec + '</figcaption></figure>' : (data.displayHours ">', 'margin-right:' + marginRight + 'px">') : dhtml2; } if (data.displayDays === 1) { dhtml = dhtml.replace('">', 'margin-right:' + marginRight + 'px">'); } thtml = (data.displayCaptions "width:' + ((data.width * data.displayDays) + marginRight + 4) + 'px">$1' + '<figcaption style="' + fsStyleVal + 'padding-right:' + marginRight + 'px">' + language.days + '</figcaption></figure>' : '$1') .replace(/\$1/, dhtml) + thtml; } $this.html(thtml); } else if (method !== 'reset') { // exists clock $.extend(data, options); } $digits = $this.find('div'); if ($digits.length < data.vals.length) { dif = data.vals.length - $digits.length; vals = data.vals; limits = data.limits; data.vals = []; data.limits = []; for (i = 0; i < $digits.length; i += 1) { data.vals[i] = vals[dif + i]; data.limits[i] = limits[dif + i]; } data.iSec = data.vals.length - 1; data.iHour = data.vals.length - 5; } data.sec = data.seconds; $this.data(data); if (method && methods[method]) { methods[method].call($this, data.seconds); } else if (data.start) { methods.start.call($this, data.seconds); } else { init.call($this, data.seconds); } }); }; function init(sec, force) { var data = this.data(); var $digits = this.find('ul'); var isInterval = false; var days, rest, hours, minutes, secs, str, i, j, val; if (!data.vals || $digits.length === 0) { return; } if (!sec) { sec = data.seconds; } if (data.intervalId) { isInterval = true; clearTimeout(data.intervalId); } days = Math.floor(sec / SECONDS_PER_DAY); rest = days * SECONDS_PER_DAY; hours = Math.floor((sec - rest) / SECONDS_PER_HOUR); rest += hours * SECONDS_PER_HOUR; minutes = Math.floor((sec - rest) / 60); rest += minutes * 60; secs = sec - rest; str = (days < 100 "htmlcode">var colorArr = ['rgb(255,235,205)', 'rgb(255,240,245)', 'rgb(255,211,155)']; var problemList = [ [ ' 1.一个长方体形状的盒子长、宽、高分别为20厘米、8厘米和2厘米。现在要用一张纸将其六个面完全包裹起来，要求从纸上剪下的部分不得用作贴补。请问这张纸的大小可能是下列哪一个" <li class='testItem'>" + "<div class='problem'>" + problemList[i][0] + "</div>" + "<div class='selectItem'>"; for (var j = 0; j < problemList[i][1].length; j++) { template += " <div><input type='radio' name='" + problemList[i][1][j].name + "' value='" + problemList[i][1][j].value + "' data-score='" + problemList[i][1][j].selectScore + "'><span>" + problemList[i][1][j].selectAnswer + "</span></div>" } template += "</div></li>" } $('.testContent').append(template) } renderProblem(problemList);//渲染列表 var list_node = document.getElementsByTagName('li'); for (let i = 0; i < list_node.length; i++) { list_node[i].style.backgroundColor = colorArr[i % colorArr.length]; list_node[i].onclick = function (e) {//点击选择答案 if (e.target.tagName == 'INPUT') { answerArr = []; scoreArr = []; } } } //倒计时的插件 $('#countdown-11').timeTo({ seconds: 1800, displayHours: false }); $('#clock-w-step-cb').timeTo({ step: function () { console.log('Executing every 3 ticks'); }, stepCount: 3 }); //提交执行的方法 function submitAnswer() { $("input[type='radio']:checked").each(function () { answerArr.push(Number($(this).val())); // scoreArr.push() scoreArr.push(Number($(this)[0].dataset.score)) }); for (var i = 0; i < scoreArr.length; i++) { score += scoreArr[i] } console.log(score) console.log(answerArr.length) if (answerArr.length == correctData.length) { if (JSON.stringify(answerArr) === JSON.stringify(correctData)) { alert('完全正确，得分为：' + score) } else { alert('继续努力，得分为：' + score) } location.reload(); } else { alert('请提交完整的答题') } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。