javascript - 移动端计时单选题答案获取以及总共花费时间
高洛峰
高洛峰 2017-04-10 15:04:13
[JavaScript讨论组]

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">
    <p class="countdown">答题倒计时<p><span id="mini"></span>&nbsp;:&nbsp;<span id="second"></span></p></p>
    <p class="swiper-container">
        <p class="swiper-wrapper">
            <!-- Slides -->
            <p class="swiper-slide">
                <p class="hd">
                    <h3>1.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>2.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>3.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>4.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>5.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>6.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>7.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>8.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>9.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
            </p>
            <p class="swiper-slide">
                <p class="hd">
                    <h3>10.糖尿病(简单)</h3>
                    <p>下列关于口服降糖药的选项,哪项是正确的?(单选题)</p>
                </p>
                <p 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>
                </p>
                <a href="javascript:;" class="submit testsubmit">提交</a>
            </p>
        </p>
        <p class="currentPage" id="currentPage"></p>
        <p class="swiper-pagination"></p>
    </p>
    <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>

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
ringa_lee

线上链接 http://demo.sliencer.com/bmj/test.html

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号