你能帮我吗?我想做一个准确性测验,点击提交后 它将得到您的答案以及您完成测验所需的时间(以秒为单位),并将其与函数中的数据数组进行比较,并将其显示在不同的 HTML 页面上。
我使用 onchange="handleInput(this);"
和 <form action="Results.html">
在不同页面上显示结果。我是 JavaScript 新手。
任何帮助将不胜感激!谢谢。
结果显示示例
Oops! You got 3 answers wrong!
Incorrect answers: 2, 4, 5
You took 17 seconds to complete the quiz. With 5 answers wrong that equates to 65 errors per hour! Data Accuracy Answer Key
There are two exact matches: 1 and 3. All others are not a match. Please keep in mind that 90 seconds is the average time it takes to finish the quiz.
这是迄今为止我的代码:
<html>
<title>Accuracy Proofing</title>
<head>
<script language="JavaScript">
startday = new Date();
clockStart = startday.getTime();
function initStopwatch() {
var myTime = new Date();
var timeNow = myTime.getTime();
var timeDiff = timeNow - clockStart;
this.diffSecs = timeDiff/1000;
return(this.diffSecs);
}
var secStop=setInterval(function(){getSecs()},1000);
function getSecs() {
var mySecs = initStopwatch();
var mySecs1 = ""+mySecs;
mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " secs.";
document.forms[0].elapsed_time.value = mySecs1;
document.getElementById('Timer').innerHTML = 'Elapsed time: ' + mySecs1;
document.getElementById("demo").innerHTML=initStopwatch;
window.setTimeout('getSecs()',1000);
}
</script>
</head>
<body class="quiz-container" onLoad="window.setTimeout('getSecs()',1)">
<div class="quiz-container-inner"
<h3>Accuracy Quiz</h3>
<p class="overview">Compare each pair below. If the numbers, letters, and punctuation are the same, put a check in the "Same" column. If they are different, put a check in the "Different" column.</p>
<div class="box-callout">
<form action="Results.html" method="post" class="products" target="_top">
<input type="hidden" name="elapsed_time" id="elapsed_time" value="0">
<!-- Table markup-->
<div id="Timer" name="Timer"></div>
<table id="hor-zebra" summary="Employee Pay Sheet">
<!-- Table header -->
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Correct</th>
<th scope="col">Same</th>
<th scope="col">Different</th>
<th scope="col"></th>
<th scope="col">Copy</th>
</tr>
</thead>
<!-- Table footer -->
<tfoot>
<tr>
<td scope="col"></td>
<td scope="col">Correct</td>
<td scope="col">Same</td>
<td scope="col">Different</td>
<td scope="col"></td>
<td scope="col">Copy</td>
</tr>
</tfoot>
<!-- Table body -->
<tbody>
<tr class="odd">
<td><span class="number">1.</span></td>
<td><span class="times">November 16, 2005</span></td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field1" id="Field1_1">
</td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field1" id="Field1_2">
</td>
<td><span class="number">1.</span></td>
<td><span class="courier">Novenber 16, 2005</span></td>
</tr>
<tr>
<td><span class="number">2.</span></td>
<td><span class="times">CITIMORTGAGE, INC.</span></td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field2" id="Field2_1">
</td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field2" id="Field2_2">
</td>
<td><span class="number">2.</span></td>
<td><span class="times-tight">CITIMORGAGE, INC.</span></td>
</tr>
<tr class="odd">
<td><span class="number">3.</span></td>
<td><span class="times">ALICIA CARILLO</span></td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field3" id="Field3_1">
</td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field3" id="Field3_2">
</td>
<td><span class="number">3.</span></td>
<td><span class="times">Alcia Carillo</span></td>
</tr>
<tr>
<td><span class="number">4.</span></td>
<td><span class="times">45 Nortwesterly</span></td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field4" id="Field4_1">
</td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field4" id="Field4_2">
</td>
<td><span class="number">4.</span></td>
<td><span class="arial">45 Nortwesterley</span></td>
</tr>
<tr class="odd">
<td><span class="number">5.</span></td>
<td><span class="times">HUSBAND AND WIFE</span></td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field5" id="Field5_1">
</td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field5" id="Field5_2">
</td>
<td><span class="number">5.</span></td>
<td><span class="times">HUSBAND AND WIFE</span></td>
</tr>
<tr>
<td><span class="number">6.</span></td>
<td><span class="times">AMERICAHOMEKEY, INC.</span></td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="1" value="s" name="Field6" id="Field6_1">
</td>
<td>
<input type="radio" onchange="handleInput(this);" tabindex="2" value="d" name="Field6" id="Field6_2">
</td>
<td><span class="number">6.</span></td>
<td><span class="arial">AMERICAHOMKEY, INC.</span></td>
</tr>
</tbody>
</table>
<div class="pad">
<input type="Submit" value="Show Me the Results." class="large brown awesome">
</div>
</form>
</div>
</div>
<script type="text/javascript">
createTimer();
</script>
</body>
</html>
我的网站位于本地,它没有托管到任何网络服务器,我只想让它在本地运行。这就是为什么我不能使用任何服务器端脚本......
最佳答案
可以使用表单的GET方法代替POST,然后解析url中的参数。 (URL存储在window.location中)
关于javascript - 如何使用 onchange 函数显示当前的单选值以在不同的 HTML 页面上反射(reflect)正确的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14738951/