Web-Frontend
js-Tutorial
Beispiel, das zeigt, wie JS ein einfaches Multiple-Choice-Bewertungssystem implementiert
Beispiel, das zeigt, wie JS ein einfaches Multiple-Choice-Bewertungssystem implementiert
In diesem Artikel wird der Beispielcode eines in js implementierten einfachen Multiple-Choice-Bewertungssystems vorgestellt. Er ist sehr gut und hat Referenzwert.
Einschließlich Inhalt: JS-Kapselungsformular, JS-Verifizierungsformular
Es soll sich um ein Bewertungssystem handeln, aber es fühlt sich an, als ob es nur als kleine Demo betrachtet werden kann. Es ist sehr wässrig und hat keine Datenbank. Es verwendet nur JS Erstellen Sie ein einfaches Multiple-Choice-Bewertungssystem
----- ------------------------------- ------------------- -----------
1. Designideen
Formularverpackung:
[1] Da es mit JS-Verpackung eingereicht wird, sind keine Formular-Tags erforderlich
[2] Platzieren Sie mehrere Eingabe-Tags als Eingabeelemente
【3】Schreiben Sie JS, um Eingabeelemente abzurufen und übermitteln Sie sie über die Get-Methode an eine andere Seite
Verifizierungsformular (Anzeige Ergebnisse)
【1】Rufen Sie die von get übergebenen Parameter ab
【2】Durch JS analysieren
【3】Anzeige an der entsprechenden Position
----------------------- ------------- --------------
2. Der Referenzquellcode ist wie folgt folgt
request.html
<html>
<head>
<title>考试系统</title>
<meta http-equiv="accept-charset" charset="utf-8">
<script src="jquery.min.js"></script>
<script type="text/javascript">
function getjson() {
var radio = new Array();
for (var i = 1; i <= 5; i++) {//获取radio的值
var radio_name = new String("radio_" + i);
radio[i - 1] = $('input:radio[name=' + radio_name + ']:checked').val()
}
for (var i = 1; i <= 2; i++) {//获取checkbox的的输入
var checkbox_name = new String("checkbox_" + i);
var chk_value = [];
$('input:checkbox[name=' + checkbox_name + ']:checked').each(function () {
chk_value.push($(this).val());
});
radio[i + 4] = "";//置为空
for (var j = 0; j < chk_value.length; j++) {
radio[i + 4] = radio[i + 4] + chk_value[j];
}
}
//数组转json串
var json = JSON.stringify(radio);
return json;
}
function my_confirm() {
var json = getjson();
var msg = "您真的答案是：" + json + ",是否确认提交";
if (confirm(msg) == true) {
window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + json;
} else {
return false;
}
}
$(function () {
var m = 1;
var s = 10;
setInterval(function () {
if (m >= 0) {
if (s < 10) {
$('#time').html("剩余时间：" + m + ':0' + s);
} else {
$('#time').html("剩余时间：" + m + ':' + s);
}
s--;
if (s < 0) {
s = 59;
m--;
}
if (m == 0 && s < 1) {
window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + getjson();
}
}
}, 1000)
})
</script>
</head>
<body>
<h3 id="学年期末测试题">2016--2017学年期末测试题</h3>
<p id="time" style="color:red;float: right;margin: 12px 20px 0 0;padding: 0 0 0 0;font-size: xx-large"></p>
<br/><br/><br/>
<hr/>
<h4 id="一-单选题-每题-分-满分-分">一、单选题（每题12分，满分60分）</h4>
1.当方法遇到异常又不知如何处理时，下列（） 做法是正确的。<br>
<input type="radio" name="radio_1" value="A">A、捕获异常<br>
<input type="radio" name="radio_1" value="B">B、抛出异常<br>
<input type="radio" name="radio_1" value="C">C、声明异常<br>
<input type="radio" name="radio_1" value="D">D、嵌套异常<br>
2.下列说法错误的是() <br>
<input type="radio" name="radio_2" value="A">A、在java中一个类被声明为final类型，表示该类不能被继承。<br>
<input type="radio" name="radio_2" value="B">B、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递。<br>
<input type="radio" name="radio_2" value="C">C、一个类不能既被声明为 abstract，又被声明为final。<br>
<input type="radio" name="radio_2" value="D">D、方法的覆盖(Overriding)和重载(Overloading)是Java多态性的表现，他们没有区别。<br>
3.下列创建数组的方法哪个是错误的? <br>
<input type="radio" name="radio_3" value="A">A、Date[] arr = new Date[5];<br>
<input type="radio" name="radio_3" value="B">B、Date arr[] = new Date[];<br>
<input type="radio" name="radio_3" value="C">C、Date arr[][] = new Date[4][5];<br>
<input type="radio" name="radio_3" value="D">D、Date arr[][] = new Date[4][];<br>
4.在读文件Employee.txt 时，可以直接使用该文件作为参数的类是() <br>
<input type="radio" name="radio_4" value="A">A、BufferedReader<br>
<input type="radio" name="radio_4" value="B">B、FileInputStream<br>
<input type="radio" name="radio_4" value="C">C、DataOutputStream<br>
<input type="radio" name="radio_4" value="D">D、DataInputStream<br>
5.下列关于线程的说法中，错误的是？ <br>
<input type="radio" name="radio_5" value="A">A、线程必须通过方法start() 来启动。<br>
<input type="radio" name="radio_5" value="B">B、线程创建后，其优先级是可以改变的。<br>
<input type="radio" name="radio_5" value="C">C、实现Runnable接口或者从Thread类派生的线程类没有区别。<br>
<input type="radio" name="radio_5" value="D">D、当对象用synchronized 修饰时，表明该对象在任一时刻只能由一个线程访问。<br>
<br/>
<h4 id="二-多选题-每题-分-满分-分-错选-少选-多选不得分">二、多选题（每题20分，满分40分，错选、少选、多选不得分）</h4>
6.下列说法正确的是() <br>
<input type="checkbox" name="checkbox_1" value="A">A、在java中一个类被声明为final类型，表示该类不能被继承。<br>
<input type="checkbox" name="checkbox_1" value="B">B、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递。<br>
<input type="checkbox" name="checkbox_1" value="C">C、一个类不能既被声明为 abstract，又被声明为final。<br>
<input type="checkbox" name="checkbox_1" value="D">D、方法的覆盖(Overriding)和重载(Overloading)是Java多态性的表现，他们没有区别。<br>
7.当方法遇到异常又不知如何处理时，下列（） 做法是不正确的。<br>
<input type="checkbox" name="checkbox_2" value="A">A、捕获异常<br>
<input type="checkbox" name="checkbox_2" value="B">B、抛出异常<br>
<input type="checkbox" name="checkbox_2" value="C">C、声明异常<br>
<input type="checkbox" name="checkbox_2" value="D">D、嵌套异常<br>
<hr/>
<input type="button" onclick="my_confirm()" value="考试完成">
</body>
</html>-- -------- --------------------------- --------- -----
result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考试结果</title>
<script src="jquery.min.js"></script>
<script>
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
function showResult() {
var answer = ["B", "D", "B", "B", "D", "ABC", "ACD"];//标准答案
var answer_score = [12, 12, 12, 12, 12, 20, 20];//答案的分数
var user_answer = JSON.parse(getUrlParam("json"));//获取用户答案
var radio_num = parseInt(getUrlParam("radio"));//获取单选个数
var checkbox_num = parseInt(getUrlParam("checkbox"));//获取多选个数
var radio_result = 0;//单选分数
var checkbox_result = 0;//多选分数
var radio_right_num = 0;//单选答对个数
var checkbox_right_num = 0;//多选答对个数
var result = 0;//总分数
var user_answer_result = new Array();//用户没到题的答题情况
for (var i = 0; i < user_answer.length; i++) {
if (user_answer[i] == answer[i]) {
if (i < radio_num) {
radio_result = radio_result + answer_score[i];
radio_right_num++;
} else {
checkbox_result = checkbox_result + answer_score[i];
checkbox_right_num++;
}
user_answer_result[i] = "正确";
} else {
user_answer_result[i] = "错误";
}
}
result = checkbox_result + radio_result;
//结果展示
var show_result1;
var show_result2;
var show_result3;
var show_result4;
var show_result5;
var show_result6;
show_result1 = "你的答案结果为：";
for (var i = 0; i < user_answer.length; i++) {
show_result1 = show_result1 + (i + 1) + "：" + user_answer_result[i] + "； ";
}
show_result2 = "总题目个数：" + user_answer.length;
show_result3 = "答对单选题题目个数：" + radio_right_num + "； 得分：" + radio_result;
show_result4 = "答对多选题题目个数：" + checkbox_right_num + "； 得分：" + checkbox_result;
show_result5 = "答错题目个数：" + (user_answer.length - radio_right_num - checkbox_right_num);
show_result6 = " 本次考试总成绩为：" + result;
$("p#show_result1").html(show_result1);
$("p#show_result2").html(show_result2);
$("p#show_result3").html(show_result3);
$("p#show_result4").html(show_result4);
$("p#show_result5").html(show_result5);
$("p#show_result6").html(show_result6);
}
</script>
</head>
<body>
<h2 id="考试结束">考试结束！</h2>
<hr/>
<input type="button" onclick="showResult()" value="查看结果">
<p id="show_result1">
<p>
<hr/>
<p id="show_result2"></p>
<p id="show_result3"></p>
<p id="show_result4"></p>
<p id="show_result5"></p>
<hr/>
<p id="show_result6"></p>
</body>
</html>Das Ergebnis ist wie folgt:
Das obige ist der detaillierte Inhalt vonBeispiel, das zeigt, wie JS ein einfaches Multiple-Choice-Bewertungssystem implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Der einfachste Weg, die Seriennummer der Festplatte abzufragen
Feb 26, 2024 pm 02:24 PM
Die Seriennummer der Festplatte ist eine wichtige Kennung der Festplatte und dient in der Regel zur eindeutigen Identifizierung der Festplatte und zur Identifizierung der Hardware. In einigen Fällen müssen wir möglicherweise die Seriennummer der Festplatte abfragen, beispielsweise bei der Installation eines Betriebssystems, der Suche nach dem richtigen Gerätetreiber oder der Durchführung von Festplattenreparaturen. In diesem Artikel werden einige einfache Methoden vorgestellt, mit denen Sie die Seriennummer der Festplatte überprüfen können. Methode 1: Verwenden Sie die Windows-Eingabeaufforderung, um die Eingabeaufforderung zu öffnen. Drücken Sie im Windows-System die Tasten Win+R, geben Sie „cmd“ ein und drücken Sie die Eingabetaste, um den Befehl zu öffnen
Kann die Wallpaper-Engine von Familien gemeinsam genutzt werden?
Mar 18, 2024 pm 07:28 PM
Unterstützt Wallpaper die Familienfreigabe? Leider kann dies nicht unterstützt werden. Dennoch haben wir Lösungen. Sie können beispielsweise mit einem kleinen Konto einkaufen oder die Software und Hintergrundbilder zunächst von einem großen Konto herunterladen und dann zum kleinen Konto wechseln. Das einfache Starten der Software ist vollkommen in Ordnung. Kann Wallpaperengine mit der Familie geteilt werden? Antwort: Wallpaper unterstützt derzeit nicht die Familienfreigabefunktion. 1. Es versteht sich, dass WallpaperEngine nicht für Familienfreigabeumgebungen geeignet zu sein scheint. 2. Um dieses Problem zu lösen, wird empfohlen, den Kauf eines neuen Kontos in Betracht zu ziehen. 3. Oder laden Sie zuerst die erforderliche Software und Hintergrundbilder im Hauptkonto herunter und wechseln Sie dann zu anderen Konten. 4. Öffnen Sie einfach die Software mit einem leichten Klick und alles ist in Ordnung. 5. Sie können die Eigenschaften auf der oben genannten Webseite einsehen.
Wie stelle ich das Hintergrundbild für den Sperrbildschirm in der Wallpaper-Engine ein? So verwenden Sie die Wallpaper-Engine
Mar 13, 2024 pm 08:07 PM
WallpaperEngine ist eine Software, die häufig zum Festlegen von Desktop-Hintergrundbildern verwendet wird. Benutzer können in WallpaperEngine nach ihren Lieblingsbildern suchen, um Desktop-Hintergrundbilder zu erstellen. Sie unterstützt auch das Hinzufügen von Bildern vom Computer zu WallpaperEngine, um sie als Computer-Hintergrundbilder festzulegen. Werfen wir einen Blick darauf, wie WallpaperEngine das Hintergrundbild für den Sperrbildschirm festlegt. Tutorial zum Einstellen des Hintergrundbilds für den Sperrbildschirm von WallpaperEngine 1. Rufen Sie zuerst die Software auf, wählen Sie dann „Installiert“ aus und klicken Sie auf „Hintergrundoptionen konfigurieren“. 2. Nachdem Sie das Hintergrundbild in separaten Einstellungen ausgewählt haben, müssen Sie unten rechts auf OK klicken. 3. Klicken Sie dann oben auf die Einstellungen und Vorschau. 4. Weiter
iBatis vs. MyBatis: Welches ist besser für Sie?
Feb 19, 2024 pm 04:38 PM
iBatis vs. MyBatis: Wofür sollten Sie sich entscheiden? Einführung: Mit der rasanten Entwicklung der Java-Sprache sind viele Persistenz-Frameworks entstanden. iBatis und MyBatis sind zwei beliebte Persistenz-Frameworks, die beide eine einfache und effiziente Lösung für den Datenzugriff bieten. In diesem Artikel werden die Funktionen und Vorteile von iBatis und MyBatis vorgestellt und einige spezifische Codebeispiele gegeben, die Ihnen bei der Auswahl des geeigneten Frameworks helfen. Einführung in iBatis: iBatis ist ein Open-Source-Persistenz-Framework
Gibt es beim Ansehen von Wallpaper Engine-Filmen einen Virus?
Mar 18, 2024 pm 07:28 PM
Benutzer können bei Verwendung von WallpaperEngine verschiedene Hintergrundbilder herunterladen und auch dynamische Hintergrundbilder verwenden. Viele Benutzer wissen nicht, ob beim Ansehen von Videos auf WallpaperEngine Viren vorhanden sind, Videodateien können jedoch nicht als Viren verwendet werden. Gibt es Viren beim Ansehen von Filmen auf WallpaperEngine? Antwort: Nein. 1. Nur Videodateien können nicht als Viren verwendet werden. 2. Stellen Sie einfach sicher, dass Sie Videos von vertrauenswürdigen Quellen herunterladen und Computersicherheitsmaßnahmen ergreifen, um das Risiko einer Virusinfektion zu vermeiden. 3. Anwendungshintergründe liegen im APK-Format vor und APK kann Trojaner enthalten. 4. WallpaperEngine selbst enthält keine Viren, aber einige Anwendungshintergründe in der Kreativwerkstatt können Viren enthalten.
In welchem Ordner befinden sich die Hintergrundbilder der Wallpaper Engine?
Mar 19, 2024 am 08:16 AM
Bei der Verwendung von Hintergrundbildern können Benutzer verschiedene Hintergrundbilder herunterladen, die ihnen gefallen. Viele Benutzer wissen nicht, in welchem Ordner sich die Hintergrundbilder befinden. Die von Benutzern heruntergeladenen Hintergrundbilder werden im Inhaltsordner gespeichert. In welchem Ordner befindet sich das Hintergrundbild? Antwort: Inhaltsordner. 1. Öffnen Sie den Datei-Explorer. 2. Klicken Sie links auf „Dieser PC“. 3. Suchen Sie den Ordner „STEAM“. 4. Wählen Sie „Steamapps“. 5. Klicken Sie auf „Werkstatt“. 6. Suchen Sie den Ordner „content“.
Verbraucht die Wallpaper-Engine viel Strom?
Mar 18, 2024 pm 08:30 PM
Benutzer können ihre Computerhintergründe ändern, wenn sie WallpaperEngine verwenden. Viele Benutzer wissen nicht, dass WallpaperEngine viel Strom verbraucht als statische Hintergrundbilder. Verbraucht Wallpaperengine viel Strom? Antwort: Nicht viel. 1. Dynamische Hintergrundbilder verbrauchen etwas mehr Strom als statische Hintergrundbilder, aber nicht viel. 2. Durch die Aktivierung des dynamischen Hintergrundbilds erhöht sich der Stromverbrauch des Computers und es verringert sich die Speichernutzung geringfügig. 3. Benutzer müssen sich keine Sorgen über den hohen Stromverbrauch dynamischer Hintergrundbilder machen.
So ändern Sie die Schriftgröße im Microsoft Edge-Browser - So ändern Sie die Schriftgröße im Microsoft Edge-Browser
Mar 04, 2024 pm 05:58 PM
Ich schätze, Sie sind mit dem Microsoft Edge-Browser nicht vertraut, aber wissen Sie, wie man die Schriftgröße im Microsoft Edge-Browser ändert? Der folgende Artikel beschreibt, wie man die Schriftgröße im Microsoft Edge-Browser ändert. Suchen Sie zunächst den Microsoft Edge-Browser und doppelklicken Sie darauf, um ihn zu öffnen. Sie finden den Microsoft Edge-Browser in der Desktop-Verknüpfung, im Startmenü oder in der Taskleiste und können ihn per Doppelklick öffnen. Zweitens öffnen Sie die Benutzeroberfläche [Einstellungen], um diese Browseroberfläche aufzurufen, klicken Sie auf das [...]-Logo in der oberen linken Ecke und doppelklicken Sie auf [Einstellungen], um die Einstellungsoberfläche zu öffnen. Suchen und öffnen Sie erneut die Benutzeroberfläche [Darstellung] und scrollen Sie mit der Maus nach unten
