电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面

最新推荐文章于 2024-07-03 21:45:00 发布

weixin_39558521

最新推荐文章于 2024-07-03 21:45:00 发布

阅读量2.4k

点赞数 2

文章标签：电脑端京东的我的订单html+css页面

本文介绍了如何使用JavaScript实现电脑端京东我的订单页面的动态效果，包括全选/取消全选功能、商品数量加减按钮的交互、总价动态计算以及删除功能。通过监听事件并操作DOM节点，实现了页面的实时更新。

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

首先我们做的京东购物车的案例

首先使用css和html创建静态页面代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>jd 购物车</title>

		<link rel="stylesheet" type="text/css" href="../css/guifan.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="jss.js">
			
		</script>
		
		
	</head>




	<body>
		<!--导航开始-->
		<div class="nva">

			<div class="warp">

				<ul class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe616;</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="ssearch_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="inname" onclick="oncktest1(this)"/> 全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>

		</div>

		<!--标题菜单结束-