html+css+javascript 网页设计 从入门到精通_[网页编程] HTML+CSS+JavaScript 购物车搭建实操...

最新推荐文章于 2024-06-25 09:47:40 发布
最新推荐文章于 2024-06-25 09:47:40 发布
阅读量603 收藏 11
点赞数 2
文章标签： JavaScript 页面交互 动态更新 按钮事件 DOM操作

2f90daefdf7c296672c8aeb5ad70d031.png

之前的实操,是通过HTML+CSS实现了页面的呈现,但是页面仍旧是静态的,不能点击相关的按钮实现相关的效果,学了JavaScript之后,我们就可以对页面进行优化,具体效果如下

1c37e4ddd9d49d7dabafecf59fb82eea.gif

实现代码

CSS:

.

JavaScript

//获得所有的多选框对象

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/jd.css"/>
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		
		<script type="text/javascript" src="js/jd.js" ></script>
	
		
	</head>
	<body>
		
		<!--导航开始-->
		  
		  <div class="nav">
		  	
		  	
		  	 <div class="warp">
		  	 	
		  	 	  <ul class="nav_ul1">
		  	 	  	<li><a href=""><i class="iconfont">&#xe6d3;</i> 京东首页</a></li>
		  	 	  	<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="img/logo.jpg" />
		  	  	  
		  	  	  
		  	  	  <div class="search_div">
		  	  	  	 
		  	  	  	  <input type="text" class="search_text" />
		  	  	  	
		  	  	  	  <input type="button" value="搜索"  class="search_but"/>
		  	  	  	
		  	  	  </div>
		  	  	
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--搜索框结束-->
		
		<!--标题开始-->
		  <div class="title warp">
		  	
		  	  <h3>全部商品</h3>
		  	   
		  	  <div>
		  	  	 
		  	  	 <span>配送到</span>
		  	  	
		  	  	<select>
		  	  		<option>昌平区</option>
		  	  		
		  	  		<option>顺义区</option>
		  	  		
		  	  		<option>大兴区</option>
		  	  		
		  	  		<option>朝阳区</option>
		  	  		
		  	  		<option>昌平区</option>
		  	  		
		  	  		
		  	  	</select>
		  	  	
		  	  </div>
		  	
		  </div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		  <div class="tips warp">
		  	
		  	 <ul>
		  	 	<li>
		  	 		<input type="checkbox" name="fav" id="all" onclick="checkTest1(this),checkTest2()"/>
		  	 		全选
		  	 	</li>
		  	 	<li>商品</li>
		  	 	<li>单价</li>
		  	 	<li>数量</li>
		  	 	<li>小计</li>
		  	 	<li>操作</li>
		  	 </ul>
		  	
		  	
		  </div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		  <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox"   name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  </div>
		
		 <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		  
		   <div class="info warp">
		  	
		  	  <ul>
		  	  	<li class="info_1"><input type="checkbox" name="fav"  onclick="checkTest2()"/> </li>
		  	  	<li class="info_2"> <img src="img/img1.jpg" width="80px"/> </li>
		  	  	<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
		  	  	<li class="info_4"><a>颜色：灰色+粉红</a> </li>
		  	  	<li class="info_5">182.5</li>
		  	  	<li class="info_6">
		  	  		<button onclick="checkTest3(this,1),checkTest2()">-</button>
		  	  		<input type="text" name="" id="" value="1" />
		  	  		<button class="bot" onclick="checkTest3(this,2),checkTest2()">+</button>
		  	  		
		  	  	</li>
		  	  	<li class="info_7">￥182.5</li>
		  	  	<li>
		  	  		<a href="javascript:viod(0)" onclick="checkTest4(this),checkTest2()">删除</a><br />
		  	  		<a>已到我的关注</a>
		  	  	</li>
		  	  </ul>
		  	
		  	
		  </div>
		<!--商品详情展示结束-->
		
		<!--结算开始-->
		
	   <div class="balance warp">
	   	
	   	   <ul class="balance_ul1">
	   	   	<li>
	   	   		
	   	   		<input type="checkbox" name="fav" id="" value=""  onclick="checkTest1(this),checkTest2()"/>
	   	   		全选
	   	   	</li>
	   	   	<li><a>删除选中商品</a></li>
	   	   	<li><a>移到我的关注</a></li>
	   	   	<li><a>清除下柜商品</a></li>
	   	   </ul>
	   	   
	   	   <ul class="balance_ul2">
	   	   	
	   	   	 <li>已经选择<span id="snum">0</span>件商品</li>
	   	   	 <li>总价 <span id="zongz">￥0</span></li>
	   	   	 <li>
	   	   	 	<button class="butt">去结算</button>
	   	   	 	
	   	   	 </li>
	   	   	
	   	   </ul>
	   	
	   	
	   </div>
		
		
		<!--结算结束-->
	</body>
</html>
weixin_39672011
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
购物平台网页（HTML+CSS+JavaScript）
05-07
购物平台网页（HTML+CSS+JavaScript）
购物车删除按钮
dada_master的博客
11-05 1829
HTML 购物车  全选 商品 单价 数量 小计 操作 Casi
web网页制作与实现 html+css+javascript+jquery+bootstarp响应式美食网站设计与实现
最新发布
VX_WJ88950106的博客
06-25 338
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV...
Html购物车
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
用JavaScript+html+css制作当当购物车
热门推荐
weixin_46409887的博客
03-13 2万+
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{width: 810px; margin: 0 auto; font-family: "微软雅黑";} .logo{margin: 10px 0;} .logo span{ display: inline-block...
HTML淘宝购物车页面的实现
qq_46007633的博客
03-22 1万+
仿照淘宝购物车。主要包括以下知识，超级简单，没使用CSS，很多功能没有实现，只是一个仿造的购物车页面。 使用div标签，将整个页面划分为上中下相应的几个模块。 使用高级标签，包含<caption>标题和<thead>表头<tbody>主体以及<tfoot>表尾，对表格进行横向分组，将淘宝购物车分成相应的几部分。 列出几个小标题，比如单价、数量、金额、操作等。 根据确定的列，使用相应的图像标签、超链接、表单域等
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 1万+
HTML+CSS+JavaScript实现网络购物车
html+css网站模板网页设计源码-html商城网页设计模板.zip
05-10
HTML和CSS是构建网页设计的基础，此资源提供了一个完整的HTML商城网页设计模板，适用于初学者和专业人士进行网页制作。这个模板包含了一系列预先设计的页面结构和样式，可以帮助快速搭建一个功能齐全、外观吸引人的...
计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md
08-10
- **项目目标**: 作为计算机专业学生的毕业设计或者HTML5期末考核大作业，该项目旨在帮助学生掌握基本的前端开发技能，包括HTML、CSS以及JavaScript的基础知识，并通过实际项目的实践加深理解。 #### 2. 技术栈 - *...
html+css+Js超级炫酷的网页设计智慧商城.zip
09-27
在互联网技术日新月异的今天，网页设计已经成为企业展示形象、提供服务的重要手段。本文将深入剖析一个基于HTML+CSS+JS实现的超级炫酷智慧商城项目，旨在帮助读者理解如何运用这三种核心技术来构建一个功能齐全、...
前端购书网站源码（HTML+CSS+JavaScript）.rar
10-20
这是一个关于前端开发的项目，主要使用HTML、CSS和JavaScript技术构建了一个购书网站的源代码。这个项目旨在帮助学习者理解和实践网页制作的基本流程，同时展示如何将静态设计转化为交互式的用户界面。以下是对这个...
JavaScript网页购物车
weixin_67235801的博客
03-12 3780
网页购物车功能的实现
HTML+JS（购物车案例）
2301_77638787的博客
08-21 2722
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易
京东首页制作html+css+js
weixin_57152189的博客
04-04 6412
index.css代码。
HTML+CSS仿写京东页面附代码（web前端大作业）
m0_62437669的博客
03-25 6846
学习前端时间不多，看了两晚上就开始赶实训作业，大家看看就行。相关资源可以在主页资源查看。
HTML购物车示例（勾选、删除、添加和结算功能）
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
05-05 9887
以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID`以下是一个简单的HTML购物车示例，包含勾选、删除、添加和结算功能。结算功能使用PHP实现，可以获取选中商品的ID。
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
weixin_64208498的博客
04-10 4033
location实现页面跳转，forEach实现数据的遍历渲染，固定定位，背景渐变
原生html+js+css添加购物车效果
Dreamweaver_Bob的博客
03-06 1620
【代码】原生html+js+css添加购物车效果。
京东购物车网页(静态)搭建
时间静止
03-22 7938
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码（京东购物车5.html） <!DOCTYPE html> <html> &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值