计算器
今天的小练习是购物车的计算器功能
<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]+” 小计：”+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>