js购物车功能php,JS实现购物车特效

效果：

1.点击全选按钮可以全选，再点击就全不选

2.点击数量 ‘ + ' ‘ -  ' 可以自动计算。并且合计保持更新。当数量大于1时‘ - '出现。小于等于1时‘ - '消失

3.点击删除可以实现删除功能。

4.点击全选旁的删除按钮可以全部删除。

5.选好商品后点击已选商品，可以显示选中的商品

6.选中的商品可以取消选择。

购物车

* {

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;

}

 全选商品单价数量小计操作

Casio/卡西欧 EX-TR3505999.88

+

5999.88 删除 Canon/佳能 PowerShot SX50 HS3888.50 +3888.50 删除 Sony/索尼 DSC-WX3001428.50 +1428.50 删除 Fujifilm/富士 instax mini 25640.60 +640.60 删除

 全选

删除

结 算

合计：￥ 0.00

已选商品

0件

︽

︾

◆◆

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 += '

取消选择

'

}

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();

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！