移动端HTML5问卷调查_JS调查问卷网页HTML模板
2017-03-21 13:20:19  By: dwtedx

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

调查问卷网页html模板


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+