首页 > 代码库 > 计时 答题 demo
计时 答题 demo
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 Timer</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script></head><body> <div style="margin: 20px auto; text-align: center;"> <div style="padding: 50px;"> <input type="button" id="btnstart" value="start" /> </div> <div style="background-color: hsl(34, 78%, 91%); width: 500px; margin: 20px auto"> <label id="labNumber" style="font-size: 80px; font-weight: bold;"> 10 </label> </div> <h2>Please Choose the correct answer:</h2> <h3>1: 1+1=?</h3> <input type="radio" name="answer" value="1" />1 <input type="radio" name="answer" value="2" />2 <input type="radio" name="answer" value="3" />3 <input type="radio" name="answer" value="4" />4<br /> <input type="button" id="btnSubmit" value="submit" /> <div style="padding: 50px;"> <input type="button" id="btnStop" value="Stop" /> </div> </div> <script type="text/javascript"> $(‘<audio id="auSound"><source src="http://www.mamicode.com/sound/wrong_answer_buzzer.mp3" type="audio/mpeg"></audio><audio id="auCorrect"><source src="http://www.mamicode.com/sound/correct_answer_bell_ring.mp3" type="audio/mpeg"></audio>‘).appendTo(‘body‘); var timerId; $("#btnstart").live("click", function () { $("input[name=answer]").attr("disabled", false); clearInterval(timerId); var number = 10; var $number = $("#labNumber"); $number.text(number); timerId = setInterval(function () { if (number > 0) { $number.text(‘0‘ + (--number)); } else { clearInterval(timerId); $(‘#auSound‘)[0].play(); $("input[name=answer]").attr("disabled", true); } }, 1000); }) $("#btnStop").live("click", function () { clearInterval(timerId); }); $("#btnSubmit").live("click", function () { clearInterval(timerId); if ($(":radio:checked").val() == "2") { $(‘#auCorrect‘)[0].play(); alert("correct"); } else { $(‘#auSound‘)[0].play(); alert("wrong"); } }); </script></body></html>
这是效果图：（声音文件就不上传了,可以自行百度）
计时 答题 demo
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。