jquery实现手机端移动端微信端问卷调查答题页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery实现手机端移动端微信端问卷调查答题页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        /*base*/blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
            margin: 0;
            padding: 0
        }

        html {
            font-size: 62.5%;
            width: 100%;
            height: 100%;
        }

        body {
            font-size: 1.4rem;
            width: 100%;
            height: 100%;
            -webkit-font-smoothing: antialiased;
        }

        html, body {
            font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
        }

        img {
            display: block;
        }

        ol,ul {
            list-style: none
        }

        a {
            text-decoration: none
        }

        a:hover {
            text-decoration: underline
        }

        * {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /*style*/.wrap {
            width: 100%;
            height: 100%;
        }

        .enter_wrap {
            width: 100%;
            height: 100%;
            background: url(//repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png) no-repeat;
            background-size: 100% 100%;
        }

        .enter_wrap .wrap_top {
            width: 100%;
            position: absolute;
            top: 10%;
        }

        .enter_wrap .wrap_top .top_img {
            width: 100%;
            margin: 0 auto;
        }

        .enter_wrap .wrap_center {
            width: 100%;
            position: absolute;
            bottom: 22%;
        }

        .enter_wrap .wrap_center .enter_btn {
            width: 78%;
            margin: 0 auto;
            color: #FFF;
            text-align: center;
            font-size: 1.8rem;
            line-height: 44px;
            background: url(//repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png) repeat-x;
            background-size: 1px 44px;
            border: 1px #282940 solid;
        }

        .enter_wrap .wrap_bottom {
            width: 100%;
            position: absolute;
            bottom: 4%;
        }

        .enter_wrap .wrap_bottom .bottom_img {
            width: 60%;
            margin: 0 auto;
        }

        .topic_wrap {
            display: none;
            width: 100%;
            height: 100%;
            background: url(//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_600,/quality,q_90);
            background-size: 100% 100%;
        }

        .topic_wrap .fade_wrap {
            width: 100%;
            height: 100%;
        }

        .topic_wrap .wrap_top {
            width: 100%;
            position: absolute;
            top: 8%;
        }

        .topic_wrap .wrap_top .topic_no {
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            color: #FFF;
            font-size: 1.2rem;
            border-radius: 20px;
            background: url(//repo.bfw.wiki/bfwrepo/image/60dd75673abe6.png) repeat-x;
            background-size: 1px 42px;
            margin: 0 auto;
        }

        .topic_wrap .wrap_top .topic_no .curr_no {
            font-size: 1.6rem;
        }

        .topic_wrap .wrap_top1 {
            width: 100%;
            position: absolute;
            top: 20%;
        }

        .topic_wrap .wrap_top1 .topic_title {
            width: 80%;
            margin: 0 auto;
            text-align: center;
            font-size: 1.6rem;
            color: #FFF;
        }

        .topic_wrap .wrap_center {
            width: 100%;
            position: absolute;
            top: 34%;
        }

        .topic_wrap .wrap_center .topic_option {
            width: 80%;
            margin: 0 auto;
            text-align: center;
            display: table;
        }

        .topic_wrap .wrap_center .topic_option .option_item {
            width: 100%;
            height: 54px;
            vertical-align: middle;
            border-radius: 6px;
            margin-bottom: 10px;
            background: white;
            background-size: 1px 54px;
            font-size: 1.3rem;
            color: #868686;
            border: 1px #282940 solid;
            padding: 0 10px;
        }

        .topic_wrap .wrap_center .topic_option .select {
            background: url(//repo.bfw.wiki/bfwrepo/image/60dd75673abe6.png) repeat-x;
            color: #EEE;
        }

        .topic_wrap .wrap_bottom {
            width: 100%;
            position: absolute;
            bottom: 4%;
        }

        .topic_wrap .wrap_bottom .lagou_logo {
            width: 32%;
            margin: 0 auto;
        }

        .over_wrap {
            display: none;
            width: 100%;
            height: 100%;
            background: url(//repo.bfw.wiki/bfwrepo/image/60dd75673abe6.png) no-repeat;
            background-size: 100% 100%;
        }

        .over_wrap .wrap_top {
            width: 100%;
            height: 18%;
            position: absolute;
            top: 6%;
        }

        .over_wrap .wrap_top .over_grade {
            width: 50%;
            height: 100%;
            margin: 0 auto;
            text-align: center;
            color: #FFF;
            font-size: 1.8rem;
        }

        .over_wrap .wrap_top .over_grade .grade_title {
            display: block;
            height: 24%;
        }

        .over_wrap .wrap_top .over_grade .grade {
            display: table;
            color: #E53046;
            height: 76%;
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        .over_wrap .wrap_top .over_grade .grade .grade_detail_wrap {
            display: table-cell;
            vertical-align: middle;
        }

        .over_wrap .wrap_top .over_grade .grade .grade_detail {
            font-size: 3.0rem;
            font-weight: normal;
        }

        .over_wrap .wrap_center {
            width: 100%;
            position: absolute;
            top: 24%;
        }

        .over_wrap .wrap_center .over_des {
            width: 68%;
            margin: 0 auto;
            background: #F8F8F8;
            padding: 6%;
        }

        .over_wrap .wrap_center .over_des .des_title {
            font-size: 1.0rem;
            color: #A6A6A6;
        }

        .over_wrap .wrap_center .over_des .des_content {}.over_wrap .wrap_center .over_des .des_content .des_keyword {
            line-height: 4.0rem;
            color: #da2f45;
            font-size: 2.0rem;
            text-align: center;
        }

        .over_wrap .wrap_center .over_des .des_content .des_detail {
            color: #535353;
            font-size: 1.2rem;
        }

        .over_wrap .wrap_center .over_btn {
            width: 80%;
            margin: 0 auto;
            margin-top: 10px;
            overflow: hidden;
        }

        .over_wrap .wrap_center .over_btn .over_btn_detail {
            color: #FFF;
            text-align: center;
            font-size: 1.5rem;
            line-height: 44px;
            background: url(//repo.bfw.wiki/bfwrepo/image/60dd75673abe6.png) repeat-x;
            background-size: 1px 44px;
            border: 1px #282940 solid;
        }

        .over_wrap .wrap_center .over_btn .over_share {
            float: left;
            width: 36%;
        }

        .over_wrap .wrap_center .over_btn .back {
            float: right;
            width: 60%;
        }

        .over_wrap .wrap_center .over_btn .back a {
            color: #FFF;
            text-decoration: none;
        }

        .over_wrap .wrap_bottom {
            width: 100%;
            position: absolute;
            bottom: 4%;
        }

        .over_wrap .wrap_bottom .lagou_logo {
            width: 32%;
            margin: 0 auto;
        }

        .share_wrap {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.9;
        }

        .share_text {
            position: absolute;
            width: 74%;
            top: 3%;
            right: 5%;
        }

        .share_text .share_img {
            width: 100%;
        }
    </style>
</head>
<body>
    <img src="//repo.bfw.wiki/bfwrepo/image/60fc0a66bd44f.png" width="0" height="0"><div class="wrap">
        <div class="enter_wrap">
            <!--<div class="wrap_top"><img class="top_img" src="images/img_top.png"></div>--><div class="wrap_center">
                <div class="enter_btn">
                    开始测试
                </div>
            </div>
            <div class="wrap_bottom"></div>
        </div>
        <!-- /.enter_wrap --><div class="topic_wrap">
            <div class="fade_wrap">
                <div class="wrap_top">
                    <div class="topic_no">
                        <span class="curr_no" id="curr_no">1</span>/<span class="count">10</span>
                    </div>
                </div>
                <div class="wrap_top1">
                    <div class="topic_title" id="topic_title"></div>
                </div>
                <div class="wrap_center">
                    <table class="topic_option" id="topic_option"></table>
                </div>
            </div>
            <div class="wrap_bottom">
                <!--<img class="lagou_logo" src="images/topic_bottom.png">-->
            </div>
        </div>
        <!-- /.topic_wrap --><div class="over_wrap">
            <div class="wrap_top">
                <div class="over_grade">
                    <span class="grade_title">您的智商指数是</span><span class="grade"><div class="grade_detail_wrap">
                        <b class="grade_detail"></b>分
                    </div>
                    </span>
                </div>
            </div>
            <div class="wrap_center">
                <div class="over_des">
                    <span class="des_title">智商关键词</span><div class="des_content">
                        <div class="des_keyword"></div>
                        <div class="des_detail"></div>
                    </div>
                </div>
                <div class="over_btn">
                    <div class="over_btn_detail over_share">
                        分享结果
                    </div>
                    <div class="over_btn_detail back">
                        <a href="demo.html">再玩一次</a>
                    </div>
                    <div class="over_btn_detail over_share">
                        告诉朋友
                    </div>
                    <div class="over_btn_detail back">
                        <a href="">关注我们</a>
                    </div>
                </div>
            </div>
            <div class="wrap_bottom"></div>
        </div>
        <!-- /.over_wrap --><div class="share_wrap">
            <div class="share_text">
                <img class="share_img" src="//repo.bfw.wiki/bfwrepo/image/60fc0a66bd44f.png">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        var careerism = {
            current_topic: 0,
            current_grade: 0,
            topic.........完整代码请登录后点击上方下载按钮下载查看