빼기 기호 기능을 구현하기 위한 JavaScript 장바구니 개발 튜토리얼

이전 섹션에서 더하기 기호 함수의 구현을 배웠으니 빼기 기호 함수에 대해 설명하겠습니다

먼저 이전 섹션의 코드를 살펴보세요

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
    <script type="text/javascript">
            window.onload=function(){
                var input = document.getElementById('id').value; //获取文本框的value值
                var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
                //加号功能
                document.getElementById('a2').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            v1=parseInt(v1);
                            document.getElementById('id').value = v1 + 1;
                            document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
                }
            }
    </script>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="td">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="id">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="td2">1999</td>
            </tr>
        </table>
</body>
</html>

이를 토대로 빼기 기호 함수를 계속 작성하겠습니다

빼기 기호 기능 매우 간단합니다. 더하기 기호에 대한 코드를 복사한 다음 약간만 수정하면 됩니다.

<script>
document.getElementById('a1').onclick = function(){                            
  var v1 = document.getElementById('id').value;
     v1=parseInt(v1);
     document.getElementById('id').value = v1 - 1;
     document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);                           
 }
</script>

이렇게 하면 빼기 기호 기능이 구현됩니다. 하지만 여전히 약간의 문제가 있다는 점에 유의해야 합니다. . 1로 줄인 후에도 계속 감소할 수 있으므로 음수가 나타나므로 이에 대해 처리해야 합니다.

수량 값이 1보다 크면 1보다 크지 않으면 계속 감소할 수 있습니다. 1, 수량 상자에 a를 지정할 수 있습니다. 기본값

코드는 다음과 같습니다.

<script>
document.getElementById('a1').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            if(v1>1){
                                v1=parseInt(v1);
                                document.getElementById('id').value = v1 - 1;
                                document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
                            }else{
                                document.getElementById('id').value=1;
                            }
                }
</script>

이렇게 장바구니 가감 기능이 있고, 수량 변경에 따라 총 가격이 변경되는 기능이 있습니다. 전체 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
    <script type="text/javascript">
            window.onload=function(){
                var input = document.getElementById('id').value; //获取文本框的value值
                var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
                //加号功能
                document.getElementById('a2').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            v1=parseInt(v1);
                            document.getElementById('id').value = v1 + 1;
                            document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
                }
                //减号功能
                document.getElementById('a1').onclick = function(){                            
                            var v1 = document.getElementById('id').value;
                            if(v1>1){
                                v1=parseInt(v1);
                                document.getElementById('id').value = v1 - 1;
                                document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
                            }else{
                                document.getElementById('id').value=1;
                            }
                }
            }
    </script>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="td">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="id">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="td2">1999</td>
            </tr>
        </table>
</body>
</html>

다음 섹션

새로운 파일

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{width:350px;border:1px solid #eee;text-align:center;}
		.tr2{height:50px;}
		input{width:30px;height:20px;text-align: center;}
		a{text-decoration:none}
	</style>
	<script type="text/javascript">
			window.onload=function(){
				var input = document.getElementById('id').value; //获取文本框的value值
				var good = document.getElementById('td').innerHTML; //获取id是td的html文本内容
				//加号功能
				document.getElementById('a2').onclick = function(){							
							var v1 = document.getElementById('id').value;
							v1=parseInt(v1);
							document.getElementById('id').value = v1 + 1;
							document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1+1);
				}
				//减号功能
				document.getElementById('a1').onclick = function(){							
							var v1 = document.getElementById('id').value;
							if(v1>1){
								v1=parseInt(v1);
								document.getElementById('id').value = v1 - 1;
								document.getElementById('td2').innerHTML = parseInt(good) * parseInt(v1-1);
							}else{
								document.getElementById('id').value=1;
							}
				}


			}
	</script>
</head>
<body>
		<table cellspacing="0" cellpadding="0" border="1">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总价</th>
			</tr>

			<tr class="tr2">
				<td>手表</td>
				<td id="td">1999</td>
				<td>
					<a href="#" id="a1" class="tp1">-</a>
					<input type="text" value="1" id="id">
					<a href="#" id="a2" class="tp2">+</a>
				</td>
				<td id="td2">1999</td>
			</tr>
		</table>
</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면