移动端HTML5问卷调查_JS调查问卷网页HTML模板

目前微信公众号以及支付宝的服务窗都比较火、本文将分享一款可以在公众号以及服务窗以及浏览器使用的手机端H5的jQuery选择题提交答案的一个问卷调查的代码、Demo是一款简单的手机端选择题答案示例、Demo包涵5道题目、下面是效果图

HTML代码

<div class="swiper-wrapper">
  <dl class="swiper-slide">
    <dt>1、“大煮干丝”是哪个菜系的代表菜之一( )</dt>
    <dd>A、四川菜系</dd>
    <dd>B、山东菜系</dd>
    <dd>C、广东菜系</dd>
    <dd>D、淮扬菜系</dd>
  </dl>
  <dl class="swiper-slide">
    <dt>2. 吃冰淇淋不解渴主要是因为它:</dt>
    <dd>A、含蛋白质</dd>
    <dd>B、含脂肪</dd>
    <dd>C、含糖</dd>
  </dl>
  <dl class="swiper-slide">
    <dt>3. 工笔是哪种绘画形式的技法</dt>
    <dd>A、水彩画</dd>
    <dd>B、油画</dd>
    <dd>C、水粉画</dd>
    <dd>D、国画</dd>
  </dl>
  <dl class="swiper-slide">
    <dt>4、“大煮干丝”是哪个菜系的代表菜之一( )</dt>
    <dd>A、四川菜系</dd>
    <dd>B、山东菜系</dd>
    <dd>C、广东菜系</dd>
    <dd>D、淮扬菜系</dd>
  </dl>
  <dl class="swiper-slide">
    <dt>5. 吃冰淇淋不解渴主要是因为它:</dt>
    <dd>A、含蛋白质</dd>
    <dd>B、含脂肪</dd>
    <dd>C、含糖</dd>
  </dl>
</div>

js代码

//题目轮播
var swiper = new Swiper(´.swiper-container´, {

  pagination: ´.swiper-pagination´,

  prevButton:´.swiper-button-prev´,
  nextButton:´.swiper-button-next´,

      paginationClickable: true,


      
      paginationBulletRender: function (index, className) {
        $("#totnum").text(index 1);//总页码
          return ´<span class="´   className   ´">´   (index   1)   ´</span>´;

         
      },

      onSlideChangeEnd: function(swiper){
        $("#curnum").text(swiper.activeIndex 1);//当前页
    }

});

//点击底部出现题目数
$("#showall").click(function(){
  $(".maskwhite").toggle();
  $(".swiper-pagination").toggle();
});

//选择答案
$("dl.swiper-slide dd").click(function(){
  $(this).parent("dl").find("dd").removeClass("chance");
  $(this).addClass("chance");
  var indexnum = $(this).parent("dl").index();
  $(".swiper-pagination span").eq(indexnum).addClass("curr");
});

//交卷
$("#numok").click(function(){

  $(".swiper-pagination").hide();
  
  var allnum = $("#totnum").text();
  $("#subnum").text(allnum);
  var lengths = $(".swiper-pagination span.curr").length;

  if(lengths==allnum){
    $(".maskwhite").show();
    $(".subjuan").show();
    $("#subno").click(function(){//取消
      $(".maskwhite").hide();
      $(".subjuan").hide();
    });
    $("#subyes").click(function(){//取消
      $(".maskwhite").hide();
      $(".subjuan").hide();
      window.location.href="#"
    });
  }

  else{
    $(".maskwhite").hide();
  }
  
});

以上是Demo的部分代码片段、希望对大家有用、下面给大家贴上Demo的源代码下载

移动端html5问卷调查Demo源代码下载链接: 移动端html5问卷调查 密码: erb3