JavaScript? ????? ???? ?? ???? ??? ?? ??
? ????? JavaScript ?? ????? ???? ??? ?? ?? ??? ?????.
??? ??? 4?? JS ??? ???? ????? ?? ??? ???? ???? ??????.
?? ??? ?? list.php ??, ?? ??? ?? cookie.js ??, ?? ??? ??? ??
index.js ??, ?? ??? ?? ??? ?? server.js ??? ???????.
cart.php ??? ???? ???? ????, cart.js ??? ????? ??????.
??? ?? ?? ??? list.php ??:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品列表頁(yè)面</title>
<!--商品列表樣式表-->
<style>
h2{
text-align: center;
}
a{
text-decoration: none;
}
.mycar{
border: 1px solid #d4d4d4;
width: 160px;
background-color: #d4d4d4;
font-family: 微軟雅黑,宋體;
}
dl{
float: left;
border: 1px solid #d4d4d4;
margin-left: 10px;
margin-top: 20px;
}
.m1{
margin-left: 35%;
font-family: 微軟雅黑,宋體;
font-size: 16px;
font-weight: bolder;
display: block;
}
.m2{
font-size: 10px;
color: #0000FF;
margin-top: 3%;
margin-left: 33%;
display:block;
line-height: 14px;
}
.m3{
color: red;
font-weight: bolder;
font-size: 18px;
display: block;
line-height: 14px;
text-align: left;
}
.m4{
background-color: crimson;
font-weight: bolder;
color: white;
display: block;
line-height: 14px;
margin-left: 30%;
}
@media only screen and (min-width: 410px){
dl{
margin: 20px 8px;
}
}
@media only screen and (min-width: 350px) and (max-width: 410px){
dl{
margin: 20px 8px;
}
}
}
@media only screen and (max-width: 350px){
dl{
margin: 20px 8px;
}
}
</style>
<!--cookie操作的js庫(kù)-->
<script src="cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container" >
<h2>商品展示列表</h2>
<div class="mycar">
<a href="cart.php">我的購(gòu)物車</a><i style="margin-left: 10px; color: red; font-weight: bolder;" id="ccount">0</i>
</div>
<div class="list">
<dl pid="1001">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg"/>
</dt>
<dd class="m1">智能手表</dd>
<dd class="m2">純機(jī)械，超酷表帶</dd>
<dd class="m3">￥<span>3567</span></dd>
<dd>
<button class="m4">加入購(gòu)物車</button>
</dd>
</dl>
<dl pid="1002">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58297f4735d73302.jpg" />
</dt>
<dd class="m1">智能手機(jī)</dd>
<dd class="m2">大屏幕，超高配置</dd>
<dd class="m3">￥<span>2999</span></dd>
<dd>
<button class="m4">添加購(gòu)物車</button>
</dd>
</dl>
<dl pid="1003">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/58298020ad204771.jpg" />
</dt>
<dd class="m1">平板電腦</dd>
<dd class="m2">新上市，值得擁有</dd>
<dd class="m3">￥<span>1899</span></dd>
<dd>
<button class="m4">添加購(gòu)物車</button>
</dd>
</dl>
<dl pid="1004">
<dt>
<img src="https://img.php.cn/upload/course/000/000/008/582980398200b667.jpg" />
</dt>
<dd class="m1">超極本</dd>
<dd class="m2">夠輕薄，夠流暢</dd>
<dd class="m3">￥<span>4999</span></dd>
<dd>
<button class="m4">添加購(gòu)物車</button>
</dd>
</dl>
</div>
</div>
<!--
描述：數(shù)據(jù)訪問層，操作本地?cái)?shù)據(jù)的模塊
-->
<script type="text/javascript" src="server.js"></script>
<!--
描述：本頁(yè)面的js操作
-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>??? ???? cart.php ?? ?? ??:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購(gòu)物車</title>
<!--購(gòu)物車樣式表-->
<style>
h2{
text-align: center;
}
table{
margin: auto;
width: 90%;
border-color: inherit;
}
th{
color: white;
font-weight: bold;
font-family: 微軟雅黑,宋體;
}
img{
height: 60%;
display: block;
margin: auto;
}
input{
text-align: center;
font-weight: bold;
}
button{
font-weight: bold;
font-size: 13px;
}
</style>
<!--操作cookie的js文件-->
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<div class="container">
<h2>購(gòu)物車</h2>
<h3><a href="list.php">返回商品列表頁(yè)面</a></h3>
<table id="table" border="1" cellspacing="0" cellpadding="0" class="hide">
<thead>
<tr style="background-color: #87adbf;">
<th>
<input type="checkbox" id="allCheck" class="ck" />全選
</th>
<th>圖片</th>
<th>描述</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
<th>小計(jì)</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!--
<tr>
<td><input type="checkbox" class="ck" /></td>
<td>
<img src="https://img.php.cn/upload/course/000/000/008/58297ff26fd94666.jpg" alt="" />
</td>
<td>純機(jī)械，超酷表帶</td>
<td>
<button class="down">-</button><input type="text" value="1" readonly="readonly" /><button class="up">+</button>
</td>
<td>￥<span>3567</span></td>
<td>￥<span>3567</span></td>
<td><button class="del" >刪除</button></td>
</tr>
-->
</tbody>
</table>
<div class="box" id="box"></div>
<h2 id="h2" class="">總價(jià)格：￥<span id="totalPrice">0</span></h2>
</div>
<script src="server.js" type="text/javascript" charset="utf-8"></script>
<!--操作購(gòu)物車頁(yè)面的cart.js-->
<script src="cart.js"></script>
</body>
</html>?? ?? JavaScript ??? ?? ?? ???? ??? ?????. ??? ??? ?? ??? ??? ? ? ????.
? ??? ??? ?? ??? ??? ?? ????.
