一个简单的超市购物网页
<!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
上一篇： Moment.js学习笔记
下一篇： laravel中后台文件上传增删改查