コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語

JavaScript開発ショッピングカートチュートリアル JS実装関数

JS を使用して関数を設計する

追加効果と減算効果

value="+" と value="-" のそれぞれに onclick イベントを追加します

<input type="button" value="-" onclick="minus()"/>

<input type="button" value="+" onclick="add()"/ >

上の <script></script> タグに js コードを追加します

//+ ボタンを押します

function add(){

//商品を取得します現在のページの Quantity

var num=document.getElementById("text").value;

//数量を 1 つ追加して、表示される <inpue> の value 属性に割り当てます。商品の数量

+ +num;

document.getElementById("text").value=num;

//現在のページの商品の数量を取得し、それを掛けます抽出した価格を取得し、小計が属する div のページ表示に割り当てます。

document.getElementById("subtotal").innerHTML=price*num;

}

// - ボタンを押してください

functionminus(){

num = document.getElementById("text").value;

//商品かどうかを判定 数量が1以上の場合、それ未満の場合はすべての値が0に代入されます

の場合(--num<1){

document.getElementById("text").value=0;

}else{

document.getElementById("text").value=num

}

//現在のページの数量を取得し、価格を掛けて、小計が属する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(){
	//取出当前页面的数量
	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" を使用して入力にフォーカス外のイベントを追加し、isNaN() 関数を使用して判定する必要があります。ユーザーが数値以外を入力すると、ユーザーに onblur イベントを追加するよう
input を要求します

<input type="text" value="1" class="text" id="text" onblur=" change( )"/>

JS コードを追加しました

//ユーザーが <input> ボックス内の数値を変更すると、カーソルがフォーカスを失った後に、change() 関数がトリガーされます

function変更(){

//ユーザー入力が数字以外であるかどうかを判断し、数字でない場合はユーザーに通知します

if(isNaN(document.getElementById("text").value)){

alert("入力してください数値") ;

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;

}

関数削除

削除 <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"));

}

この時点で、両方の関数が実装されています: 

<!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>




学び続ける
||
<!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>
提出するリセットコード
前のセクション 次のセクション
チュートリアルリスト
ヘルプの取得
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜

このコースを視聴した生徒はこちらも学んでいます

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)  492837 回再生