Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

javascript开发购物车教程之实现加号功能

首先我们来看以下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>
</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>

下面我们来写加号的功能    id  是 a2    看下面代码

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

首先我们获取数量框的值，获得总价框的html内容，当点击加号时

用v1来接收数量框的值

注意：当点击加号时，此时数量已经发生变化，

然后我们把v1 使用parseInt函数进行转换成数字，此时的数量值已经是2了

所以我们使用document.getElementById('id').value = v1 + 1;

然后我们给总价框的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);
                    }
            }
    </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>


Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492836 spielt ab