给静态页面上使用JS实现动态页面

时间:2021-11-24 来源:未知网络 作者:996建站网

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

首先使用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"></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>

		<!--标题菜单结束-->

		<!--商品详情展示开始-->
		<div class="info warp">
			<ul>
				<li class="info_1">
					<input type="checkbox"  name="inname" onclick="oncktest2()"/>
				</li>
				<li class="info_2"><img src="../img/img2.jpg" width="80px" /></li>
				<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a href="">          电脑</a></li>  <br />
				<li class="info_5">¥159.99</li>
				<li class="info_6">
					<button  onclick="oncktest3(this,1),oncktest2()">-</button>
					<input type="text" name="" id="iname" value="1" />
					<button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button>
				</li>
				<li class="info_7">¥182.5</li>
				<li>
					<a onclick="sancu(this)">删除</a>
					<br />
					<a>已到我的关注</a>

				</li>
			</ul>

		</div>
		<div class="info warp">
			<ul>
				<li class="info_1">
					<input type="checkbox" name="inname" onclick="oncktest2()"/>
				</li>
				<li class="info_2"><img src="../img/img3.jpg" width="80px" /></li>
				<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a href="">         洗衣液</a></li>
				<li class="info_5">¥159.99</li>
				<li class="info_6">
					<button onclick="oncktest3(this,1),oncktest2()">-</button>
					<input type="text" name="" id="iname" value="1" />
					<button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button>
				</li>
				<li class="info_7">¥190</li>
				<li>
					<a onclick="sancu(this)">删除</a>
					<br />
					<a>已到我的关注</a>

				</li>
			</ul>

		</div>
		<div class="info warp">
			<ul>
				<li class="info_1">
					<input type="checkbox" name="inname" onclick="oncktest2()"/>
				</li>
				<li class="info_2"><img src="../img/img1.jpg" width="80px" /></li>
				<li class="info_3"><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li class="info_4"><a href="">颜色:灰色+粉红</a></li>
				<li class="info_5">¥159.99</li>
				<li class="info_6">
					<button onclick="oncktest3(this,1),oncktest2()	">-</button>
					<input type="text" name="" id="iname" value="1" />
					<button class="bot" onclick="oncktest3(this,2),oncktest2()">+</button>
				</li>
				<li class="info_7">¥200</li>
				<li>
					<a onclick="sancu(this)">删除</a>
					<br />
					<a>已到我的关注</a>

				</li>
			</ul>

		</div>
		<!--结算开始-->

		<div class="balance warp">

			<ul class="balance_ul1">
				<li>

					<input type="checkbox" name="inname" id="" value="" onclick="oncktest1(this)"/> 全选
				</li>
				<li><a>删除选中商品</a></li>
				<li><a>移到我的关注</a></li>
				<li><a>清除下柜商品</a></li>
			</ul>

			<ul class="balance_ul2">

				<li>已经选择<span id="qqq" onclick="oncktest2()">0</span>件商品</li>
				<li>总价 <span id="ppp" onclick="oncktest2()">¥0</span></li>
				<li>
					<button class="butt">去结算</button>

				</li>

			</ul>

		</div>

		<!--结算结束-->

	</body>

</html>

给静态页面上使用JS实现动态页面插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序