H5开发答题页面复制可用，修改单选，多选（radio，checkBox）图标，以及背景图向下延伸

最新推荐文章于 2023-12-06 16:38:17 发布
最新推荐文章于 2023-12-06 16:38:17 发布
阅读量427 收藏
点赞数
分类专栏： H5 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaseDreamer_/article/details/117469306
版权

格式

你好！

知识点

  1. css知识点

    背景图设置：

/*设置背景图Url*/
 background: url("https://qiniu.tuilidashi.xin/zuizhongjueze/changyuanri/pg.jpg");
/* 背景图随着页面长度向下延伸  */
 background: url("https://qiniu.tuilidashi.xin/zuizhongjueze/changyuanri/pg.jpg") repeat;
/* 背景图不随着页面长度向下延伸  */
 background: url("https://qiniu.tuilidashi.xin/zuizhongjueze/changyuanri/pg.jpg") no-repeat;
  1. 标签
<label></label>
该标签不会向用户展示任何特殊内容,它的作用是把自己与其他标签”绑定“起来，
也可以说是与其他元素关联到一起，比方说点击事件关联

1、显式联系：显式联系通过<label>的”for“属性和目标标签的ID来完成

2、隐式联系：隐式联系可通过标签嵌套完成(将需要绑定的标签给嵌套到内部就OK)

//设置div是否为隐藏
style="display: none;" 
none 不展示   inline 默认的，也是展示该div
  1. 代码设置属性
	//通过document和<img/>的Id来动态修改图片地址
  document.getElementById('imagId').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
  //通过document和input的Id获取此单选是否选中
  document.getElementById("inputId").checked
  //通过document和divId设置该div是否隐藏或展示
  document.getElementById("divId").style.display = "inline ";

直接上代码了


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- <script>!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]); flex(100, 1);</script> -->
</head>
<style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%
    }

    body {
        background: url("https://img1.baidu.com/it/u=1708031153,2025161630&fm=26&fmt=auto&gp=0.jpg") repeat;
        background-size: 100%;
    }

    label {
        height: 50px;
        font-size: 32px;
        font-weight: 400;
        color: #3D4045;
        line-height: 50px;
    }

    .tiMuYiFuView{
        margin-top: 40px;
    }

    .bgDiv {
        padding-left: 97px;
        padding-right: 97px;
        padding-top: 28px;
    }

    .tiMuTitle {
        width: auto;
        font-size: 38px;
        font-weight: 600;
        color: #3D4045;
        line-height: 60px;
    }

    .tiMuXuanXiang {
        width: 546px;
        height: auto;
        display: flex;
    }

    .danXuanImage {
        width: 40px;
        height: 40px;
        margin-top: 5px;
    }

    .danXuanTv {
        width: auto;
        font-size: 32px;
        font-weight: 400;
        color: #3D4045;
        line-height: 45px;
        margin-left: 24px;
    }


    .daAnTitlea {
        display: none;
        font-size: 32px;
        margin-left: 24px;
    }
    .theNextBtnFuDiv{
        width: 340px;
        height: 91px;

        display: block;
        margin: 0 auto;

        padding-top: 68px;
    }
    .theNexgTiBtn {
        width: 340px;
        height: 91px;
        background: #E04E4E;
        border-radius: 46px;
        font-size: 32px;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 45px;

        border: none;
        outline: none;
    }
</style>

<body>
    <!-- <h1>傻子游戏</h1> -->
    <div class="bgDiv">
        <div style="display: inline;" id="tiMu1" class="tiMuYiFuView">
            <div class="tiMuTitle">1.第一题选C：</div>
            <form>
                <label onclick="daAnClick('a',1)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="a1" />
                    <input type="radio" id="1a" name="1t" class="daAnTitlea">A<br>
                </label>
                <label onclick="daAnClick('b',1)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="b1" />
                    <input type="radio" id="1b" name="1t" class="daAnTitlea">B<br>
                </label>
                <label onclick="daAnClick('c',1)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="c1" />
                    <input type="radio" id="1c" name="1t" class="daAnTitlea">C<br>
                </label>
                <label onclick="daAnClick('d',1)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="d1" />
                    <input type="radio" id="1d" name="1t" class="daAnTitlea">D
                </label>
            </form>
        </div>


        <div style="display: none;" id="tiMu2"  class="tiMuYiFuView">
            <div class="tiMuTitle">2.选B！！！</div>
            <form>
                <label onclick="daAnClick('a',2)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="a2" />
                    <input type="radio" id="2a" name="2t" class="daAnTitlea">A<br>
                </label>
                <label onclick="daAnClick('b',2)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="b2" />
                    <input type="radio" id="2b" name="2t" class="daAnTitlea">B<br>
                </label>
                <label onclick="daAnClick('c',2)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="c2" />
                    <input type="radio" id="2c" name="2t" class="daAnTitlea">C<br>
                </label>
                <label onclick="daAnClick('d',2)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="d2" />
                    <input type="radio" id="2d" name="2t" class="daAnTitlea">D
                </label>
            </form>
        </div>

        <div style="display: none;" id="tiMu3"  class="tiMuYiFuView">
            <div class="tiMuTitle">3.选B and D ？（多选）</div>
            <form>
                <label onclick="daAnClick('a',3)">
                    <img class="danXuanImage" src="https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png"
                        id="a3" />
                    <input type="checkbox" id="3a" name="3t" class="daAnTitlea">A<br>
                </label>
                <label onclick="daAnClick('b',3)">
                    <img class="danXuanImage" src="https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png"
                        id="b3" />
                    <input type="checkbox" id="3b" name="3t" class="daAnTitlea">B<br>
                </label>
                <label onclick="daAnClick('c',3)">
                    <img class="danXuanImage" src="https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png"
                        id="c3" />
                    <input type="checkbox" id="3c" name="3t" class="daAnTitlea">C<br>
                </label>
                <label onclick="daAnClick('d',3)">
                    <img class="danXuanImage" src="https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png"
                        id="d3" />
                    <input type="checkbox" id="3d" name="3t" class="daAnTitlea">D
                </label>
            </form>
        </div>

        <div style="display: none;" id="tiMu4"  class="tiMuYiFuView">
            <div class="tiMuTitle">4.选D！！！</div>
            <form>
                <label onclick="daAnClick('a',4)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="a4" />
                    <input type="radio" id="4a" name="4t" class="daAnTitlea">A<br>
                </label>
                <label onclick="daAnClick('b',4)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="b4" />
                    <input type="radio" id="4b" name="4t" class="daAnTitlea">B<br>
                </label>
                <label onclick="daAnClick('c',4)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="c4" />
                    <input type="radio" id="4c" name="4t" class="daAnTitlea">C<br>
                </label>
                <label onclick="daAnClick('d',4)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="d4" />
                    <input type="radio" id="4d" name="4t" class="daAnTitlea">D
                </label>
            </form>
        </div>

        <div style="display: none;" id="tiMu5"  class="tiMuYiFuView">
            <div class="tiMuTitle">5.选C！！！</div>
            <form>
                <label onclick="daAnClick('a',5)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="a5" />
                    <input type="radio" id="5a" name="5t" class="daAnTitlea">A<br>
                </label>
                <label onclick="daAnClick('b',5)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="b5" />
                    <input type="radio" id="5b" name="5t" class="daAnTitlea">B<br>
                </label>
                <label onclick="daAnClick('c',5)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="c5" />
                    <input type="radio" id="5c" name="5t" class="daAnTitlea">C<br>
                </label>
                <label onclick="daAnClick('d',5)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="d5" />
                    <input type="radio" id="5d" name="5t" class="daAnTitlea">D
                </label>
            </form>
        </div>

        <div style="display: none;" id="tiMu6"  class="tiMuYiFuView">
            <div class="tiMuTitle">6.答案是A，可以选个B试试~</div>
            <form>
                <label onclick="daAnClick('a',6)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="a6" />
                    <input type="radio" id="6a" name="6t" class="daAnTitlea">A<br>
                </label>
                <label onclick="daAnClick('b',6)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="b6" />
                    <input type="radio" id="6b" name="6t" class="daAnTitlea">B<br>
                </label>
                <label onclick="daAnClick('c',6)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="c6" />
                    <input type="radio" id="6c" name="6t" class="daAnTitlea">C<br>
                </label>
                <label onclick="daAnClick('d',6)">
                    <img class="danXuanImage" src="https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg"
                        id="d6" />
                    <input type="radio" id="6d" name="6t" class="daAnTitlea">D
                </label>
            </form>
        </div>

        <div class="theNextBtnFuDiv">
            <button id="tni001" type="button" class="theNexgTiBtn" onclick="theNextTi()">下一题</button>
        </div>
      

    </div>
    <script>
        if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 750;
                document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
            } else {
                document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
            }
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
        function radioTiClick(event) {
            console.log(event)
        }
        function daAnClick(clickAbcd, clickIndex) {
            if (clickIndex == 1) {
                if ('a' == clickAbcd) {
                    document.getElementById('a1').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('b' == clickAbcd) {
                    document.getElementById('a1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b1').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('c' == clickAbcd) {
                    document.getElementById('a1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c1').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('d' == clickAbcd) {
                    document.getElementById('a1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c1').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d1').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                }
            } else if (clickIndex == 2) {
                if ('a' == clickAbcd) {
                    document.getElementById('a2').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('b' == clickAbcd) {
                    document.getElementById('a2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b2').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('c' == clickAbcd) {
                    document.getElementById('a2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c2').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('d' == clickAbcd) {
                    document.getElementById('a2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c2').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d2').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                }
            } else if (clickIndex == 3) {
                if ('a' == clickAbcd) {
                    var aaaa = document.getElementById("3a").checked
                    console.log("document.getElementById(3a)/", aaaa)

                    if (aaaa) {
                        // document.getElementById("3a").checked = false
                        console.log("1111111111111111111")
                        document.getElementById('a3').src = 'https://img2.baidu.com/it/u=4269912168,339993708&fm=15&fmt=auto&gp=0.jpg';
                    } else {
                        // document.getElementById("3a").checked = true
                        console.log("22222222222222222222")
                        document.getElementById('a3').src = 'https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png';
                    }
                } else if ('b' == clickAbcd) {
                    if (document.getElementById("3b").checked) {
                        document.getElementById('b3').src = 'https://img2.baidu.com/it/u=4269912168,339993708&fm=15&fmt=auto&gp=0.jpg';
                    } else {
                        document.getElementById('b3').src = 'https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png';
                    }
                } else if ('c' == clickAbcd) {
                    if (document.getElementById("3c").checked) {
                        document.getElementById('c3').src = 'https://img2.baidu.com/it/u=4269912168,339993708&fm=15&fmt=auto&gp=0.jpg';
                    } else {
                        document.getElementById('c3').src = 'https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png';
                    }
                } else if ('d' == clickAbcd) {
                    if (document.getElementById("3d").checked) {
                        document.getElementById('d3').src = 'https://img2.baidu.com/it/u=4269912168,339993708&fm=15&fmt=auto&gp=0.jpg';
                    } else {
                        document.getElementById('d3').src = 'https://img0.baidu.com/it/u=4237619361,731514454&fm=26&fmt=auto&gp=0.jpg.png';
                    }
                }
            } else if (clickIndex == 4) {
                if ('a' == clickAbcd) {
                    document.getElementById('a4').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('b' == clickAbcd) {
                    document.getElementById('a4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b4').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('c' == clickAbcd) {
                    document.getElementById('a4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c4').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('d' == clickAbcd) {
                    document.getElementById('a4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c4').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d4').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                }
            } else if (clickIndex == 5) {
                if ('a' == clickAbcd) {
                    document.getElementById('a5').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('b' == clickAbcd) {
                    document.getElementById('a5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b5').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('c' == clickAbcd) {
                    document.getElementById('a5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c5').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('d' == clickAbcd) {
                    document.getElementById('a5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c5').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d5').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                }
            } else if (clickIndex == 6) {
                if ('a' == clickAbcd) {
                    document.getElementById('a6').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('b' == clickAbcd) {
                    document.getElementById('a6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b6').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('c' == clickAbcd) {
                    document.getElementById('a6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c6').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                } else if ('d' == clickAbcd) {
                    document.getElementById('a6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('b6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('c6').src = 'https://img1.baidu.com/it/u=1378478111,2116390730&fm=26&fmt=auto&gp=0.jpg';
                    document.getElementById('d6').src = 'https://img1.baidu.com/it/u=76007692,1076071683&fm=26&fmt=auto&gp=0.jpg';
                }
            }
        }
        function theNextTi() {
            if (document.getElementById("tiMu6").style.display == "inline") {
                if (document.getElementById("6a").checked) {
                    alert("行，一百分")
                } else {
                    alert("菜鸡，玩个屁")
                }
            } else if (document.getElementById("tiMu5").style.display == "inline") {
                if (document.getElementById("5c").checked) {
                    document.getElementById("tiMu6").style.display = "inline ";
                } else {
                    alert("菜鸡，玩个屁")
                }
            } else if (document.getElementById("tiMu4").style.display == "inline") {
                if (document.getElementById("4d").checked) {
                    document.getElementById("tiMu5").style.display = "inline ";
                } else {
                    alert("菜鸡，玩个屁")
                }
            } else if (document.getElementById("tiMu3").style.display == "inline") {
                if (!document.getElementById("3a").checked && document.getElementById("3b").checked && !document.getElementById("3c").checked && document.getElementById("3d").checked) {
                    document.getElementById("tiMu4").style.display = "inline ";
                } else {
                    alert("菜鸡，玩个屁")
                }
            } else if (document.getElementById("tiMu2").style.display == "inline") {
                if (document.getElementById("2b").checked) {
                    document.getElementById("tiMu3").style.display = "inline ";
                } else {
                    alert("菜鸡，玩个屁")
                }
            } else {
                if (document.getElementById("1c").checked) {
                    document.getElementById("tiMu2").style.display = "inline ";
                } else {
                    alert("菜鸡，玩个屁")
                }
            }





            return true;
        }
    </script>
</body>

</html>

我是入梦，因为是第一次写H5，然后需求又是个本地的页面，所以就没用循环啥的，如果不会的可以联系我，我们一起学习学习。谢谢你的观看我的博客，觉着好用的话，麻烦帮忙点个赞呗，谢谢啦~ 如果有什么错误，请随时联系我噢~QQ：897589417

uniapp h5项目实现多选按钮/多选标签/多选框
m0_72929120的博客
04-11 2129
【代码】uniapp h5项目实现多选按钮/多选标签/多选框。
基于vant实现一个问卷调查
weixin_30737363的博客
05-30 1574
实现背景 最近学习《vue实战》，第二篇进阶篇有一个练习 刚好最近在研究vue移动端框架vant 两者结合，实现这么个小项目 实现代码 新建 vue单文件 L0529L.vue <template> <div class="dom"> <div class="tmnr">{{showtm+1}}. {{timu[sh...
在线考试答题页面模板
04-18
模拟在线考试答题页面模板，考题静态页面展示，单选和多选
h5答题小游戏，页面清晰，效果不错
08-05
一款答题类的小游戏 当时做的二次开发 效果还不错，如果想用 可以删减功能 更改图片即可。很不错的一款小游戏
H5 jQuery CSS3表单单选多选按钮.zip
07-11
代码片段： .wrapper {   position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);           transform: translate(-50%, -50%);   display: -webkit-box;   display: -ms-flexbox;   display: flex;   -webkit-box-pack: center;       -ms-flex-pack: center;           justify-content: center;   width: 100%;   max-width: 500px;   height: 200px; }
关于Html5中的单选与多选
a538641097的博客
05-04 825
1、下拉列表样式： <select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option v...
h5答题项目html页面
07-01
总之，h5答题项目的html页面是为了向用户展示题目、选项和交互界面，并通过CSS样式表提供美观的用户体验。 ### 回答2： H5答题项目的HTML页面是指使用HTML5技术开发的一个用于答题的网页。在该页面中通常会包含...
h5答题系统如何制作，详细代码
05-28
下面是一个简单的H5答题系统的制作步骤和代码示例： 1. 创建HTML页面 首先，我们需要创建一个HTML页面，用于显示答题界面和相关信息。下面是一个简单的HTML页面示例： ```html <!DOCTYPE html> <title>H5...
vue-draggable 生成调查问卷
09-22
2. **多选框（Checkbox）**：类似于单选按钮，多选选项也可以使用Vue.Draggable进行排序。用户可以多选，因此可能需要额外的逻辑来处理这些选择。 3. **下拉菜单（Select）**：创建一个包含可选项的下拉菜单，你...
基于react搭建一个通用的表单管理配置平台（vue同）
04-25 559
熟悉我的朋友可能会知道，我一向是不写热点的。为什么不写呢？是因为我不关注热点吗？其实也不是。有些事件我还是很关注的，也确实有不少想法和观点。 但我一直奉行一个原则，就是：要做有生命力的内容。 这篇文章是一篇应用性极强的文章，我们通过一个实际的应用场景，去解决某一类的问题，提供一种或者几种解决方案，来探索技术的魅力。接下来笔者主要分析表单定制平台的实现思路和技术方案，来实现一个类似于金数据或者问卷星...
做题H5小程序
12-08
做题页面H5，用到了Vue一些常用标签，上一题下一题，进度条。。 Ui用到的比较杂(ui小白)，有Bootstrap,element和自己写的
H5 jQuery多级复选框checkbox选中代码.zip
07-11
代码片段：  function isAllChecked(){       $(".all-checkbox").each(function() {         var $self = $(this)   ,             all   = $(this).find(":checkbox").not("[name='sales_group_id'],:disabled") ,             allChecked = $(this).find(":checked").not("[name='all-checked']") ,             thisAllCheckBtn = $(this).find(".all-checked [name='all-checked']");
H5测试题源代码
07-03
微信小程序测试题源码，答题小游戏，最新最符合当前小程序吸粉的游戏。
jQuery css分类列表多选框勾选效果
04-21
jQuery css分类列表多选框勾选效果，非常漂亮，值得下载。
Vue2移动端（H5项目）项目基于vant实现select多选（支持全选、搜索、反选，最大选择数、回显等功能）
最新发布
wocwin的博客
12-06 3364
Vue2移动端（H5项目）项目基于vant实现select多选（支持全选、模糊搜索、反选，最大选择数等功能）
html5单选多远,关于Html5中的单选与多选
weixin_42525211的博客
06-23 276
1、下拉列表样式：VolvoSaabOpelAudi属性列表autofocus规定在页面加载后文本区域自动获得焦点。disabled规定禁用该下拉列表。form_id规定文本区域所属的一个或多个表单。multiple规定可选择多个选项。name规定下拉列表的名称。required规定文本区域是必填的。number规定下拉列表中可见选项的数目。1.1 单选按钮 Male Female一般用加以限定。...
JavaScript写移动端答题网页程序
热门推荐
Victorymh的博客
07-12 1万+
一、构思 1.一个完整的程序分为开始，中间内容，以及结束。 2.下面的程序也是：开始页面→答题页面（题目，选项）→结束页面 二、代码分解 1.HTML页面代码 （1）定义好每个模块的div，再从大模块里面进行细分。由于适配的是移动端的，所以需要 设置meta元素的viewport属性。 （2）方便代码的简洁，引用了外部样式表。为了方便JavaScript的调用和编写，传入了一个JQuery包...
替换uniapp H5项目在浏览器中的默认图标
D_lunar的博客
07-26 1523
1、在项目根目录下创建一个html文件，取名template.h5.html，如果项目是基于uniCloud admin的，应用根目录下已存在该文件。 2、在文件中添加图标链接。完整的template.h5.html文件内容如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont
HTML5-单、多选框，按钮
Wjiahui的博客
01-29 4459
HTML5 按钮，多选框，单选框
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值