这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要向大家推荐一个原生 js 实现淘宝购物车功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
js 淘宝购物车功能描述:
1、点击 "+",单个商品数量加 1,总数量加 1;单个商品价格添加,总价也添加。
2. 点击 "-",单个商品数量减 1,总数量减 1;单个商品价格减少,总价也减少。
当该商品数量为 0 时,点击依然为 0;
3. 显示出总价,总数量和其中最贵的那个商品的价格。
瞄一眼效果图:
废话不多说,LU 代码
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <style>
- *{padding:0;margin:0;} #list,p{list-style:none;width:600px;margin:0 auto;}
- #list li {width:600px;height:50px;line-height:50px;margin-top:20px;font-size:20px;}
- #list li input{width:60px;height:40px;line-height:40px;} .highlight{color:red;font-size:30px;font-weight:bold;}
- </style>
- <script>
- window.onload = function() {
- var oUl = $('list');
- var totalNumber = $('totalNum');
- var totalPrice = $('totalPrice');
- var mostExpensive = $('mostExpensive');
- var aLi = oUl.getElementsByTagName('li');
- var maxPrice = [0];
- for (var i = 0; i < aLi.length; i++) {
- price(aLi[i]);
- }
- function price(oLi) {
- var aBtn = oLi.getElementsByTagName('input');
- var oStrong = oLi.getElementsByTagName('strong')[0];
- var oEm = oLi.getElementsByTagName('em')[0];
- var oSpan = oLi.getElementsByTagName('span')[0];
- aBtn[0].onclick = function() {
- var num = Number(oStrong.innerHTML);
- var price = parseFloat(oEm.innerHTML);
- var numbers = Number(totalNumber.innerHTML);
- var prices = parseFloat(totalPrice.innerHTML);
- num--;
- if (num === 0) {
- // 如果该商品数量为0,,那么就得把它的价格从价格表中清除
- var index = maxPrice.indexOf(price);
- if (index > -1) maxPrice.splice(index, 1);
- } else if (num < 0) {
- num = 0;
- return;
- }
- numbers--;
- oStrong.innerHTML = num;
- oSpan.innerHTML = num * price + '元';
- totalNumber.innerHTML = numbers;
- totalPrice.innerHTML = prices - (num + 1) * price;
- mostExpensive.innerHTML = maxPrice[0];
- }
- aBtn[1].onclick = function() {
- var num = Number(oStrong.innerHTML);
- var price = parseFloat(oEm.innerHTML);
- var numbers = Number(totalNumber.innerHTML);
- var prices = parseFloat(totalPrice.innerHTML);
- num++;
- numbers++;
- if (maxPrice.indexOf(price) < 0) {
- maxPrice.push(price) maxPrice.sort(function(a, b) {
- return b - a
- });
- }
- oStrong.innerHTML = num;
- oSpan.innerHTML = num * price + '元';
- totalNumber.innerHTML = numbers;
- totalPrice.innerHTML = prices + num * price;
- mostExpensive.innerHTML = maxPrice[0];
- }
- }
- function $(id) {
- return document.getElementById(id);
- }
- }
- </script>
- </head>
- <body>
- <ul id="list">
- <li>
- <input type="button" value="-" />
- <strong>
- 0
- </strong>
- <input type="button" value="+" />
- 单价:
- <em>
- 12.5元
- </em>
- 小计:
- <span class="highlight">
- 0元
- </span>
- </li>
- <li>
- <input type="button" value="-" />
- <strong>
- 0
- </strong>
- <input type="button" value="+" />
- 单价:
- <em>
- 10.5元
- </em>
- 小计:
- <span class="highlight">
- 0元
- </span>
- </li>
- <li>
- <input type="button" value="-" />
- <strong>
- 0
- </strong>
- <input type="button" value="+" />
- 单价:
- <em>
- 8.5元
- </em>
- 小计:
- <span class="highlight">
- 0元
- </span>
- </li>
- <li>
- <input type="button" value="-" />
- <strong>
- 0
- </strong>
- <input type="button" value="+" />
- 单价:
- <em>
- 8元
- </em>
- 小计:
- <span class="highlight">
- 0元
- </span>
- </li>
- <li>
- <input type="button" value="-" />
- <strong>
- 0
- </strong>
- <input type="button" value="+" />
- 单价:
- <em>
- 14.5元
- </em>
- 小计:
- <span class="highlight">
- 0元
- </span>
- </li>
- </ul>
- <p>
- 商品合计共:
- <span class="highlight" id="totalNum">
- 0
- </span>
- 件, 共花费了:
- <span class="highlight" id="totalPrice">
- 0
- </span>
- 元
- <br />
- 其中最贵的商品单是:
- <span class="highlight" id="mostExpensive">
- 0
- </span>
- 元
- </p>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0723/328613.html