JavaScript development shopping cart tutorial JS implementation function
Use JS to design functions
##Additional and subtractive effects
Add an onclick event to each of our value="+" and value="-"
< input type="button" value="-" onclick="minus()"/>
<input type="button" value="+" onclick="add ()"/>
Add js code in the above<script></script> tag
//Press +Button
function add(){
//Get the product quantity on the current page
var num=document.getElementById("text").value;
//Add one to the quantity and then assign it to the value attribute in the <inpue> that displays the quantity of the product
++num;
document.getElementById("text").value=num;
//Get the quantity of the product on the current page, multiply it by the retrieved price, and assign it to the page display content of the div to which the subtotal belongs
var price=document.getElementById("price ").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num ;
}
//Press the - button
function minus(){
var num=document.getElementById("text").value;
//Determine whether the quantity of the product is less than 1, if it is less than all Assign the value to 0
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//Get the quantity of the current page, multiply it by the price, and assign it to the page display content of the div to which the subtotal belongs
//Reassign num in the case of num=-1
var num=document.getElementById("text").value;
var price=document.getElementById("price").innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
｝
The code is as follows:
<!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(){
//取出當(dāng)前頁面的數(shù)量
var num=document.getElementById("text").value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById("text").value=num;
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
var price=document.getElementById("price").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num;
}
//按下-按鈕
function minus(){
var num=document.getElementById("text").value;
//判斷數(shù)量是不是負(fù)數(shù)
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
//給num重新賦值是放置出現(xiàn)num=-1情況
var num=document.getElementById("text").value;
var price=document.getElementById("price").innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
}
</script>
</head>
<body>
<!--購物車標(biāo)題-->
<div class="shop">
<div class="title">簡易購物車</div>
<div class="goods">商品</div>
<div class="price">單價(jià)</div>
<div class="number">數(shù)量</div>
<div class="subtotal">小計(jì)</div>
<div class="delete">操作</div>
</div>
<!--商品內(nèi)容-->
<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>Click The + and - signs can achieve addition and subtraction effects, but when the user wants to input numbers themselves, we cannot allow the subtotal to change accordingly, so we also need to add an out-of-focus event to the input with id="text", using isNaN () function to judge, when the user inputs a non-number, prompt the user
input to add onblur event
<input type="text" value="1" class="text" id="text" onblur="change()"/>JS code added
/ /When the user changes the number in the <input> box, the change() function is triggered after the cursor is out of focus
function change(){
//Determine whether the user input is a non-digit, and if so, remind the user
if(isNaN(document.getElementById("text").value)){
alert("Please enter a number");
document.getElementById("text").value=1;
}
## //Get the value of the input box with id="text"
var num= document.getElementById("text").value;
//Get the product price
var price=document.getElementById("price" ).innerHTML;
//Output the subtotal
document.getElementById("subtotal").innerHTML=price*num;
}
##Delete function
< div class="delete" onclick="delect('shop2')"><a href="#">delete</a></div>
JS code is as follows
##function delect(){
//Delete id= This div of "shop2"
document.body.removeChild(document.getElementById("shop2"));
}
At this point, both functions have been fully implemented. The complete code is as follows:
<!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(){
//取出當(dāng)前頁面的數(shù)量
var num=document.getElementById("text").value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById("text").value=num;
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
var price=document.getElementById("price").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num;
}
//按下-按鈕
function minus(){
var num=document.getElementById("text").value;
//判斷數(shù)量是不是負(fù)數(shù)
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出當(dāng)前頁面的數(shù)量，與數(shù)量相乘，賦值給小計(jì)所屬的div的頁面顯示內(nèi)容
//給num重新賦值是放置出現(xiàn)num=-1情況
var num=document.getElementById("text").value;
var price=document.getElementById("price").innerHTML;
document.getElementById("subtotal").innerHTML=price*num;
}
//用戶在<input>框中改變數(shù)字時(shí)，光標(biāo)失焦后觸發(fā)change()函數(shù)
function change(){
//判斷用戶輸入的是否為非數(shù)字，是則提醒用戶
if(isNaN(document.getElementById("text").value)){
alert("請輸入數(shù)字");
document.getElementById("text").value=1;
}
//取得id="text"的input框的value值
var num=document.getElementById("text").value;
//取得商品價(jià)格
var price=document.getElementById("price").innerHTML;
//將小計(jì)輸出出去
document.getElementById("subtotal").innerHTML=price*num;
}
function delect(){
//刪除id="shop2"的這個(gè)div
document.body.removeChild(document.getElementById("shop2"));
}
</script>
</head>
<body>
<!--購物車標(biāo)題-->
<div class="shop">
<div class="title">簡易購物車</div>
<div class="goods">商品</div>
<div class="price">單價(jià)</div>
<div class="number">數(shù)量</div>
<div class="subtotal">小計(jì)</div>
<div class="delete">操作</div>
</div>
<!--商品內(nèi)容-->
<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>
##
