一个改进的用javascript写的购物车页面（具备添加、删除商品，计算总量和价格的功能）

多做项目

于 2019-04-13 18:08:56 发布

阅读量1.8k

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_43249665/article/details/89286442

版权

本文记录了通过JavaScript实现一个购物车页面的过程，包括添加、删除商品及计算总量和价格等功能。作者参考了一位博主的京东前端笔试题解，并进行了优化和功能增强，详细介绍了多种元素选取方法。

摘要由CSDN通过智能技术生成

看京东前端笔试相关的内容时，偶然看到一个博主分享的京东前端笔试编程题和他的解决方案，js基础不扎实的我仔仔细细把博主的解决方案看了一遍，并且进行了自认为是优化的优化，还增加了一些功能，在这里记录一下学到的东西！

笔记

元素选取方法：

单个元素选取方法
- Document.getElementById(“idString”)
- Document.querySelector(selectors)
- Element.querySelector()
多个元素选取方法
- Document.getElementsByClassName()
- Document.getElementsByTagName()
- Document.querySelectorAll()
- Element.getElementsByClassName()
- Element.getElementsByTagName()
- Element.querySelectorAll()

题目

写一个购物车页面，动态的增加删除，动态渲染页面，比如数量和总价，不能用框架。
原博客地址：https://blog.csdn.net/qq_31751569/article/details/77900791

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
body,html{
    
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #000000;
}
table{
    
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
thead{
    
    background: #3d444c;
    color: #ffffff;
}
td,th{
    
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
}
	</style>
</head>
<body>
<table id="jsTrolley">
	<thead><tr><th>名称</th><th>价格</th><th>操作</th></tr></thead>
	<tbody>
		<tr><td>产品1</td><td>10.00

最低0.47元/天解锁文章

多做项目

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
一个改进的用javascript写的购物车页面（具备添加、删除商品，计算总量和价格的功能）

看京东前端笔试相关的内容时，偶然看到一个博主分享的京东前端笔试编程题和他的解决方案，js基础不扎实的我仔仔细细把博主的解决方案看了一遍，并且进行了自认为是优化的优化，还增加了一些功能，在这里记录一下学到的东西！笔记元素选取方法：单个元素选取方法Document.getElementById(“idString”)Document.querySelector(selectors)...
复制链接

扫一扫

专栏目录