计算器

Posted 2021-01-16 yang656

今天的小练习是购物车的计算器功能

<style>
    *{
        padding: 0px;
        margin: 0px;
        font-size: 16px;
    }
    body{
        background:linear-gradient(#A1E6E9 0%,#fff 100%) no-repeat;
        min-height: 400px;
    }
    .wrap_box{
        width: 500px;
        margin: 30px auto;
        color: #fff;
        background:#292B2A;
        box-shadow:0px 0px 10px #5AB1FD ;
        border-radius: 5px;
    }
    .title{
        width: 500px;
        overflow: hidden;
    }
    h2{
        padding: 30px 30px 0;
        float: left;
    }
    button{
        width: 80px;
        height: 36px;
        border:2px solid #A0A0A0;
        line-height: 36px;
        font-size: 14px;
        background: #000;
        color: #fff;
        float: right;
        margin:25px 44px 0 0;
        outline: none;
        cursor: pointer;
    }

    ul{
        margin:10px 0 0 0;
        padding:10px 30px 30px;
    }
    li{
        list-style:none;
        overflow:hidden;
        padding:10px 0;
    }
    li *{
        float:left;
    }
    li a{
        width:40px;
        height:30px;
        border:1px solid #A0A0A0;
        text-align:center;
        font-size:20px;
        margin-right:10px;
        border-radius:3px;
    }
    li span{
        background:#171717;
        border-radius:3px;
        padding:3px 10px;
        width:240px;
        margin-left:10px;
        color:#909090;
    }

    .minuse, .add{
        cursor:pointer;
        user-select:none;

    }
    .val{
        background:#fff;
        color:#000;
    }

    .count{
        background:#1F1F1F;
        padding:20px 30px;
        border-radius:5px;
    }
    .count a{
        display:inline-block;
        height:33px;
        border:1px solid #A0A0A0;
        border-radius:3px;
        padding:0 15px;
        background:#fff;
        color:#000;
        margin-right: 5px;
        line-height: 33px;

    }

</style>

<div class="wrap_box">

　　<div class="title">

　　　　<h2>价格计算</h2>

　　　　<button>清空购物车</button>

　　<div>

　　<ul>

　　　　<li>

　　　　　　<a class="minuse">-</a>

　　　　　　<a class="val">0</a>

　　　　　　<a class="add">+</a>

　　　　</li>

　　　　<li>

　　　　　　<a class="minuse">-</a>

　　　　　　<a class="val">0</a>

　　　　　　<a class="add">+</a>

　　　　  </li>

　　　　 <li>

　　　　　　<a class="minuse">-</a>

　　　　　　<a class="val">0</a>

　　　　　　<a class="add">+</a>

　　　　</li>

　　　　<li>

　　　　　　<a class="minuse">-</a>

　　　　　　<a class="val">0</a>

　　　　　　<a class="add">+</a>

　　　　 </li>

　　　　<li>

　　　　　　<a class="minuse">-</a>

　　　　　　<a class="val">0</a>

　　　　　　<a class="add">+</a>

　　　　</li>

　　</ul>

　　<div class="count">

　　　　<div>

　　　　　　商品共计：<a class="count_number">0</a>件

　　　　　　共计花费：<a class="count_money">0</a>元

　　　　</div>

　　　　<div>

　　　　　　其中最贵的商品单价:<a class="high_price">0</a>元

　　　　</div>

　　</div>

<./div>

<script>

　　

//获取dom
var minuse=document.getElementsByClassName("minuse");
var val=document.getElementsByClassName(‘val‘);
var add=document.getElementsByClassName("add");
var count_number=document.getElementsByClassName("count_number")[0];
var count_money=document.getElementsByClassName("count_money")[0];
var high_price=document.getElementsByClassName("high_price")[0];
var span=document.getElementsByTagName("span")

var priceArr=[10.5,8.5,17.5,6,2.5];

　　//点击+

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

　　　　add[i].index=i; //获取到点击的是那一个

　　　　add[i].onclick=function(){

　　　　　　var touch=val[this.index].innerhtml;//先获取到当前选择的价格

　　　　　　val[this.index].innerHTML=++touchi; // a++先运算，再自增 ；++a先自增 再运算

　　　　　　　　span[this.index].innerHTML="单价"+priceArr[this.index]+"小计"+priceArr[this.index]*touch+"元"；

　　　　　　　　// 解析就是 当前的价格priceArr[this.index]   小计：priceArr[this.index] 乘以当前的价格　　touch

　　　　　　　　change()

　　　　}

　　}

　　//点击-

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

　　　　var minuse[i].index=i;

　　　　minuse[i].onclick=function(){

　　　　　　var index　=this.index;//index是当前点击的那个；

　　　　　　if(val[index].innerHTML==0){

　　　　　　　　ruturn false

　　　　　　}else{

　　　　　　　　val[index].innerHTML=val[index].innerHTML-1;

　　　　　　　　span[this.index].innerHTML="单价："+ priceArr[this.index]+"&nbsp;小计："+priceArr[this.index]*val[index].innerHTML+"元";

　　　　　　　　　

　　　　　　}

　　　　　　　　change()

　　　　}

　　　}

//统计金额

　　function change(){

　　　　var allNumber=0;

　　　　var allPrice=0;

　　　　var higVal=0;

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

　　　　allNumber+=parseInt(val[i].innerHTML);  //parseInt() 函数可解析一个字符串，并返回一个整数

　　　　allPrice+=(val[i].innerHTML)*price[i];

　　　　if(val[i].innerHTML!=0 && priceArr[i]>higVal){   //!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.

　　　　　　higVal=priceArr[i]

　　　　}　　

　　}

　　count_money.innerHTML=allmoney;

　　count_number.innerHTML=allNumber;

　　high_price.innerHTML=higVal;

}

//清空

　　var clear=document.getElementsByTagName("button")[0];
　　clear.onclick=function(){
　　　　for(var i=0;i<add.length;i++){
　　　　　　val[i].innerHTML=0;
　　　　　　span.innerHTML="单价"+princeArr[i]+"小计"+0+"元"；
　　　　　　
　　}
　　　　count_money.innerHTML=0;
　　　　count_Number.innerHTML=0;
　　　　high_price.innerHTML=0;
}

<script>