这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要分享了用 JavaScript 实现购物车特效的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
效果:
1. 点击全选按钮可以全选,再点击就全不选
2. 点击数量 '+' '-' 可以自动计算。并且合计保持更新。当数量大于 1 时'-'出现。小于等于 1 时'-'消失
3. 点击删除可以实现删除功能。
4. 点击全选旁的删除按钮可以全部删除。
5. 选好商品后点击已选商品,可以显示选中的商品
6. 选中的商品可以取消选择。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>购物车</title>
- </head>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- a {
- color: #666;
- text-decoration: none;
- }
- body {
- padding: 20px;
- color: #666;
- }
- .fl{
- float: left;
- }
- .fr {
- float: right;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- border: 0;
- text-align: center;
- width: 937px;
- }
- th, td {
- border: 1px solid #CADEFF;
- }
- th {
- background: #e2f2ff;
- border-top: 3px solid #a7cbff;
- height: 30px;
- }
- td {
- padding: 10px;
- color: #444;
- }
- tbody tr:hover {
- background: RGB(238,246,255);
- }
- .checkbox {
- width: 60px;
- }
- .goods {
- width: 300px;
- }
- .goods span {
- width: 180px;
- margin-top: 20px;
- text-align: left;
- float: left;
- }
- .price {
- width: 130px;
- }
- .count {
- width: 90px;
- }
- .count .add, .count input, .count .reduce {
- float: left;
- margin-right: -1px;
- position: relative;
- z-index: 0;
- }
- .count .add, .count .reduce {
- height: 23px;
- width: 17px;
- border: 1px solid #e5e5e5;
- background: #f0f0f0;
- text-align: center;
- line-height: 23px;
- color: #444;
- }
- .count .add:hover, .count .reduce:hover {
- color: #f50;
- z-index: 3;
- border-color: #f60;
- cursor: pointer;
- }
- .count input {
- width: 50px;
- height: 15px;
- line-height: 15px;
- border: 1px solid #aaa;
- color: #343434;
- text-align: center;
- padding: 4px 0;
- background-color: #fff;
- z-index: 2;
- }
- .subtotal {
- width: 150px;
- color: red;
- font-weight: bold;
- }
- .operation {
- width: 80px;
- }
- .operation span:hover, a:hover {
- cursor: pointer;
- color: red;
- text-decoration: underline;
- }
- img {
- width: 100px;
- height: 80px;
- /*border: 1px solid #ccc;*/
- margin-right: 10px;
- float: left;
- }
- .foot {
- width: 935px;
- margin-top: 10px;
- color: #666;
- height: 48px;
- border: 1px solid #c8c8c8;
- background-color: #eaeaea;
- background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
- position: relative;
- z-index: 8;
- }
- .foot div, .foot a {
- line-height: 48px;
- height: 48px;
- }
- .foot .select-all {
- width: 100px;
- height: 48px;
- line-height: 48px;
- padding-left: 5px;
- color: #666;
- }
- .foot .closing {
- border-left: 1px solid #c8c8c8;
- width: 100px;
- text-align: center;
- color: #000;
- font-weight: bold;
- background: RGB(238,238,238);
- cursor: pointer;
- }
- .foot .total{
- margin: 0 20px;
- cursor: pointer;
- }
- .foot #priceTotal, .foot #selectedTotal {
- color: red;
- font-family: "Microsoft Yahei";
- font-weight: bold;
- }
- .foot .selected {
- cursor: pointer;
- }
- .foot .selected .arrow {
- position: relative;
- top:-3px;
- margin-left: 3px;
- }
- .foot .selected .down {
- position: relative;
- top:3px;
- display: none;
- }
- .show .selected .down {
- display: inline;
- }
- .show .selected .up {
- display: none;
- }
- .foot .selected:hover .arrow {
- color: red;
- }
- .foot .selected-view {
- width: 935px;
- border: 1px solid #c8c8c8;
- position: absolute;
- height: auto;
- background: #ffffff;
- z-index: 9;
- bottom: 48px;
- left: -1px;
- display:none;
- }
- .show .selected-view {
- display: block;
- }
- .foot .selected-view div{
- height: auto;
- }
- .foot .selected-view .arrow {
- font-size: 16px;
- line-height: 100%;
- color:#c8c8c8;
- position: absolute;
- right: 330px;
- bottom: -9px;
- }
- .foot .selected-view .arrow span {
- color: #ffffff;
- position: absolute;
- left: 0px;
- bottom: 1px;
- }
- #selectedViewList {
- padding: 20px;
- margin-bottom: -20px;
- }
- #selectedViewList div{
- display: inline-block;
- position: relative;
- width: 100px;
- height: 80px;
- border: 1px solid #ccc;
- margin: 10px;
- }
- #selectedViewList div span {
- display: none;
- color: #ffffff;
- font-size: 12px;
- position: absolute;
- top: 0px;
- right: 0px;
- width: 60px;
- height: 18px;
- line-height: 18px;
- text-align: center;
- background: RGBA(0,0,0,.5);
- cursor: pointer;
- }
- #selectedViewList div:hover span {
- display: block;
- }
- </style>
- <body>
- <table id="cartTable">
- <thead>
- <tr>
- <th><label><input class="check-all check" type="checkbox"/> 全选</label></th>
- <th>商品</th>
- <th>单价</th>
- <th>数量</th>
- <th>小计</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
- <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704loo2mdzuux5123gu.jpg.editor.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
- <td class="price">5999.88</td>
- <td class="count">
- <span class="reduce"></span>
- <input class="count-input" type="text" value="1"/>
- <span class="add">+</span></td>
- <td class="subtotal">5999.88</td>
- <td class="operation"><span class="delete">删除</span></td>
- </tr>
- <tr>
- <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
- <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704m26zvv6e52sjczee.jpg.editor.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
- <td class="price">3888.50</td>
- <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
- <td class="subtotal">3888.50</td>
- <td class="operation"><span class="delete">删除</span></td>
- </tr>
- <tr>
- <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
- <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704etdabo2fpppdplsa.jpg.editor.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
- <td class="price">1428.50</td>
- <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
- <td class="subtotal">1428.50</td>
- <td class="operation"><span class="delete">删除</span></td>
- </tr>
- <tr>
- <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
- <td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075823wdtw1pdvf3wbwd8b.jpg.editor.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
- <td class="price">640.60</td>
- <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
- <td class="subtotal">640.60</td>
- <td class="operation"><span class="delete">删除</span></td>
- </tr>
- </tbody>
- </table>
- <div class="foot" id="foot">
- <label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
- <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
- <div class="fr closing">结 算</div>
- <div class="fr total">合计:¥<span id="priceTotal">0.00</span></div>
- <div class="fr selected" id="selected">已选商品
- <span id="selectedTotal">0</span>件
- <span class="arrow up">︽</span>
- <span class="arrow down">︾</span>
- </div>
- <div class="selected-view">
- <div id="selectedViewList" class="clearfix">
- <!--<div><img src="images/1.jpg"><span>取消选择</span></div>-->
- </div>
- <span class="arrow">◆<span>◆</span></span>
- </div>
- </div>
- <script>
- window.onload = function () {
- if (!document.getElementsByClassName) {
- document.getElementsByClassName = function (cls) {
- var ret = [];
- var els = document.getElementsByTagName('*');
- for (var i = 0, len = els.length; i < len; i++) {
- if (els[i].className === cls
- || els[i].className.indexOf(cls + ' ') >= 0
- || els[i].className.indexOf(' ' + cls + ' ') >= 0
- || els[i].className.indexOf(' ' + cls) >= 0) {
- ret.push(els[i]);
- }
- }
- return ret;
- }
- }
- var cartTable = document.getElementById('cartTable');
- var tr = cartTable.children[1].rows;
- var checkInputs = document.getElementsByClassName('check');
- var checkAllInputs = document.getElementsByClassName('check-all');
- var selectedTotal = document.getElementById('selectedTotal');
- var priceTotal = document.getElementById('priceTotal');
- var selected = document.getElementById('selected');
- var foot = document.getElementById('foot');
- var selectedViewList = document.getElementById('selectedViewList');
- var deleteAll = document.getElementById('deleteAll');
- //计算
- function getTotal() {
- var seleted = 0;
- var price = 0;
- var HTMLstr = '';
- for (var i = 0, len = tr.length; i < len; i++) {
- if (tr[i].getElementsByTagName('input')[0].checked) {
- tr[i].className = 'on';
- seleted += parseInt(tr[i].getElementsByTagName('input')[1].value);
- price += parseFloat(tr[i].cells[4].innerHTML);
- HTMLstr += '<div><img src="' + tr[i].getElementsByTagName('img')[0].src + '"><span class="del" index="' + i + '">取消选择</span></div>'
- }
- else {
- tr[i].className = '';
- }
- }
- selectedTotal.innerHTML = seleted;
- priceTotal.innerHTML = price.toFixed(2);
- selectedViewList.innerHTML = HTMLstr;
- if (seleted == 0) {
- foot.className = 'foot';
- }
- }
- //小计
- function getSubTotal(tr) {
- var tds = tr.cells;
- var price = parseFloat(tds[2].innerHTML);
- var count = parseInt(tr.getElementsByTagName('input')[1].value);
- var SubTotal = parseFloat(price * count);
- tds[4].innerHTML = SubTotal.toFixed(2);
- }
- for (var i = 0 , len = checkInputs.length; i < len; i++) {
- checkInputs[i].onclick = function () {
- if (this.className === 'check-all check') {
- for (var j = 0; j < checkInputs.length; j++) {
- checkInputs[j].checked = this.checked;
- }
- }
- if (this.checked == false) {
- for (var k = 0; k < checkAllInputs.length; k++) {
- checkAllInputs[k].checked = false;
- }
- }
- getTotal();
- }
- }
- selected.onclick = function () {
- if (foot.className == 'foot') {
- if (selectedTotal.innerHTML != 0) {
- foot.className = 'foot show';
- }
- }
- else {
- foot.className = 'foot';
- }
- }
- selectedViewList.onclick = function (e) {
- e = e || window.event;
- var el = e.srcElement;
- if (el.className == 'del') {
- var index = el.getAttribute('index');
- var input = tr[index].getElementsByTagName('input')[0];
- input.checked = false;
- input.onclick();
- }
- }
- for (var i = 0; i < tr.length; i++) {
- tr[i].onclick = function (e) {
- e = e || window.event;
- var el = e.srcElement;
- var cls = el.className;
- var input = this.getElementsByTagName('input')[1];
- var val = parseInt(input.value);
- var reduce = this.getElementsByTagName('span')[1];
- switch (cls) {
- case 'add':
- input.value = val + 1;
- reduce.innerHTML = '-';
- getSubTotal(this);
- break;
- case 'reduce':
- if (val > 1) {
- input.value = val - 1;
- }
- if (input.value <= 1) {
- reduce.innerHTML = '';
- }
- getSubTotal(this);
- break;
- case 'delete':
- var conf = confirm('确定要删除吗?');
- if (conf) {
- this.parentNode.removeChild(this);
- }
- break
- default :
- break;
- }
- getTotal();
- }
- tr[i].getElementsByTagName('input')[1].onkeyup = function () {
- var val = parseInt(this.value);
- var tr = this.parentNode.parentNode
- var reduce = tr.getElementsByTagName('span')[1];
- if (isNaN(val) || val < 1) {
- val = 1;
- }
- this.value = val;
- if (val <= 1) {
- reduce.innerHTML = '';
- }
- else {
- reduce.innerHTML = '-';
- }
- getSubTotal(tr);
- getTotal();
- }
- }
- deleteAll.onclick = function () {
- if (selectedTotal.innerHTML != '0') {
- var conf = confirm('确定删除吗?');
- if (conf) {
- for (var i = 0; i < tr.length; i++) {
- var input = tr[i].getElementsByTagName('input')[0];
- if (input.checked) {
- tr[i].parentNode.removeChild(tr[i]);
- i--;
- }
- }
- }
- }
- }
- checkAllInputs[0].checked = true;
- checkAllInputs[0].onclick();
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0610/328094.html