当前位置： 文江博客话题详情

移动端计时单选题答案获取以及总共花费时间

发布于 2022-09-01 06:09:37 字数 13901 浏览 9 评论 0

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>&nbsp;:&nbsp;<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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

~没有更多了~

关于作者

金兰素衣

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文