JavaScript開発ショッピングカートチュートリアル JS実裝関數(shù)
JS を使用して関數(shù)を設計する
追加効果と減算効果
value="+" と value="-" のそれぞれに onclick イベントを追加します
<input type="button" value="-" onclick="minus()"/>
<input type="button" value="+" onclick="add()"/ >
上の <script></script> タグに js コードを追加します
//+ ボタンを押します
function add(){
//商品を取得します現(xiàn)在のページの Quantity
var num=document.getElementById("text").value;
//數(shù)量を 1 つ追加して、表示される <inpue> の value 屬性に割り當てます。商品の數(shù)量
+ +num;
document.getElementById("text").value=num;
//現(xiàn)在のページの商品の數(shù)量を取得し、それを掛けます抽出した価格を取得し、小計が屬する div のページ表示に割り當てます。
document.getElementById("subtotal").innerHTML=price*num;
}
// - ボタンを押してください
functionminus(){
num = document.getElementById("text").value;
//商品かどうかを判定 數(shù)量が1以上の場合、それ未満の場合はすべての値が0に代入されます
の場合(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//現(xiàn)在のページの數(shù)量を取得し、価格を掛けて、小計が屬するdivのページ表示コンテンツに割り當てます
//numを避けるためにnumを再割り當てします=-1
var num=document.getElementById("text").value;
varprice=document.getElementById("price"). innerHTML;
document.getElementById("小計") ).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(){
//取出當前頁面的數(shù)量
var num=document.getElementById("text").value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById("text").value=num;
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的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;
//判斷數(shù)量是不是負數(shù)
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的div的頁面顯示內容
//給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>
<!--購物車標題-->
<div class="shop">
<div class="title">簡易購物車</div>
<div class="goods">商品</div>
<div class="price">單價</div>
<div class="number">數(shù)量</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> + 記號と - 記號は、はい加算と減算の効果を実現(xiàn)しますが、ユーザーが自分で數(shù)値を入力したい場合、それに応じて小計を変更することはできません。そのため、id="text" を使用して入力にフォーカス外のイベントを追加し、isNaN() 関數(shù)を使用して判定する必要があります。ユーザーが數(shù)値以外を入力すると、ユーザーに onblur イベントを追加するよう input を要求します
<input type="text" value="1" class="text" id="text" onblur=" change( )"/>
JS コードを追加しました//ユーザーが <input> ボックス內の數(shù)値を変更すると、カーソルがフォーカスを失った後に、change() 関數(shù)がトリガーされます
function変更(){
//ユーザー入力が數(shù)字以外であるかどうかを判斷し、數(shù)字でない場合はユーザーに通知します
if(isNaN(document.getElementById("text").value)){
alert("入力してください數(shù)値") ;
document.getElementById("text").value=1;
}
// id="text" の入力ボックスの値を取得します
var num=document. getElementById("text").value;
//商品の価格を取得します
varprice=document.getElementById("price").innerHTML;
// subtotal
document.getElementById("subtotal").innerHTML=price*num;
}
関數(shù)削除
削除 <div&g t; < を > タグ內に設定し、div に onclick イベントをバインドします
<div class="delete" onclick="delect('shop2')"><a href="#">Delete< ;/ a></div>
JSコードは以下の通り
function delect(){
//id="shop2"のdivを削除
document.body.removeChild(document.getElementById("shop2"));
}
この時點で、両方の関數(shù)が実裝されています:
<!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(){
//取出當前頁面的數(shù)量
var num=document.getElementById("text").value;
//將數(shù)量加一然后再賦值給顯示數(shù)量的<inpue>中的value屬性
++num;
document.getElementById("text").value=num;
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的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;
//判斷數(shù)量是不是負數(shù)
if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//取出當前頁面的數(shù)量，與數(shù)量相乘，賦值給小計所屬的div的頁面顯示內容
//給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ù)字時，光標失焦后觸發(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;
//取得商品價格
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">數(shù)量</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>
