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> 제품 수량
+ +num;
document.getElementById("text").value=num;
//현재 페이지의 제품 수량을 구하고 이를 곱합니다. 추출된 가격을 소계가 속한 div의 페이지 표시에 할당합니다. Content
var Price=document.getElementById("price").innerHTML;
var subtotal=price*num;
document.getElementById("subtotal").innerHTML=price*num;
}
//- 버튼을 누르세요
function minus(){
변수 번호= document.getElementById("text").value;
//상품 여부 판단 수량이 1 이상일 경우, 1 미만일 경우 모든 값은 0
에 할당됩니다. if(--num<1){
document.getElementById("text").value=0;
}else{
document.getElementById("text").value=num
}
//현재 페이지의 수량을 구해 가격을 곱하여 소계가 속한 div의 페이지 표시 내용에 할당
//숫자를 다시 할당 num=-1
var num=document.getElementById("text").value;
var Price=document.getElementById("price") innerHTML;
문서의 상황을 피하세요. getElementById("subtotal").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( ) 사용자가 숫자가 아닌 값을 입력하면 사용자에게
input에 onblur 이벤트를 추가하라는 메시지를 표시합니다.
<input type="text" value="1" class="text" id= "text" onblur="change( )"/>
JS 코드 추가됨
//사용자가 <input> 상자의 숫자를 변경하면 커서가 사라진 후 변경() 함수가 트리거됩니다. 포커스
함수 변경(){
//사용자 입력이 숫자가 아닌지 확인합니다. 그렇다면 사용자에게 상기시킵니다
if(isNaN(document.getElementById("text").value)){
Alert("입력하세요. a number") ;
document.getElementById("text").value=1;
}
//id="text"로 입력 상자 값 가져오기
var num=document.getElementById("text").value;
//제품 가격 가져오기
var Price=document.getElementById("price").innerHTML;
//출력 subtotal
document.getElementById("subtotal").innerHTML=price*num;
}
삭제 기능
삭제 <div&g t; 태그 내부에 <를 설정하고 div
<div class="delete" onclick="delect('shop2')"><a href="#">Delete<에 onclick 이벤트를 바인딩합니다. ;/ 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>
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
