商品选购页面

最新推荐文章于 2022-10-18 10:17:54 发布

LJJUN66666

最新推荐文章于 2022-10-18 10:17:54 发布

阅读量266

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/LJJUN66666/article/details/127066977

版权

（基础中的基础，写来练手的）

CSS部分：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        #null {
            height: 50px;
        }

        #box {
            margin: auto;
            border: 3px #ff0000 solid;
            width: 810px;
            height: 430px;
        }

        #mobile {
            float: left;
            height: 100%;
            width: 390px;

        }

        #mobile img {
            height: 100%;
        }

        #context {
            float: right;
            padding-top: 12px;
            width: 370px;
            height: 100%;
        }

        p {
            margin-top: 18px;
            height: 40px;
            line-height: 40px;
        }

        p>span {
            margin-right: 18px;
        }

        p button {
            display: inline-block;
            border: 1px #6f767d solid;
            padding: 0 8px;
            margin-left: 5px;
            height: 40px;
            color: #6f767d;
            background-color: #ffffff;
        }

        #money {
            margin-top: 33px;
            border-top: 2px rgb(0, 0, 0, 0.3) solid;
            height: 60px;
            line-height: 60px;
        }

        #money {
            font-size: 20px;
        }

        #price {
            margin-right: 22px;
        }

        .color {
            color: #ff712c;
        }

        #buy {
            margin-top: 25px;
            height: 50px;
            border: #ff6600;
            width: 100%;
            height: 55px;
            line-height: 55px;
            background-color: #ff6600;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
        }

        .on {
            border: 2px #ff6600 solid;
        }
    </style>

html部分：

<body>
    <div id="null"></div>
    <div id="box">
        <div id="mobile"><img src="img/mobile_1.jpg" alt=""></div>
        <div id="context">
            <p id="model">
                <span>型号</span>
                <button>4.7英寸</button>
                <button>5.5英寸</button>
            </p>
            <p id="color">
                <span>颜色</span>
                <button>银色</button>
                <button>金色</button>
                <button>深空灰色</button>
            </p>
            <p id="memory">
                <span>内存</span>
                <button>16GB</button>
                <button>64GB</button>
                <button>128GB</button>
            </p>
            <p id="version">
                <span>版本</span>
                <button>公开版</button>
                <button>移动赠费版</button>
                <button>联通合约版</button>
            </p>
            <div id="money">
                <span id="price">价格</span>
                <span class="color">￥</span>
                <span id="rmb" class="color">4000</span>
                <span class="color">.00</span>
            </div>
            <div id="buy">立即购买</div>
        </div>
    </div>
</body>

JavaScript部分：

<script>
    // 获取对象
    let models = document.getElementById("model").getElementsByTagName("button");
    let colors = document.getElementById("color").getElementsByTagName("button");
    let memorys = document.getElementById("memory").getElementsByTagName("button");
    let versions = document.getElementById("version").getElementsByTagName("button");

    // 默认选第一项
    models[0].className = "on";
    colors[0].className = "on";
    memorys[0].className = "on";
    versions[0].className = "on";

    // model模块绑定点击事件
    for (let i = 0; i < 2; i++) {
        models[i].onclick = function () {
            for (let j = 0; j < models.length; j++) {
                // 保证每个模块只有一个样式不一样
                models[j].className = "";
                models[j].value = 0;
            }
            this.className = "on";
            this.value = 1;
            if (models[i].value == 1) {
                let num = document.getElementById("rmb");
                num.innerText = endJiaGe();
            }
        }
    }

    // 其他模块绑定点击事件（与model模块对象长度不一样）
    for (let i = 0; i < 3; i++) {
        colors[i].onclick = function () {
            for (let j = 0; j < colors.length; j++) {
                colors[j].className = "";
            }
            this.className = "on";
        }
        memorys[i].onclick = function () {
            for (let j = 0; j < memorys.length; j++) {
                memorys[j].className = "";
                memorys[j].value = 0;
            }
            this.className = "on";
            this.value = 1;
            if (memorys[i].value == 1) {
                let num = document.getElementById("rmb");
                num.innerText = endJiaGe();
            }
        }
        versions[i].onclick = function () {
            for (let j = 0; j < versions.length; j++) {
                versions[j].className = "";
                versions[j].value = 0;
            }
            this.className = "on";
            this.value = 1;
            if (versions[i].value == 1) {
                let num = document.getElementById("rmb");
                num.innerText = endJiaGe();
            }
        }
    }

    // “立即购买”模块绑定点击事件
    document.getElementById("buy").onclick = function () {
        let num = document.getElementById("rmb");
        num.innerText = endJiaGe();
    }

    // 计算总价的函数
    let endJiaGe = function () {
        let jiage = 4000;
        let mod = 0;
        let mem = 0;
        let ver = 0;
        console.log(mod, mem, ver);
        for (let i = 0; i < models.length; i++) {
            if (models[i].value == 1) {
                console.log(i);
                switch (i) {
                    case (0): mod = 0; break;
                    case (1): mod = 200; break;
                }
            }
        }
        for (let j = 0; j < 3; j++) {
            if (memorys[j].value == 1) {
                console.log(j);
                switch (j) {
                    case (0): mem = 0; break;
                    case (1): mem = 600; break;
                    case (2): mem = 1000; break;
                }
            }
        }
        for (let m = 0; m < 3; m++) {
            if (versions[m].value == 1) {
                console.log(m);
                switch (m) {
                    case (0): ver = 0; break;
                    case (1): ver = 100; break;
                    case (2): ver = 50; break;
                }
            }
        }

        console.log(mod, mem, ver);
        return jiage + mod + mem + ver;

    }



</script>