jquery 水平时间栏在可变秒数后提交页面

Question

我提供包含 50 个问题的在线语言测试。每个问题都有自己的最长持续时间，以秒为单位。每个问题的秒数是数据库中的一个变量。假设问题 1 的变量“秒”为 60，包含 5 个复选框，他需要选中其中 3 个。这意味着参与者有 60 秒的时间勾选 3 个正确的复选框。 如果参与者“及时”勾选了正确的框，他就会点击“提交”。 如果用户在 60 秒内没有回答，页面会自动提交(即使他没有勾选所有复选框)。 在测试窗口的左上角，考生可以看到水平时间条在移动。没有显示秒数，但候选人可以清楚地看到他的时间即将到期......

这个程序已经使用 javascript 运行了 4 年，没有任何问题(见下文)。但是:它并不适用于所有浏览器，例如Firefox 无法识别它，结果是 Firefox 用户有足够的时间来完成或研究他们的答案:-) 到目前为止，我只是简单地说“抱歉，我们的系统仅针对 Internet Explorer 进行了优化”，仅此而已。毕竟，95% 的浏览器都是 IE。但现在我查看了用户统计数据，(就我而言)只有 67% 的参与者仍然使用 IE。 这就是为什么我目前正在寻找一种方法将我的脚本从“页面中”的 javascript 修改为 JQUERY。我几周前才发现 JQUERY(我不是程序员)，并且我已经使用 JQUERY 完成了很多事情，它的工作方式就像一个魅力。而且，更重要的是，JQUERY 似乎可以在所有浏览器中运行!

但是，我似乎没有找到可以解决这个问题的正确 JQUERY 代码。 为了供您引用，我在下面附上了我当前使用的代码:

<!--
#bar, #barbackground
{
position:absolute;
left:0;
top:0;
background-color:#FFFFFF;
}

#barbackground{
background-color:#c0c0c0;
}
-->
</style>
<CFOUTPUT>

<CFIF #selectvragen.Vragen_seconds# EQ 0><CFSET seconden=60><CFELSE><CFSET seconden=#selectvragen.Vragen_seconds#+2></CFIF>
<script language="JavaScript1.2">
//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=#seconden#
function postaction(){
    document.forms.formulier.submit()
//Example action could be to navigate to a URL, like following:
//window.location="submit.cfm?scoreperpage=#scoreperpage#&subcatID=#selectvragen.Vragen_subcatID#&level=#selectvragen.Vragen_level#&maxpunten=#maxpunten#&maxtebehalenpunten=#selectvragen.Vragen_maxpunten#&vnr=#vnr#&Tabel=too_late&optie=1&score=#score#&teller=#teller#&nieuwelijst=#nieuwelijst#&starttijdQuestion=#CreateODBCDateTime(now())#"

}

///Done Editing/////////////
var clipright=0
var widthIE=0
var widthNS=0

function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}

function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}
window.onload=initializebar
</script>

</CFOUTPUT>
            <script language="JavaScript1.2">
            if (document.all){
            document.write('<div id="baranchor" style="position:relative;width:200px;height:10px;visibility:hidden;">')
            document.write('<div id="barbackground" style="width:200px;height:10px;z-index:9"></div>')
            document.write('<div id="bar" style="width:200px;height:10px;z-index:10"></div>')
            document.write('</div>')
            }
            </script>

我不知道如何继续，也不确定这个问题是否清楚...如果需要的话，我还可以发送测试的屏幕截图，以便为您提供更好的 View ？

提前致谢，

亲切的问候，

托马斯(比利时)

Answer 1

您的表现非常好且值得赞赏。

但是，我也是 jQuery/javaScript 的新手，我无法完全理解你的代码。但是，我能找到的一件事是使用 jQuery Timer Plugin.

我确信这不会完全解决您的问题。而且，我也等待其他有经验的人提供一些适当的明确帮助。

谢谢你。