Tutorial troli beli-belah pembangunan JavaScript fungsi pelaksanaan JS

Gunakan JS untuk mereka bentuk fungsi

Tambahan dan tolak kesan

Tambahkan acara onclick setiap satu pada value="+" dan value="-" kami

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

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

Tambah kod js dalam <skrip></script> tag

//Tekan + butang

fungsi tambah(){

//Dapatkan bilangan produk pada halaman semasa

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

//Tambahkan satu pada kuantiti dan kemudian tetapkan pada atribut nilai dalam <inpue> ; yang memaparkan kuantiti produk

++num;

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

//Dapatkan kuantiti produk pada halaman semasa, darabkannya dengan harga yang diekstrak dan tetapkan pada kandungan paparan halaman div yang mempunyai subjumlah

var price=document.getElementById("price ").innerHTML;

var subtotal=price*num;

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

}

//Tekan butang -

fungsi tolak(){

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

//Tentukan sama ada kuantiti produk kurang daripada 1, jika kurang daripada semua Tetapkan nilai kepada 0

jika(--num<1) {

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

}else{

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

}

//Dapatkan kuantiti halaman semasa, darabkannya dengan harga, dan tetapkan ia pada kandungan paparan halaman div yang mempunyai subjumlah

//Untuk menetapkan semula num ialah meletakkan situasi di mana num=-1 berlaku

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

var price=document.getElementById("price"). innerHTML;

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

｝

Kodnya adalah seperti berikut:

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

Klik Tanda + dan - boleh mencapai kesan penambahan dan penolakan , tetapi apabila pengguna ingin memasukkan nombor sendiri, kami tidak boleh membenarkan subjumlah berubah dengan sewajarnya, jadi kami juga perlu menambah acara tidak fokus pada input dengan id="text", menggunakan fungsi isNaN () untuk menilai , apabila pengguna memasukkan bukan nombor, gesa pengguna untuk

input untuk menambah acara onblur

Kod JS ditambahkan

/ /Bila pengguna menukar nombor dalam kotak <input>, fungsi change() dicetuskan selepas kursor tidak fokus

function change(){

// Tentukan sama ada input pengguna bukan digit, jika ya, ingatkan pengguna

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

makluman("Sila masukkan nombor");

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

}

//Dapatkan nilai kotak input dengan id="text"

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

//Dapatkan harga produk

var price=document .getElementById("price" ).innerHTML;

//Output subtotal

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

}

Padam fungsi

Tetapkan teg <a> di dalam <div> yang dipadamkan dan ikat acara onclick dalam div

< div class="delete" onclick="delect('shop2')"><a href="#">delete</a></div>

Kod JS adalah seperti berikut

fungsi delect(){

//Delete id= Div "shop2" ini

document.body.removeChild(document.getElementById("shop2"));

}

Pada ketika ini, kedua-dua fungsi dilaksanakan sepenuhnya Kod lengkap adalah seperti berikut:

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

<🎜. >

bahagian seterusnya

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh