JavaScript开发购物车教程之JS实现功能
用JS设计功能
加减效果
给我们的value="+"以及value="-"各添加一个onclick事件
<input type="button" value="-" onclick="minus()"/>
<input type="button" value="+" onclick="add()"/>
在上面<script></script>标签中添加js代码
//按下+按钮
function add(){
//取出当前页面的商品数量
var num=document.getElementById("text").value;
//将数量加一然后再赋值给显示商品数量的<inpue>中的value属性
++num;
document.getElementById("text").value=num;
//取出当前页面商品的数量,与取出的价格相乘,赋值给小计所属的div的页面显示内容
var price=document.getElementById("price").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num;
}
//按下-按钮
function minus(){
var num=document.getElementById("text").value;
//判断商品是不是数量小于1,小于则全部给赋值成0
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出当前页面的数量,与价格相乘,赋值给小计所属的div的页面显示内容
//给num重新赋值是放置出现num=-1情况
var num=document.getElementById("text").value;
var price=document.getElementById("price").innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
}
代码如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>简易购物车</title> <meta charset="utf-8" /> <style> .shop{ width:400px; background-color:#f0f0f0; text-align:center; } .shop2{ text-align:center; clear:both; border:1px solid black; height:21px; } .goods{ float:left; width:100px; } .price{ float:left; width:50px; } .number{ float:left; width:110px; } .subtotal{ float:left; width:50px; margin-top:2px; } .delete{ float:left; width:35px; margin-left:5px; } .text{ width: 22px; text-align:center; } </style> <script > //按下+按钮 function add(){ //取出当前页面的数量 var num=document.getElementById("text").value; //将数量加一然后再赋值给显示数量的<inpue>中的value属性 ++num; document.getElementById("text").value=num; //取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容 var price=document.getElementById("price").innerHTML; var subtotal=price*num; document.getElementById("subtotal").innerHTML=price*num; } //按下-按钮 function minus(){ var num=document.getElementById("text").value; //判断数量是不是负数 if(--num<1){ document.getElementById("text").value=0; }else{ document.getElementById("text").value=num } //取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容 //给num重新赋值是放置出现num=-1情况 var num=document.getElementById("text").value; var price=document.getElementById("price").innerHTML; document.getElementById("subtotal").innerHTML=price*num; } </script> </head> <body> <!--购物车标题--> <div class="shop"> <div class="title">简易购物车</div> <div class="goods">商品</div> <div class="price">单价</div> <div class="number">数量</div> <div class="subtotal">小计</div> <div class="delete">操作</div> </div> <!--商品内容--> <div class="shop2" id="shop2"> <form> <div class="goods">小米MIX </div> <div class="price" id="price">5000</div> <div class="number"> <input type="button" value="-" onclick="minus()"/> <input type="text" value="1" class="text" id="text"/> <input type="button" value="+" onclick="add()"/> </div> <div class="subtotal" id="subtotal">5000</div> <div class="delete"><a href="#">删除</a></div> <form> </div> </body> </html>
点击+和-号,可以实现加减效果,但是当用户想自己输入数字的时候,我们还不能让小计随之变化,所以还要给id="text"的input添加一个失焦事件,用isNaN()函数进行判断,在用户输入非数字的情况下,提示用户
input添加onblur事件
<input type="text" value="1" class="text" id="text" onblur="change()"/>
JS代码添加
//用户在<input>框中改变数字时,光标失焦后触发change()函数
function change(){
//判断用户输入的是否为非数字,是则提醒用户
if(isNaN(document.getElementById("text").value)){
alert("请输入数字");
document.getElementById("text").value=1;
}
//取得id="text"的input框的value值
var num=document.getElementById("text").value;
//取得商品价格
var price=document.getElementById("price").innerHTML;
//将小计输出出去
document.getElementById("subtotal").innerHTML=price*num;
}
删除功能
在删除<div>里面设置一个<a>标签,在div里绑定一个onclick事件
<div class="delete" onclick="delect('shop2')"><a href="#">删除</a></div>
JS代码如下
function delect(){
//删除id="shop2"的这个div
document.body.removeChild(document.getElementById("shop2"));
}
至此,两个功能全部实现,完整代码如下:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>简易购物车</title> <meta charset="utf-8" /> <style> .shop{ width:400px; background-color:#f0f0f0; text-align:center; } .shop2{ text-align:center; clear:both; border:1px solid black; height:21px; } .goods{ float:left; width:100px; } .price{ float:left; width:50px; } .number{ float:left; width:110px; } .subtotal{ float:left; width:50px; margin-top:2px; } .delete{ float:left; width:35px; margin-left:5px; } .text{ width: 22px; text-align:center; } </style> <script > //按下+按钮 function add(){ //取出当前页面的数量 var num=document.getElementById("text").value; //将数量加一然后再赋值给显示数量的<inpue>中的value属性 ++num; document.getElementById("text").value=num; //取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容 var price=document.getElementById("price").innerHTML; var subtotal=price*num; document.getElementById("subtotal").innerHTML=price*num; } //按下-按钮 function minus(){ var num=document.getElementById("text").value; //判断数量是不是负数 if(--num<1){ document.getElementById("text").value=0; }else{ document.getElementById("text").value=num } //取出当前页面的数量,与数量相乘,赋值给小计所属的div的页面显示内容 //给num重新赋值是放置出现num=-1情况 var num=document.getElementById("text").value; var price=document.getElementById("price").innerHTML; document.getElementById("subtotal").innerHTML=price*num; } //用户在<input>框中改变数字时,光标失焦后触发change()函数 function change(){ //判断用户输入的是否为非数字,是则提醒用户 if(isNaN(document.getElementById("text").value)){ alert("请输入数字"); document.getElementById("text").value=1; } //取得id="text"的input框的value值 var num=document.getElementById("text").value; //取得商品价格 var price=document.getElementById("price").innerHTML; //将小计输出出去 document.getElementById("subtotal").innerHTML=price*num; } function delect(){ //删除id="shop2"的这个div document.body.removeChild(document.getElementById("shop2")); } </script> </head> <body> <!--购物车标题--> <div class="shop"> <div class="title">简易购物车</div> <div class="goods">商品</div> <div class="price">单价</div> <div class="number">数量</div> <div class="subtotal">小计</div> <div class="delete">操作</div> </div> <!--商品内容--> <div class="shop2" id="shop2"> <form> <div class="goods">小米MIX </div> <div class="price" id="price">5000</div> <div class="number"> <input type="button" value="-" onclick="minus()"/> <input type="text" value="1" class="text" id="text" onblur="change()"/> <input type="button" value="+" onclick="add()"/> </div> <div class="subtotal" id="subtotal">5000</div> <div class="delete" onclick="delect()"><a href="#">删除</a></div> <form> </div> </body> </html>