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>

<🎜. >

Meneruskan pembelajaran

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

Tutorial troli beli-belah pembangunan JavaScript fungsi pelaksanaan JS

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]