本文实例为大家分享了JavaScript实现答题评分功能的具体代码，供大家参考，具体内容如下

效果图

直接上代码

HTML部分

JavaScript实现一个在线做题测试网页

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

* @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' ? data.seconds : sec;

this.find('div').css({ backgroundPosition: 'left center' });

this.find('ul').parent().removeClass('timeTo-alert');

init.call(this, secs, true);

}

};

var dictionary = {

en: { days: 'days', hours: 'hours', min: 'minutes', sec: 'seconds' },

ru: { days: 'дней', hours: 'часов', min: 'минут', sec: 'секунд' },

ua: { days: 'днiв', hours: 'годин', min: 'хвилин', sec: 'секунд' },

de: { days: 'Tag', hours: 'Uhr', min: 'Minuten', sec: 'Secunden' },

fr: { days: 'jours', hours: 'heures', min: 'minutes', sec: 'secondes' },

es: { days: 'días', hours: 'horas', min: 'minutos', sec: 'segundos' },

sp: { days: 'días', hours: 'horas', min: 'minutos', sec: 'segundos' },

it: { days: 'giorni', hours: 'ore', min: 'minuti', sec: 'secondi' },

nl: { days: 'dagen', hours: 'uren', min: 'minuten', sec: 'seconden' },

no: { days: 'dager', hours: 'timer', min: 'minutter', sec: 'sekunder' },

pt: { days: 'dias', hours: 'horas', min: 'minutos', sec: 'segundos' },

tr: { days: 'gün', hours: 'saat', min: 'dakika', sec: 'saniye' },

pl: { days: 'dni', hours: 'godziny', min: 'minuty', sec: 'secundy' }

};

/* eslint-enable no-multi-spaces */

if (typeof $.support.transition === 'undefined') {

$.support.transition = (function () {

var thisBody = document.body || document.documentElement;

var thisStyle = thisBody.style;

var support = thisStyle.transition !== undefined

|| thisStyle.WebkitTransition !== undefined

|| thisStyle.MozTransition !== undefined

|| thisStyle.MsTransition !== undefined

|| thisStyle.OTransition !== undefined;

return support;

}());

}

$.fn.timeTo = function () {

var options = {};

var now = Date.now();

var j, arg, num, method, time, days, tt, sec, m, t;

for (j = 0; j < arguments.length; j += 1) {

arg = arguments[j];

if (j === 0 && typeof arg === 'string') {

method = arg;

} else if (typeof arg === 'object') {

if (typeof arg.getTime === 'function') {

// arg is a Date object

options.timeTo = arg;

} else {

// arg is an options object

options = $.extend(options, arg);

}

} else if (typeof arg === 'function') {

// arg is callback

options.callback = arg;

} else {

num = parseInt(arg, 10);

// arg is seconds of timeout

if (!isNaN(num)) {

options.seconds = num;

}

}

}

// set time to countdown to

if (options.timeTo) {

if (options.timeTo.getTime) {

// set time as date object

time = options.timeTo.getTime();

} else if (typeof options.timeTo === 'number') {

// set time as integer in millisec

time = options.timeTo;

}

if (time > now) {

options.seconds = Math.floor((time - now) / 1000);

} else {

options.seconds = 0;

}

} else if (options.time || !options.seconds) {

time = options.time;

if (!time) {

time = new Date(now);

}

if (typeof time === 'object' && time.getTime) {

options.seconds = (time.getDate() * SECONDS_PER_DAY) + (time.getHours() * SECONDS_PER_HOUR) +

(time.getMinutes() * 60) + time.getSeconds();

options.countdown = false;

} else if (typeof time === 'string') {

tt = time.split(':');

sec = 0;

m = 1;

while (tt.length) {

t = tt.pop();

sec += t * m;

m *= 60;

}

options.seconds = sec;

options.countdown = false;

}

}

if (options.countdown !== false

&& options.seconds > SECONDS_PER_DAY

&& typeof options.displayDays === 'undefined') {

days = Math.floor(options.seconds / SECONDS_PER_DAY);

options.displayDays = (days < 10 && 1) || (days < 100 && 2) || 3;

} else if (options.displayDays === true) {

options.displayDays = 3;

} else if (options.displayDays) {

options.displayDays = options.displayDays > 0 ? Math.floor(options.displayDays) : 3;

}

return this.each(function () {

var $this = $(this);

var data = $this.data();

var defs, opt, i, css, language, left, ulhtml, style, dhtml1, dhtml2, dot2, maxWidth,

captionSize, fsStyleVal, fsStyle, thtml, marginRight, dhtml, $digits, dif, vals, limits;

if (data.intervalId) {

clearInterval(data.intervalId);

data.intervalId = null;

}

if (!data.vals) {

// new clock

if (data.opt) {

opt = data.options;

} else {

opt = options;

}

// clone the defaults object

defs = Object.keys(defaults).reduce(function (obj, key) {

if (Array.isArray(defaults[key])) {

obj[key] = defaults[key].slice(0);

} else {

obj[key] = defaults[key];

}

return obj;

}, {});

data = $.extend(defs, opt);

data.options = opt;

data.height = Math.round((data.fontSize * 100) / 93) || data.height;

data.width = Math.round((data.fontSize * 0.8) + (data.height * 0.13)) || data.width;

data.displayHours = !!(data.displayDays || data.displayHours);

css = {

fontFamily: data.fontFamily

};

if (data.fontSize > 0) {

css.fontSize = data.fontSize + 'px';

}

language = data.languages[data.lang] || dictionary[data.lang];

$this

.addClass('timeTo')

.addClass('timeTo-' + data.theme)

.css(css);

left = Math.round(data.height / 10);

ulhtml = '

• 0
• 0