首頁 > web前端 > js教程 > javascript如何實現購物車的功能(程式碼)

javascript如何實現購物車的功能(程式碼)

不言
發布: 2018-08-23 11:55:12
原創
7693 人瀏覽過

這篇文章帶給大家的內容是關於javascript如何實現購物車的功能(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>购物车</title>

    <style>

        table{

            width: 600px;

            margin: 0 auto;

            border-collapse: collapse;

        }

        td{

            border: 1px solid silver;

            line-height: 40px;

            text-align: center;

        }

        .btnl,.btnr{

            border-style: none;

            outline: none;

            color: deeppink;

        }

        .txt{

            width: 30px;

            height: 30px;

            border-style: none;

            outline: none;

            text-align: center;

        }

    </style>

</head>

<body>

<table>

    <tr>

        <td><button id="btna">全选</button></td>

        <td>序号</td>

        <td>名称</td>

        <td>价钱</td>

        <td>数量</td>

        <td>小计</td>

        <td>操作</td>

    </tr>

    <tr class="trinfo">

        <td><input class="ckbox" type="checkbox"/></td>

        <td>1</td>

        <td>毛衣</td>

        <td><span class="price">99</span>¥</td>

        <td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>

        <td><span class="smallprice">99</span>¥</td>

        <td><button class="btndelete">删除</button></td>

    </tr>

    <tr class="trinfo">

        <td><input class="ckbox" type="checkbox"/></td>

        <td>2</td>

        <td>短袖</td>

        <td><span class="price">108</span>¥</td>

        <td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>

        <td><span class="smallprice">108</span>¥</td>

        <td><button class="btndelete">删除</button></td>

    </tr>

    <tr class="trinfo">

        <td><input class="ckbox" type="checkbox"/></td>

        <td>3</td>

        <td>运动鞋</td>

        <td><span class="price">10000</span>¥</td>

        <td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>

        <td><span class="smallprice">10000</span>¥</td>

        <td><button class="btndelete">删除</button></td>

    </tr>

    <tr class="trinfo">

        <td><input class="ckbox" type="checkbox"/></td>

        <td>4</td>

        <td>凉鞋</td>

        <td><span class="price">25</span>¥</td>

        <td><button class="btnl">-</button><input type="text" class="txt" value="1"/><button class="btnr">+</button></td>

        <td><span class="smallprice">25</span>¥</td>

        <td><button class="btndelete">删除</button></td>

    </tr>

    <tr >

        <td><button id="btnf">反选</button></td>

        <td colspan="6"><span>总计:<span class="totle">0</span>¥</span><button>去结算</button></td>

    </tr>

</table>

<script>    

//获取左右的按钮集合

    var btnleft=document.getElementsByClassName("btnl");

    var btnright=document.getElementsByClassName("btnr");    

    //获取表示数量的class名为txt的input元素集合

    var txt=document.getElementsByClassName("txt");    

    //获取表示单价的class名为price的span元素集合

    var price=document.getElementsByClassName("price");

    //获取表示小计的class名为smallprice的span元素集合    

    var small=document.getElementsByClassName("smallprice");    

    //获取表示总价的class名为totle的span元素

    var totle=document.getElementsByClassName("totle")[0];    

    //获取全选反选按钮和选择框

    var btna=document.getElementById("btna");

    var btnf=document.getElementById("btnf");

    var box=document.getElementsByClassName("ckbox");    

    //获取删除按钮

    var btndelete=document.getElementsByClassName("btndelete");

    var trlist=document.getElementsByClassName("trinfo");

 

    var totleprice=0;   //定义全局变量totleprice的初值为0

    //给数量左右两边的+-添加点击事件    

    for(var i=0;i<btnleft.length;i++)

    {

        btnleft[i].index=i;    //把i的值赋给btnleft[i]的index

        btnleft[i].onclick=function (){            //获取当前对应的文本框的值

            var val=txt[this.index].value;

            val--;            //控制其数量的值不能小于1           

            if(val<=1)

            {

                val=1;

            }

            txt[this.index].value=val;  //把更新了的val值再赋给txt[this.index].value

            addprice(this.index);    //调用一下addprice()使其在当前变化下执行

        }

        btnright[i].index=i;    //把i的值赋给btnright[i]的index

        btnright[i].onclick=function (){

            var val=txt[this.index].value;

            val++;

            txt[this.index].value=val;

            addprice(this.index);

        }      

         //给checkbox添加点击事件

        box[i].onclick=function (){

            showtotleprice();

        }      

         //给删除添加点击事件

        btndelete[i].index=i;

        btndelete[i].onclick=function (){

            totleprice-=parseFloat(small[this.index].innerText);    //将总计里面对应的价格也减掉

            totle.innerText=totleprice;

            trlist[this.index].remove();     //去掉对应的那一行元素

            //重新更新索引  防止其他操作出错

            for(var k=0;k<trlist.length;k++)

            {

                trlist[k].index=k;

                btndelete[k].index=k;

                btnleft[k].index=k;

                btnright[k].index=k;

            }

        }

    }    //计算小计

    function addprice(index){

        small[index].innerText=(price[index].innerText*txt[index].value);

    }    //计算总计

    function showtotleprice(){

        totleprice=0;

        for(var i=0;i<small.length;i++)

        {

            if(box[i].checked)

            {

                totleprice+=parseFloat(small[i].innerText);

            }

        }

        totle.innerText=totleprice;

    }   

    //全选

    btna.onclick=function (){

        for(var i=0;i<box.length;i++)

        {

            box[i].checked=true;

        }

        showtotleprice();

    }   

    //反选

    btnf.onclick=function (){

        for(var i=0;i<box.length;i++)

        {

            box[i].checked=!box[i].checked;

        }

        showtotleprice();

    }

</script>

</body>

</html>

登入後複製

相關推薦:

javascript - 購物車模組的業務邏輯

使用原生JavaScript實現購物車及購物頁面

以上是javascript如何實現購物車的功能(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板