购物车原生js简单明了
页面如下图所示
实现添加购物车，数量添加、减少，物品删除，计算金额的功能，麻雀虽小五脏俱全。表格用的是layui框架。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Study</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<style type="text/css">
h1 {
text-align: center;
font-size: 20px;
margin: 40px 0 20px 0;
font-family: "黑体";
font-weight: bolder;
}
.layui-table {
margin: 0 auto;
width: 60%;
border-collapse: collapse;
}
</style>
<body>
<h1>真划算</h1>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);" />
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);" />
</td>
</tr>
<tr>
<td>iphone7手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);" />
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);" />
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" οnclick="add_shoppingcart(this);" />
</td>
</tr>
</tbody>
</table>
<h1>购物车</h1>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total" colspan="2"></td>
</tr>
</tfoot>
</table>
<script>
function add_shoppingcart(btn) { //添加按钮
var tr = btn.parentNode.parentNode; //用过btn的父元素的父元素来获取tr
var tds = tr.getElementsByTagName("td"); //获取tr下的每一条td
var name = tds[0].innerHTML; //获取td中的第一条数据name
var price = tds[1].innerHTML; //获取td中的第二条数据price
var tbody = document.getElementById("goods"); //通过getid方式来获取tbody
var row = tbody.insertRow(); //通过insertrow讲数据插入到tbody中
row.innerHTML = //row的内容
'<td>' + name + '</td>' + //标签要用'' 对要进行点击的按钮添加 onclick
'<td>' + price + '</td>' +
'<td>' +
'<input type="button" value="-" οnclick="change(this, -1);" style="margin:0 5px;width:12px"/>' +
'<input type="text" size="1" readonly value="1"/> ' +
'<input type="button" value="+" οnclick="change(this, 1);"/>' +
'</td>' +
'<td>' + price + '</td>' +
'<td align="center"><input type="button" value="删除" οnclick="del(this)"/></td>'
total();
}
function del(btn) { // 删除按钮
var tr = btn.parentNode.parentNode; //获取tr
tr.parentNode.removeChild(tr); //removechild 删除子节点
total();
}
function change(btn, n) { //数量改变
var inputs = btn.parentNode.getElementsByTagName("input"); //获取input
var amount = parseInt(inputs[1].value); //获取input中的value值
if(amount <= 1 && n < 0) {
return;
}
inputs[1].value = amount + n; //数量的值为 数量+n
amount = inputs[1].value; //amount=amount+n
var tr = btn.parentNode.parentNode; //获取tr
var tds = tr.getElementsByTagName("td"); //获取tr中所有的td
var price = parseFloat(tds[1].innerHTML); //获取amount值 parsenfloat 是一个全局函数将字符串进行解析输出数字 如果开头不是数字 返回nan
var m = price * amount; //计算价格
tds[3].innerHTML = m; //金额栏 写入数据
total();
}
function total() { //计算总价
var tbody = document.getElementById("goods"); //获取购物车的tbody
var trs = tbody.getElementsByTagName("tr"); //获取tr的数据
var sum = 0;
for(var i = 0; i < trs.length; i++) { //遍历tr
var td = trs[i].getElementsByTagName("td"); //获得td的值
var m = td[3].innerHTML; //获取td中价格一栏的值
sum += parseFloat(m); //相加
}
var total = document.getElementById("total").innerHTML=sum; //将sum写入到total一栏中
}
</script>
</body>
</html>
购物车原生js简单明了相关推荐
- H5原生js简单拼图游戏
H5原生js简单拼图游戏 演示地址 效果展示 源码 index.html puzzle.css puzzle.js 源码下载 演示地址 链接: 演示地址 效果展示 源码 index.html < ...
- 原生js简单实现五指棋
原生js简单实现五指棋 无聊之时可以玩玩,浏览器直接打开,简单又不失趣味! 如图: 上代码: <div id="bigBackground"><!-- 棋盘水平线 ...
- 原生JS简单的无缝自动轮播
最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...
- 原生JS 简单购物车网页
以下是代码: HTML <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- 原生js简单实现双向数据绑定原理
根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...
- 原生js简单实现定时抢月饼
早上跟人聊起月饼来,突然就想起了去年阿里的抢月饼事件,顺手写下这个抢月饼脚本. window.onload = function () {//判断时间数字是否小于10并格式化function form ...
- 原生js简单抽奖页面
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>抽奖 ...
- 工作只用jquery，原生js知道就好了
前几天公众号有位小伙伴微信上问我说:听朋友说工作中全部用jquery,学好jquery,js只需要知道就好了,是这样的吗? 一听到这种的观点,我只想说:远离这样的朋友,简直误人子弟. 幸好这个公众号的 ...
- 原生 JS 实现飘雪效果
一.前言 大家也许见过到以下场景: 1. 逢年过年或活动日,各大网站(淘宝,京东等)飘着漫天红包: 2. 下雨下雪的时候美团上的外卖地图上会有飘雨飘雪的景象: 3. 手机里的天气背景有电闪雷鸣的效果: ...
最新文章
- 程序员笔记|如何编写优雅的Dockerfile
- 并发编程（三）原子操作CAS
- 如何设计一门语言（十一）——删减语言的功能
- 人类染色质开放状态数据库，ATACdb使用介绍
- 算法9-5：最大流算法的Java代码
- 测试电梯的测试用例_测试用例设计经典面试题
- 【Angular 4】组件生命周期钩子
- Linux系统给进程绑核
- 【python】进程与线程
- Linux串口（serial、uart）驱动程序设计
- 计算机管理用户u,discuz+uclient 手动提升普通用户至管理员权限网站安全 -电脑资料...
- pcl求平面法向量_PCL自动求解平面法向量参数化表示
- android 新建桌面文件夹在哪里,添加并管理桌面文件夹
- 股票中，什么是市盈率，有什么作用？
- Android自定义控件——模拟抛体加速减速效果
- Python 爬取懂车帝详情页“全部车型模块信息”！懂车帝就火起来了吗？
- 用 turtle 绘制圆形
- CSS优先级权重练习
- win7系统安装telnet服务器,Win7系统下怎么安装Telnet服务【图文教程】
- 将前端网页生成二维码