10个单选题 一个做题时间 在规定的时间做完 如果没做完有提示时间到 如果做完了 那么点击提交的时候要搜集答案并返回一个数组或者字符串，还需要获取做题总共花了多少时间
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<script>
var phoneWidth=parseInt(window.screen.width);var phoneScale=phoneWidth/1080;var ua=navigator.userAgent;if(/Android (\d+\.\d+)/.test(ua)){var version=parseFloat(RegExp.$1);if(version>2.3){document.write('<meta name="viewport" content="width=1080, minimum-scale = '+phoneScale+", maximum-scale = "+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width=1080, target-densitydpi=device-dpi">')}}else{document.write('<meta name="viewport" content="width=1080, user-scalable=no, target-densitydpi=device-dpi">')};
</script>
<title>最强医学大脑-BMJ挑战赛</title>
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="swipe">
<div class="countdown">答题倒计时<p><span id="mini"></span> : <span id="second"></span></p></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="hd">
<h3>1.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check clecked"></i><input type="radio" name="1" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="1" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="1" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="1" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="1" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>2.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="2" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="2" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="2" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="2" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="2" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>3.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="3" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="3" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="3" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="3" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="3" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>4.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="4" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="4" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="4" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="4" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="4" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>5.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="5" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="5" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="5" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="5" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="5" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>6.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="6" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="6" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="6" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="6" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="6" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>7.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="7" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="7" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="7" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="7" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="7" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>8.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="8" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="8" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="8" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="8" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="8" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>9.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="9" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="9" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="9" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="9" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="9" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
</div>
<div class="swiper-slide">
<div class="hd">
<h3>10.糖尿病（简单）</h3>
<p>下列关于口服降糖药的选项，哪项是正确的？(单选题)</p>
</div>
<div class="bd">
<p><i class="check"></i><input type="radio" name="10" value="阿卡波糖促进餐时胰岛素分泌">阿卡波糖促进餐时胰岛素分泌</p>
<p><i class="check"></i><input type="radio" name="10" value="二甲双胍能够安全应用于肾衰竭患者">二甲双胍能够安全应用于肾衰竭患者</p>
<p><i class="check"></i><input type="radio" name="10" value="格列本脲以原型经肾脏排泄">格列本脲以原型经肾脏排泄</p>
<p><i class="check"></i><input type="radio" name="10" value="格列齐特抑制糖异生">格列齐特抑制糖异生</p>
<p><i class="check"></i><input type="radio" name="10" value="二甲双胍抑制肝脏糖异生">二甲双胍抑制肝脏糖异生</p>
</div>
<a href="javascript:;" class="submit testsubmit">提交</a>
</div>
</div>
<div class="currentPage" id="currentPage"></div>
<div class="swiper-pagination"></div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script>
$(document).ready(function () {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: false,
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (index, className) {
return '<span class="' + className + '"></span>';
},
onInit: function(swiper){
$('#currentPage').html('第'+'<span>'+(swiper.activeIndex+1)+'</span>'+'题:'+'<span>'+(swiper.activeIndex+1)+'</span>'+'/10');
},
onSlideChangeEnd: function(swiper){
$('#currentPage').html('第'+'<span>'+(swiper.activeIndex+1)+'</span>'+'题:'+'<span>'+(swiper.activeIndex+1)+'</span>'+'/10');
}
}) ;
$('.check').click(function(){
setTimeout(function(){mySwiper.slideNext();}, 1500);
$(this).toggleClass('checked').parent().siblings().children('i').removeClass('checked');
});
timer(intDiff);
});
var intDiff = parseInt(900);//倒计时总秒数量
function timer(intDiff){
window.setInterval(function(){
var minute=0,
second=0;//时间默认值
if(intDiff > 0){
minute = Math.floor(intDiff / 60) ;
second = Math.floor(intDiff) - (minute * 60);
}else{
alert('时间到！');
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#mini').html(minute+'分');
$('#second').html(second+'秒');
intDiff--;
}, 1000);
}
</script>
</body>
</html>
线上链接 http://demo.sliencer.com/bmj/test.html