1

你能帮助我吗？我想做一个准确性测验，在您单击提交后，它将得到您的答案以及完成测验所需的时间（以秒为单位）并将其与函数中的数据数组进行比较，并将其显示在不同的 HTML 页面上.

我使用onchange="handleInput(this);"& <form action="Results.html">在不同页面上显示结果。我是 Javascript 新手。

任何帮助都感激不尽！谢谢你。

样品结果显示

哎呀！你答错了3个！

错误答案：2、4、5

您用了 17 秒完成了测验。5 个答案错误，相当于每小时 65 个错误！数据准确性答案键

有两个完全匹配：1 和 3。所有其他都不匹配。请记住，90 秒是完成测验的平均时间。

到目前为止，这是我的代码：

<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>

我的网站在本地，它没有托管在任何网络服务器上，我只想让它在本地运行。所以这就是为什么我不能使用任何服务器端脚本......

4

2 回答 2

0

由于您没有向最终用户显示经过的时间，因此处理它的一种更简洁的方法是在表单的 onsubmit 处理程序中只计算一次：

<script>
var startTime = new Date().getTime();
function saveElapsedTime( field) {
  var now = new Date().getTime();
  var elapsed = now - startTime;
  field.value = elapsed;
  return true;
}
</script>

<form ... onsubmit='saveElapsedTime( this.elapsed_time);'>
    <input type='hidden' name='elapsed_time' id='elapsed_time' value='unknown'>
    ...
</form>

至于处理结果并将其显示在另一个页面上，您需要一些服务器支持来接收表单数据，或者您需要更改表单以使用method='get'并通过解析从新页面上的 JavaScript 访问结果数据window.location.search.

于 2013-02-06T23:23:12.723 回答
0

您可以使用表单的 GET 方法而不是 POST，然后解析 url 以获取参数。（存储在 window.location 中的 URL）

于 2013-02-06T21:31:49.207 回答