Html、Css、javaScript 网页制作之京东购物车

最新推荐文章于 2024-05-18 20:31:13 发布
最新推荐文章于 2024-05-18 20:31:13 发布
阅读量5.1k 收藏 82
点赞数 16
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdd1990shl/article/details/115496878
版权

一.Html:

京东购物车.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--<link rel="stylesheet" type="text/css" href="*.css"/>指定被link链接的css文档为本文档的样式描述文件-->
		<link rel="stylesheet" type="text/css" href="css/jd.css"/>
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		<script src="icon/iconfont.js"></script>
		<script  type="text/javascript" src="js/jd.js"></script>
		<!--在使用javascript标签<script>时，type最常用的就是text/javascript,表示添加引用-->
	</head>
	<body onload="checkTest7(),checkTest2()">
		<!--导航-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe604;</i>京东首页</a></li>
					<!--名称必须是iconfont-->
					<li><a href="">配送至：北京</a></li>
				</ul>
				<ul class="nav_ul2">
					<li><a href="">用户名</a><span>|</span></li>
					<li><a href="">我的订单</a><span>|</span></li>
					<li><a href="">我的京东</a><span>|</span></li>
					<li><a href="">京东会员</a><span>|</span></li>
					<li><a href="">企业采购</a><span>|</span></li>
					<li><a href="">客户服务</a><span>|</span></li>
					<li><a href="">网站导航</a><span>|</span></li>
					<li><a href="">关注京东</a><span>|</span></li>
					<li><a href="">手机京东</a></li>
				</ul>
			</div>
		</div>
		<!--搜索框-->
		<div class="search">
			<div class="warp">
				<img src="http://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@2x.png"/>
				<p>购物车</p>
				<div class="search-input">
					<input type="text" class="search-text" />
					<input type="button" value="搜索" class="search-but"/>
				</div>
			</div>
		</div>
		<!--标题-->
		<div class="title warp">
			<!--共用两个属性名,warp定义位置居中和宽度-->
			<h3>全部商品</h3>
			<div>
				<span>配送到</span>
				<select>
最低0.47元/天 解锁文章
gdd1990shl
关注
  • 16
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
[JavaScript实训] -- 制作简易的购物车页面
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
仿京东购物车网页页面.html
03-25
简单的网页还原，自己练习自写代码。实现了购物车静态页面的布局，样式等操作步骤。
制作京东购物车，包含html+js+css完整代码
m0_74937643的博客
05-18 1276
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
js实现购物车
m0_73481765的博客
06-30 3893
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
JS实现购物车中的动态操作（全选、统计数据、结账）
xiao祁的博客
08-16 6597
html代码; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link ...
京东购物车（html+css+js）
aa67567456的博客
12-05 9859
html+js部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的购物车</title> <link rel="stylesheet" type="text/css" href="css/css.css" /> <link rel="stylesheet" typ...
HTML+CSS+JS实操京东购物车
qq_45841233的博客
12-03 4317
HTML+CSS+JS实操京东购物车
京东首页Html+css+javascript代码
04-15
在本项目中，“京东首页Html+css+javascript代码”展示了如何使用前端开发的三大核心技术——HTML、CSS和JavaScript，来构建一个类似京东首页的网页。这个项目旨在帮助开发者理解购物网站的基本架构，并通过实践增强...
京东商城商品详情页面网页源码解析（静动态结合，包含CSS、HTML、Javascript、jQuery）
06-10
这个资源，"京东商城商品详情页面网页源码解析"，为初学者提供了一个实践平台，涵盖了前端开发中的关键技术：CSS、HTML、JavaScript和jQuery。让我们深入探讨这些知识点。 首先，HTML（HyperText Markup Language）...
html+css+js实现京东商城
02-26
在构建一个类似京东商城的网站时，HTML、CSS和JavaScript是三个核心的前端技术。HTML（HyperText Markup Language）用于创建网页结构，CSS（Cascading Style Sheets）用于设计页面样式，而JavaScript则负责交互性和...
京东首页html+css+js
07-07
【京东首页html+css+js】项目是一个初学者在学习完JavaScript后尝试重构京东首页的实践案例。这个项目主要涉及HTML、CSS和JavaScript这三种前端核心技术，旨在锻炼开发者对网页结构设计、样式控制以及交互实现的理解...
html css js网页设计案例介绍文档
最新发布
07-13
- 仿造京东这样的大型电商平台，使用 HTML 构建商品列表、购物车等功能，CSS 进行布局美化，JavaScript 实现动态效果如加载更多商品、用户交互等。 3. **哆啦A梦、宫崎骏、蜡笔小新、海绵宝宝主题网页** - 这些...
HTML5+CSS3+JavaScript 阶段性实践小案例——京东购物车
长夜漫漫，无心睡眠
12-31 3448
花了两三天时间将HTML4，HTML5，CSS2,CSS3大致学习了一下，现在来做一个网页实践一下，我是准备专攻后端开发的，所以前端只是浅尝辄止，定有不足，欢迎指正。 待更。。
京东购物车（动态）网页搭建，利用JavaScript实现
时间静止
04-09 4933
需要实现的功能： 单选操作、全选操作、单行删除操作、多行删除操作、价格结算 使用的方式 JavaScript 项目环境 win10+Hbuilder+chrome浏览器 项目结构 实现了所有功能的主界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>...
HTML+CSS+JS仿京东购物车页面动态效果
热门推荐
赵广陆
04-30 1万+
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd购物车页面的js 5 效果展示 1 用到的知识 前面静态页面知识：HTML+CSS仿京东购物车页面静态页面 1.1 js选择器 var fav=document....
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
原生JS实现购物车的简单结算及全选和单选效果
biaoyan01的博客
11-12 2755
JS实现购物车的简单结算及全选和单选效果 首先用JS写购物车之前，我们需要先从用户和商家的角度去思考需求到底有哪些以及涉及到知识点有哪些，然后再根据这些需求出发我们来写函数和事件就会简单一点。 先结合下图分析 我们大致会用到知识点有事件的委托，判断及数组的操作，数据类型的隐式转换，元素的增加和减少以及其逻辑思维，接下来就用编写的角度梳理下步骤 首先还是拿我们需要操作的Dom元素，document.querySelector() var oTable，oCheckaOne，ocheckAll，o’Sele
【web前端期末大作业】HTML+CSS+JavaScript仿京东购物网站制作 html静态网页设计制作 素材网页设计
01-05 436
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML结构代码 🧱2.C
js制作简易购物车页面
09-22
要使用JavaScript制作简易购物车页面，可以按照以下步骤进行： 1. 首先，在HTML页面的<head>标签中引入相应的JavaScript文件。例如，在这个例子中，可以在<head>标签中添加以下代码： ```html <script type="text/javascript" src="js/shopping.js"></script> ``` 2. 接下来，在JavaScript文件中定义所需的函数。在这个例子中，有四个函数：close_plan()、collection()、del()和accounts()。这些函数分别处理关闭窗口、移入收藏、删除商品和结算的操作。 3. 在HTML页面中，找到适当的元素并将相关的JavaScript函数与之关联。例如，在这个例子中，<span>元素上的onclick事件与close_plan()函数相关联，<li>元素上的onclick事件与collection()和del()函数相关联，<span>元素上的onclick事件与accounts()函数相关联。 4. 最后，可以根据需求自定义弹出窗口的提示信息。在这个例子中，使用了confirm()函数来显示提示框，并根据用户的选择弹出相应的提示信息。 以上是使用JavaScript制作简易购物车页面的基本步骤。根据具体需求，可以通过修改JavaScript函数来实现更多功能，如添加商品、修改数量等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值