欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一个简单的超市购物网页

程序员文章站 2022-03-23 11:18:25
Document

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #shop{

            width: 1500px;

            height: 900px;

            border: 1px solid black;

            margin: 0 auto;

            background-color: mediumaquamarine;

        }

        #shop .shop_head{

            width: 100%;

            height: 600px;

        }

        #shop .shop_head .s_h{

            width: 499px;

            height: 599px;

            border-right: 1px solid black;

            border-bottom: 1px solid black;

            float: left;

            position: relative;

        }

        #shop .shop_foot{

            width: 100%;

            height: 300px;

            line-height: 300px;

        }

        .s_h button{

            position: absolute;

            top: 325px;

            width: 50px;

            height: 50px;

            line-height: 50px;

            font-size: 24px;

            text-align: center;

            font-weight: 700;

            color: brown;

        }

        .sub{

            left: 10px;

        }

        .add{

            right: 10px;

        }

        .s_h .dj{

            width: 100%;

            height: 300px;

            line-height: 300px;

            font-size: 35px;

            text-align: center;

        }

        .s_h .ip1{

            border: 0;

            width: 100%;

            height: 100px;

            font-size: 24px;

            line-height: 100px;

            font-weight: 500;

            text-align: center;

        }

        .s_h .zj{

            width: 100%;

            height: 200px;

            line-height: 200px;

            font-size: 30px;

            font-weight: 600;

            text-align: center;

        }

        .shop_foot .allmoney{

            width: 50%;

            height: 300px;

            float: left;

        }

        .shop_foot button{

            width: 100px;

            height: 50px;

            

        }

        .btn1{

            margin-top: 250px;

            margin-left: 450px;

        }

        .m_1,.m_2{

            width: 100%;

            height: 50%;

            line-height: 150px;

            text-align: center;

            font-size: 30px;

            font-weight: 700;

        }

        .sp2{

            font-size: 24px;

            color: #999;

        }

    </style>

    <div id="shop">

        <div class="shop_head">

            <div class="s_h">

                <button class="sub" οnclick="sub(1)">-</button><button class="add" οnclick="add(1)">+</button>

                <div class="dj">香蕉:<span style="color:red">20</span>/kg</div>

                <input type="text" disabled="true" value="0" class="ip1">

                <div class="zj">价格:<span class="sp">0</span></div>

            </div>

            <div class="s_h">

                <button class="sub" οnclick="sub(2)">-</button><button class="add" οnclick="add(2)">+</button>

                <div class="dj">苹果:<span style="color:red">25</span>/kg</div>

                <input type="text" disabled="true" value="0" class="ip1">

                <div class="zj">价格:<span class="sp">0</span></div>

            </div>

            <div class="s_h" style="border-right: none;">

                <button class="sub" οnclick="sub(3)">-</button><button class="add" οnclick="add(3)">+</button>

                <div class="dj">橘子:<span style="color:red">15</span>/kg</div>

                <input type="text" disabled="true" value="0" class="ip1">

                <div class="zj">价格:<span class="sp">0</span></div>

            </div>

        </div>

        <div class="shop_foot">

            <div class="allmoney">

                <div class="m_1">您本次消费:<span class="sp1" style="font-size: 26px; color: #999;">0</span>元</div>

                <div class="m_1">余额:<span class="sp2">500</span>元</div>

            </div>

            <button class="btn1" οnclick="sim()">付款</button><button class="btn2" οnclick="clr()">清空</button><button class="btn2" οnclick="cz()">充500</button>

        </div>

    </div>

    <script>

        var sun=0;

        var add = (function (){

            var ip1=document.querySelectorAll('.ip1');

            var sp=document.querySelectorAll('.sp');

            var sp1=document.querySelector('.sp1');

            var sp2=document.querySelector('.sp2');

            return function (x){

                if(x==1){

                    let val=parseInt(ip1[0].value);

                    val++;

                    ip1[0].value=val;

                    sp[0].innerHTML=val*20;

                    sun+=20;

                    if(sun>sp2.innerHTML){

                        sp1.style.color='red';

                        sp1.innerHTML=sun;

                    }else{

                        sp1.innerHTML=sun;

                    }      

                }else if(x==2){

                    let val=parseInt(ip1[1].value);

                    val++;

                    ip1[1].value=val;

                    sp[1].innerHTML=val*25;

                    sun+=25;

                    if(sun>sp2.innerHTML){

                        sp1.style.color='red';

                        sp1.innerHTML=sun;

                    }else{

                        sp1.innerHTML=sun;

                    }  

                }else if(x==3&&((ip1[2].value)<10)){

                    let val=parseInt(ip1[2].value);

                    val++;

                    ip1[2].value=val;

                    sp[2].innerHTML=val*15;

                    sun+=15;

                    if(sun>sp2.innerHTML){

                        sp1.style.color='red';

                        sp1.innerHTML=sun;

                    }else{

                        sp1.innerHTML=sun;

                    }  

                }

            }

        })();

        var sub = (function (){

            var ip1=document.querySelectorAll('.ip1');

            var sp=document.querySelectorAll('.sp');

            var sp1=document.querySelector('.sp1');

            var sp2=document.querySelector('.sp2');

            return function (x){

                if(x==1&&(ip1[0].value)>0){

                    let val=parseInt(ip1[0].value);

                    val--;

                    ip1[0].value=val;

                    sp[0].innerHTML=val*20;

                    sun-=20;

                    if(sun<sp2.innerHTML){

                        sp1.style.color='#999';

                        sp1.innerHTML=sun;

                    }else{

                        sp1.innerHTML=sun;

                    }  

                }else if(x==2&&(ip1[1].value)>0){

                    let val=parseInt(ip1[1].value);

                    val--;

                    ip1[1].value=val;

                    sp[1].innerHTML=val*25;

                    sun-=25;

                    if(sun<sp2.innerHTML){

                        sp1.style.color='#999';

                        sp1.innerHTML=sun;

                    }else{

                        sp1.innerHTML=sun;

                    }  

                }else if(x==3&&((ip1[2].value)<10)&&(ip1[2].value)>0){

                    let val=parseInt(ip1[2].value);

                    val--;

                    ip1[2].value=val;

                    sp[2].innerHTML=val*15;

                    sun-=15;

                    if(sun<sp2.innerHTML){

                        sp1.style.color='#999';

                        sp1.innerHTML=sun;

                    }else{

                        sp1.innerHTML=sun;

                    }  

                }

            }

        })();

        var sim = (function (){

            var sp1=document.querySelector('.sp1');

            var sp2=document.querySelector('.sp2');

            var mon=sp2.innerHTML;

            return function (){

                if(sp1.innerHTML>sp2.innerHTML){

                    alert('钱不够');

                }else{

                    mon-=parseInt(sp1.innerHTML);

                    clr();

                    sp2.innerHTML=mon;

                }

            }

        })();

        var clr = (function (){

            var ip1=document.querySelectorAll('.ip1');

            var sp=document.querySelectorAll('.sp');

            var sp1=document.querySelector('.sp1');

            var sp2=document.querySelector('.sp2');

            return function(){

                for(var i=0;i<ip1.length;i++){

                    ip1[i].value=0;

                    sp[i].innerHTML=0;

                }

                sun=0;

                sp1.innerHTML=0;

                sp2.innerHTML=500;

            }

        })();

        var cz = (function (){

            var sp2=document.querySelector('.sp2');

            return function (){

                var val=parseInt(sp2.innerHTML);

                sp2.innerHTML=val+500;

            }

        })();

    </script>

</body>

</html>

 

一个简单的超市购物网页

本文地址:https://blog.csdn.net/RGSNbiubiubiu/article/details/109371041

相关标签: 作业 javascript