小米商城购物车js实现

m0_61590561

于 2023-08-24 16:14:08 发布

阅读量408

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_61590561/article/details/132476846

版权

<!DOCTYPE html>

<head>

</head>

<style>

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

ul {

list-style: none;

}

a {

cursor: pointer;

}

em {

font-style: normal;

}

body {

font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;

color: #333;

background-color: #f5f5f5;

min-width: 1226px;

}

.clearfix::after {

content: "";

display: block;

clear: both;

}

.page-main {

width: 100%;

overflow: hidden;

padding: 38px 0;

margin-top: 100px;

border-top: 2px solid #ff6700;

}

.container {

width: 1226px;

margin: 0 auto;

overflow: hidden;

}

表格

table {

width: 1226px;

text-align: center;

color: #424242;

font-size: 14px;

overflow: hidden;

background-color: #fff;

border-collapse: collapse;

}

table th {

height: 70px;

font-weight: normal;

}

.col_check,

.allcheck {

width: 110px;

text-align: left;

user-select: none;

}

.col_img {

width: 120px;

height: 80px;

text-align: left;

}

.col_img img {

width: 80px;

display: inline-block;

vertical-align: middle;

}

.col_name {

width: 380px;

text-align: left;

}

.col-price {

width: 140px;

padding-right: 18px;

width: 110px;

}

.col_num {

width: 150px;

}

.col-total {

width: 120px;

padding-right: 81px;

text-align: right;

}

.col_action {

width: 80px;

}

.col_check .iconfont,

.allcheck .iconfont {

width: 20px;

height: 20px;

font-style: normal;

font-weight: normal;

color: white;

line-height: 18px;

border: 1px solid #e0e0e0;

margin: 0 15px 0 24px;

font-size: 20px;

transition: all .3s;

vertical-align: middle;

}

/* 事件

点击后变色，字体变成白色

.col_check .iconfont:hover,

.allcheck .iconfont:hover {

color: #757575;

}

.check-color {

/* 强制提升权重 */

color: white !important;

background-color: #ff6700;

}

thead tr {

height: 70px;

}

tbody tr {

height: 116px;

text-align: center;

padding: 15px 26px 15px 0;

border-top: 1px solid #e0e0e0;

}

tbody tr .col_name {

margin-top: 8px;

margin-bottom: 8px;

font-size: 18px;

font-weight: 400;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

tbody .col_num {

width: 150px;

padding: 0 45px;

position: relative;

}

tbody .col_num .pl {

width: 150px;

height: 40px;

line-height: 40px;

color: #424242;

font-size: 16px;

border: 1px solid #e0e0e0;

}

tbody .col_num .goods_num {

float: left;

width: 70px;

height: 38px;

box-sizing: border-box;

line-height: 38px;

padding: 0;

padding-left: 31px;

border-width: 0;

color: #424242;

font-size: 16px;

outline: none;

}

tbody .col_num span {

position: absolute;

width: 100%;

left: 0;

bottom: 0;

font-size: 12px;

color: #b0b0b0;

display: none;

}

tbody tr .icon-jia,

tbody tr .icon-jian {

height: 40px;

width: 40px;

font-size: 20px;

color: #757577;

}

tbody tr .icon-jian:hover,

.icon-jia:hover {

background-color: #e0e0e0;

}

tbody tr .icon-jian {

float: left;

}

tbody tr .icon-jia {

float: right;

}

tbody tr .col-total {

color: #ff6700;

}

tbody tr .col_action .del {

display: inline-block;

width: 24px;

height: 24px;

line-height: 24px;

border-radius: 12px;

transition: all .3s;

}

tbody tr .del:hover {

color: white;

font-weight: 700;

background-color: red;

}

继续购物 */

.section {

height: 50px;

margin-top: 20px;

background-color: #fff;

}

.section a{

color: #757575;

}

.section-left {

float: left;

}

.section-left .go_shopping {

line-height: 50px;

margin-left: 32px;

transition: all .3s;

}

.section-left .go_shopping:hover {

color: #ff6700;

}

.cart-total {

margin-left: 16px;

padding-left: 16px;

border-left: 1px solid #eee;

color: #757575;

}

.cart-total .data_sum,

.cart-total .data_select {

color: #ff6700;

}

.total_price {

float: right;

text-align: right;

line-height: 50px;

padding-left: 13px;

color: #ff6700;

}

.total_price .data_totalsum {

color: #ff6700;

font-size: 30px;

}

.btn-disabled {

position: relative;

display: inline-block;

width: 200px;

height: 50px;

text-align: center;

line-height: 48px;

font-size: 18px;

margin-left: 50px;

vertical-align: top;

background: #e0e0e0;

border-color: #e0e0e0;

color: #b0b0b0;

cursor: default;

}

/* 点击全选后样式 */

.btn-primary {

background: #ff6700;

border-color: #ff6700;

color: #fff !important;

cursor: pointer;

}

.btn {

box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18);

}

/* 全选时，出现 */

.no-select-tip {

position: absolute;

width: 200px;

height: 48px;

line-height: 48px;

top: -58px;

right: 0px;

background-color: #fff;

border: 1px solid #ff6700;

color: #ff6700;

text-align: center;

}

.no-select-tip::after {

position: absolute;

bottom: -8px;

left: 50%;

z-index: 2;

width: 8px;

height: 8px;

transform: rotate(45deg) translateX(-50%);

border-width: 0 1px 1px 0;

border-color: #ff6700;

border-style: solid;

background-color: #fff;

content: "";

}

.cart-recommend {

width: 100%;

height: 679px;

margin-top: 60px;

}

.cart-recommend h2 {

height: 50px;

position: relative;

font-size: 30px;

font-weight: 400;

color: #757575;

border-top: 1px solid #e0e0e0;

}

.cart-recommend h2 span {

position: absolute;

height: 40px;

width: 482px;

text-align: center;

left: 50%;

top: -20px;

z-index: 22;

transform: translateX(-50%);

}

.recommend-bd {

height: 628px;

}

.recommend-list {

width: 1226px;

height: 628px;

overflow: hidden;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-content: space-around;

}

.recommend-item {

width: 234px;

height: 300px;

background-color: #fff;

overflow: hidden;

}

.recommend-item a {

display: block;

position: relative;

}

.recommend-item a img {

display: block;

margin: 40px auto 20px;

width: 140px;

height: 140px;

}

.recommend-item .recommend-name,

.recommend-price,

.recommend-tips {

text-align: center;

margin: 0 10px 10px;

height: 18px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

color: #333;

}

.recommend-item .recommend-price {

margin-bottom: 10px;

color: #ff6700;

}

.recommend-item .recommend-tips {

color: #757575;

}

.recommend-item .recommend-shoppingcart {

position: absolute;

bottom: -60px;

left: 50%;

transform: translateX(-50%);

width: 120px;

height: 30px;

line-height: 30px;

color: #ff6700;

text-align: center;

transition: all .3s;

background-color: #fff;

border: 1px solid #ff6700;

}

.recommend-item:hover .recommend-shoppingcart {

bottom: -7px;

}

.recommend-shoppingcart:hover {

color: white;

background-color: #ff6700;

}

</style>

<body>

<table>

<thead>

<tr>

<i class="iconfont icon-duihao allBtn"></i> 全选

</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

共

件商品，已选择

件

</span>

</div>

合计

元

<a href="javascript:" class=" btn-disabled">去结算

请勾选需要结算的商品

</div>

</a>

</span>

</div>

<span>买购物车中的商品的人还买了</span>

</h2>

</ul>

</div>

</body>

var dataList = [{

imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/413f5e2f-53e7-0879-119c-8b4466feea53.jpg?thumb=1&w=180&h=180",

goodsName: "贝医生巴氏牙刷 ",

price: "39.9元",

tips: "37.4万人好评"

}, {

imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9f3e968c9390f44a589afa48e92c6eb.jpg?thumb=1&w=180&h=180&f=webp&q=90",

goodsName: "贝医生防蛀健齿牙膏",

price: "12元",

tips: "56.2万人好评"

{

imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/ddf317f34e47eed06d910ee0ffd6b2fc.jpg?thumb=1&w=180&h=180",

goodsName: "小米数据线",

price: "12元",

tips: "31.9万人好评"

{

imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/e8c1635c-a9dd-c2bc-d4d5-fd54ec708810.jpg?thumb=1&w=180&h=180",

goodsName: "小米双单元半入耳式耳机",

price: "59元",

tips: "31.9万人好评"

{

imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/57433a4b991b2a2ddc889f2d8d434655.jpg?thumb=1&w=180&h=180&f=webp&q=90",

goodsName: "小米巨能写中性笔10支装",

price: "9.99元",

tips: "151.1万人好评"

{

imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/ea4ab6ba-e8f2-b0b1-1e7f-aa9813a126ac.jpg?thumb=1&w=180&h=180",

goodsName: "小米圈铁耳机Pro ",

price: "129元",

tips: "52.5万人好评"

{

imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/3c114987-43d5-f6d3-d2f4-8b86dd90a55d.jpg?thumb=1&w=180&h=180",

goodsName: "小米耳机",

price: "12元",

tips: "56.2万人好评"

{

imgSrc: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a6773217dbe4c3f3ca014dcfb59a2538.jpg?thumb=1&w=180&h=180",

goodsName: "小米蓝牙项圈耳机青春版",

price: "149元",

tips: "14.7万人好评"

{

imgSrc: "https://i8.mifile.cn/b2c-mimall-media/64de04b0cb774f0b33ed4a00df0f9c3c!180x180.jpg",

goodsName: "手机USB micro 数据线 ",

price: "9.99元",

tips: "48万人好评"

{

imgSrc: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/07390d2d89220f2e3f06710360ec1077.jpg?thumb=1&w=180&h=180&f=webp&q=90",

goodsName: "米家智能压力IH电饭煲1S 3L",

price: "1099元",

tips: "1.8万人好评"

}

]

var tbody = document.getElementsByTagName('tbody')[0];

var allCheck = document.getElementsByClassName('allBtn')[0];

var checks = tbody.getElementsByClassName('iconfont icon-duihao');

var data_sum = document.getElementsByClassName('data_sum')[0];

var data_select = document.getElementsByClassName('data_select')[0];

var selectTip = document.getElementsByClassName('no-select-tip')[0];

var btn_disabled = document.getElementsByClassName('btn-disabled')[0];

var goods_num = document.getElementsByClassName('goods_num');

var col_num = document.getElementsByClassName('col_num');

var col_price = tbody.getElementsByClassName('col-price');

var col_total = tbody.getElementsByClassName('col-total');

var col_name = tbody.getElementsByClassName('col_name');

var sumPrice = document.getElementsByClassName('data_totalsum')[0];

var msg = tbody.getElementsByClassName('msg');

var goodsvalue, selectNum, num, totalValue;

//去结算样式，鼠标按下与松开

btn_disabled.onmousedown = function (event) {

if (event.button == '0') {

btn_disabled.className += ' btn';

}

btn_disabled.onmouseup = function (event) {

if (event.button == '0') {

btn_disabled.className = 'btn-disabled';

}

var flag = false; //开关控制全选按钮

allCheck.onclick = function () {

if (!flag) {

this.className = 'iconfont icon-duihao check-color'; //点击全选后，全选变色

for (var i = 0; i < checks.length; i++) { //遍历每个单选按钮，变色

checks[i].className = 'iconfont icon-duihao check-color';

}

flag = true; // 全选开关打开

} else if (flag) {

this.className = 'iconfont icon-duihao allBtn'; // 提示信息出现

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

checks[i].className = 'iconfont icon-duihao';

}

flag = false; // 全选开关关闭

}

total();

btnColor();

}

//事件委托给tbody

tbody.onclick = function (event) {

var event = event || window.event;

var target = event.target || event.srcElement;

if (target.className == 'iconfont icon-chenghao del') {

target.parentElement.parentElement.remove(); //删除事件

total();

btnColor();

if (!col_num.length) {

allCheck.className = 'iconfont icon-duihao allBtn';

flag = false;

}

if (target.nodeName = 'INPUT') {

target.onblur = function () {

goodsvalue = target.value;

if (goodsvalue <= 1 || isNaN(goodsvalue)) {

goodsvalue = 1;

} else if (goodsvalue >= 20) {

goodsvalue = 20;

}

target.parentElement.parentElement.nextElementSibling.innerHTML = parseFloat(target.parentElement.parentElement.previousElementSibling.innerHTML) * 10 * goodsvalue / 10 + '元';

tip(target.parentElement.children);

total();

}

//单选按钮

if (target.className == 'iconfont icon-duihao' || target.className == 'iconfont icon-duihao check-color') {

if (target.className == 'iconfont icon-duihao') {

target.className += ' check-color'; //单选按钮颜色变化

} else if (target.className == 'iconfont icon-duihao check-color') { // 遍历设置总价格，选中总数量

target.className = 'iconfont icon-duihao'; //取消单选后,单选样式消除

}

total();

btnColor();

}

if (target.className == 'iconfont icon-jian' || target.className == 'iconfont icon-jia') {

//加减运算

var pl = target.parentElement.children;

goodsvalue = pl[1].value;

if (target.className == 'iconfont icon-jian') {

if (goodsvalue == 1) {

pl[1].value = 1;

//提示文字

pl[3].style.display = 'none';

return;

}

goodsvalue--;

tip(pl);

}

//加号

if (target.className == 'iconfont icon-jia') {

if (goodsvalue == '20') {

pl[1].value = 20;

pl[3].style.display = 'none';

return;

}

goodsvalue++;

tip(pl);

}

target.parentElement.parentElement.nextElementSibling.innerHTML = parseFloat(target.parentElement.parentElement.previousElementSibling.innerHTML) * 10 * goodsvalue / 10 + '元';

total();

}

function btnColor() {

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

if (checks[k].className == 'iconfont icon-duihao check-color') {

btn_disabled.className = 'btn-disabled btn-primary';

selectTip.style.display = 'none'; //提示信息消失

break; //只要有一个单选按钮被选中，结算信息出现，退出循环

}

btn_disabled.className = 'btn-disabled';

selectTip.style.display = 'block';

}

if(checks.length==0){

flag = false;

allCheck.className = 'iconfont icon-duihao allBtn';

btn_disabled.className = 'btn-disabled';

selectTip.style.display = 'block';

return;

}else{

for (var j = 0; j < checks.length; j++) {

//点击单选按钮，遍历所有单选按钮，只要有一个单选按钮没有被选中，就把全选按钮设置为不选中，退出循环，如果都被选中，让全选按钮设置为选中状态；

if (checks[j].className == 'iconfont icon-duihao') {

allCheck.className = 'iconfont icon-duihao allBtn';

return;

}

//循环结束，单选按钮全部被选中时，全选按钮选中

flag = true;

allCheck.className = 'iconfont icon-duihao allBtn check-color';

}

function tip(pl) {

pl[3].style.display = 'block';

if (goodsvalue < 10) {

pl[3].innerHTML = '还可以买10件以上';

} else if (goodsvalue == 10) {

pl[3].innerHTML = '还可以买10件';

} else if (goodsvalue > 10) {

pl[3].innerHTML = '还可以买' + (20 - goodsvalue) + '件';

}

//设置自加后的值等于点击加法后的值

pl[1].value = goodsvalue;

//设置小计

}

//加减运算后，遍历总价，选中数量，总数量

function total() {

totalValue = 0;

selectNum = 0;

num = 0;

for (var j = 0; j < col_num.length; j++) {

//总数量

num += parseFloat(goods_num[j].value);

if (checks[j].className == 'iconfont icon-duihao check-color') {

// 选中后，进行减法运算，总价格发生变化。

totalValue += parseFloat(col_total[j].innerHTML) * 100;

selectNum += parseInt(goods_num[j].value);

}

sumPrice.innerHTML = totalValue / 100;

data_select.innerHTML = selectNum;

data_sum.innerHTML = num;

}

function $(str) {

return document.querySelector(str);

}

// 1.先封装工具方法

/**

* createLi 创建商品

* createTr 购物车列表

function createLi(array) {

var str = "";

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

var lis = array[i];

str += `<li class="recommend-item">

<div class="recommend-name">${lis.goodsName}</div>

<div class="recommend-price">${lis.price}</div>

<span class="recommend-shoppingcart">加入购物车</span>

</a>

</li>`

}

return str;

}

var recommendList = $(".recommend-list");

recommendList.innerHTML = createLi(dataList);

function createTr(array) {

var str = "";

for (var i = 0; i < 3; i++) {

var trs = dataList[i];

str += `<tr>

<td class="col_name">${trs.goodsName}</td>

<td class="col-price">${trs.price}</td>

<td class="col-total">${trs.price}</td>

</tr>`

}

return str;

}

tbody.innerHTML = createTr(dataList);

var recommendList = document.getElementsByClassName('recommend-list')[0];

recommendList.onclick = function (event) {

var event = event || window.event;

var target = event.target || event.srcElement;

if (target.className == 'recommend-shoppingcart') {

recommend_price = target.previousElementSibling.previousElementSibling.innerHTML;

recommend_name = target.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML;

recommend_img = target.parentElement.firstElementChild.src;

console.log(col_name)

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

if (col_name[i].innerHTML == recommend_name) {

goods_num[i].value = parseInt(goods_num[i].value) + 1 >20? 20: parseInt(goods_num[i].value) + 1;

checks[i].className = 'iconfont icon-duihao check-color';

col_total[i].innerHTML= parseInt(goods_num[i].value) *parseFloat(col_price[i].innerHTML)+'元';

total(); btnColor();

return;

}

var newTr = document.createElement('tr');

newTr.innerHTML = '<tr><td class="col_check"><i class="iconfont icon-duihao check-color"></i></td><td class="col_img"><img src=' + recommend_img + ' alt="" width="80" height="80"></td><td class="col_name">' + recommend_name + '</td><td class="col-price">' + recommend_price + '</td><td class="col_num"><div class="pl clearfix"><a class="iconfont icon-jian"></a><input type="tel" value="1" class="goods_num"><a class="iconfont icon-jia"></a><span class="msg">还可买 10 件以上</span></div></td><td class="col-total">' + recommend_price + '</td><td class="col_action"><a class="iconfont icon-chenghao del"></a></td></tr>';

tbody.insertBefore(newTr, tbody.firstElementChild);

}

btnColor();

total();

}

</script>

</html>

m0_61590561

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
小米商城购物车js实现

<a class="iconfont icon-jian"></a><input type="tel" value="1" class="goods_num"><a class="iconfont icon-jia"></a><span class="msg">还可买 10 件以上</span>继续购物
复制链接

扫一扫