JavaScript實現(xiàn)網(wǎng)頁購物車
更新時間：2022年06月16日 15:14:16 作者：客行.
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天是JavaScript的一個匯總，最近小編把自己曾經(jīng)寫過的JavaScript 網(wǎng)頁購物車項目給整理了一下，大家可以看一下，然后自己也可以寫一個網(wǎng)頁購物車項目噢，然后我們的JavaScript的學(xué)習(xí)也到此結(jié)束啦！下周開始給大家更新 新的課程。
一.登錄界面
登錄界面：1.賬號：必須11位數(shù)字，以1開頭
2.密碼：6-8位數(shù)字
3.驗證碼：點擊驗證碼可以切換
4.點注冊注冊賬號
5.登錄成功后跳轉(zhuǎn)到商城界面
下方是登錄界面的圖片 ，登錄的界面代碼放在下方給大家
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>登錄界面</title>
?? ??? ?<style>
?? ??? ?/* 登錄 */
?? ??? ? ? /* 設(shè)置背景圖片大小 */
?? ??? ??? ?body{
?? ??? ??? ??? ?/* 設(shè)置背景 */
?? ??? ??? ??? ?background-image: url(img/33.gif);
?? ??? ??? ? ? ?background-size: ?cover;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 100%;?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/* 設(shè)置表單 */
?? ??? ??? ? form{
?? ??? ??? ??? ? /* rgba透明色 */
?? ??? ??? ??? ? background: rgba(255,255,255,.1);
?? ??? ??? ??? ? /*絕對布局可四處移動,內(nèi)容有多大就多大 */
?? ??? ??? ??? ? position:absolute;
?? ??? ??? ??? ? padding: 30px 50px;
?? ??? ??? ??? ? left:55%;
?? ??? ??? ??? ? top:40%;
?? ??? ??? ??? ?border-radius: 10px;
?? ??? ??? ??? ?box-shadow: 3px 6px 10px black;
?? ??? ??? ? ? ?
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? #zcForm{
?? ??? ??? ??? ? position:absolute;
?? ??? ??? ??? ? left:55%;
?? ??? ??? ??? ? top:30%;
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? /* 設(shè)置input標(biāo)簽 */
?? ??? ??? ? input{
?? ??? ??? ??? ? /* 設(shè)置邊框 */
?? ??? ??? ??? ? border : 1px solid gray;
?? ??? ??? ??? ? border-radius:20px;
?? ??? ??? ??? ? /* 調(diào)節(jié)邊框的大小 */
?? ??? ??? ??? ? height:25px;
?? ??? ??? ??? ? width:200px;
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? .a{
?? ??? ??? ??? ? height:25px;
?? ??? ??? ??? ? width:100px;
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? .b{
?? ??? ??? ??? ? border-radius:0px;
?? ??? ??? ??? ? height:25px;
?? ??? ??? ??? ? width:45px;
?? ??? ??? ??? ? /* 間隔距離 */
?? ??? ??? ??? ? margin:0px 20px;
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? button{
?? ??? ??? ??? ? margin:20px 0px;
?? ??? ??? ??? ? width:70px;
?? ??? ??? ??? ? height:30px;
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? /* 注冊字體 */
?? ??? ??? ? .zc{
?? ??? ??? ??? ? position:absolute;
?? ??? ??? ??? ? left:80%
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? .bu{
?? ??? ??? ??? ? background:white;
?? ??? ??? ??? ? border-radius:10px;
?? ??? ??? ? }
?? ??? ??? ??
?? ??? ??? ? /* 注冊 */
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<form id="dlForm" onsubmit="return ?dlUser()">
?? ??? ?<table>
?? ??? ??? ?<!-- 標(biāo)題 -->
?? ??? ??? ?<tr>
?? ? ? ? ? <!-- style="text-align:center"設(shè)置居中 -->
?? ??? ??? ?<td style="text-align:center" colspan="2"><h3>歡迎來到漫野</h3></td>?
?? ??? ??? ?</tr>
?? ??? ??? ?
?? ??? ??? ?<!-- 用戶名 -->
?? ??? ??? ?<tr>
?? ? ? <td><img src="img/5.png" width="50px" height="50px"></td>?
?? ? ? <td><input id="userName" placeholder="請輸入賬號"></td>?
?? ??? ? ? </tr>
?? ??? ? ??
?? ??? ? ? <!-- 密碼 -->
?? ??? ? ? <tr>
?? ??? ? ? <td><img src="img/密碼.png" width="40px" height="40px"></td>?
?? ??? ? ? <td><input id="userPwd" placeholder="請輸入密碼"></td>?
?? ??? ? ? </tr>
?? ??? ? ??
?? ??? ? ? <!-- 驗證碼 -->
?? ??? ? ? <tr>
?? ??? ??? ? ? <td><img src="img/驗證碼.png" width="40px" height="40px"></td>
?? ??? ??? ? ? <td><input class="a" id="userYzm">
?? ??? ??? ? ? <!-- readonly不能修改 -->
?? ??? ??? ? ? <input id="yzm1" class="b" readonly onclick="yzm()"></td>
?? ??? ? ? </tr>
?? ??? ? ??
?? ??? ? ? <!-- 登錄按鈕 -->
?? ??? ? ? <tr>
?? ??? ? ? ?? ? <td colspan="2" style="text-align:center">
?? ??? ??? ??? ?<button class="bu"><a id="dl" onclick="dlUser()">登錄</a></button>
?? ??? ??? ? </td>
?? ??? ? ? </tr>
?? ??? ? ??
?? ??? ? ? <!-- 注冊賬號 -->
?? ??? ? ? <tr>
?? ??? ??? ? ? <td colspan="2"><a class="zc" onclick="zcUser()">注冊賬號</a></td>
?? ??? ? ? </tr>
?? ??? ? ?</table>
?? ??? ?</form>
?? ??? ?
<!-------------------------------------------------------------------------------------->
?? ??? ?<!-- 注冊表單 -->
?? ??? ?<form id="zcForm" onsubmit="return zcUser()">
?? ??? ??? ?<table>
?? ??? ??? ??? ?<!-- 標(biāo)題 -->
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td colspan="2" style="text-align:center"><h3>注冊漫野賬號</h3></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<!-- 用戶名 -->
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td><img src="img/5.png" width="50px" height="50px"></td>
?? ??? ??? ??? ??? ?<td ><input id="zcName" placeholder="請輸入注冊賬號"></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?<!-- 密碼 -->
?? ??? ??? ? ? ?<tr>
?? ??? ??? ? ? ??? ?<td><img src="img/密碼.png" width="40px" height="40px"></td>
?? ??? ??? ? ? ??? ?<td><input id="zcPwd" placeholder="請輸入注冊密碼"></td>
?? ??? ??? ? ? </tr>
?? ??? ??? ? ??
?? ??? ??? ??? ?<!-- 郵箱-->
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td><img src="img/郵箱.png" width="40px" height="40px"></td>
?? ??? ??? ??? ??? ?<td ><input id="zcEm" placeholder="請輸入注冊郵箱號"></td>
?? ??? ??? ??? ?</tr>
?? ? ? ? ? ? ? ?<!-- 驗證碼 -->
?? ? ? ? ? ? ? ?<tr>
?? ? ? ? ? ? ? ??? ?<td><img src="img/驗證碼.png" width="40px" height="40px"></td>
?? ? ? ? ? ? ? ??? ?<td><input class="a" id="zcYzm">
?? ? ? ? ? ? ? ??? ?<!-- readonly不能修改 -->
?? ? ? ? ? ? ? ??? ?<input class="b" readonly onclick="yzm()" id="zcYz"></td>
?? ? ? ? ? ? ? ?</tr>
?? ??? ??? ??? ?<!-- 注冊按鈕 -->
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td colspan="2" style="text-align:center">
?? ??? ??? ??? ??? ?<button text="button" onclick="zcUser()" ?class="bu">注冊</button></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ?<td colspan="2"><span onclick="balck()">返回</span></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ?</table>
?? ??? ?</form>
?? ??? ?
<!----------------------------------------------------------------------------------------- -->?? ?
?? ??? ?
?? ??? ?<script>
?? ??? ?// 登錄方法
?? ?
?? ??? ?// 驗證碼方法
?? ??? ? ? window.onload=()=>{
?? ??? ??? ?zcForm.style.display="none";
?? ??? ??? ?yzm();
?? ??? ??? ?
?? ??? ? }
?? ??? ??
?? ??? ? ? //點擊驗證碼切換驗證碼
?? ??? ? ? function yzm(){
?? ??? ??? ? ? var yz=document.getElementsByClassName("b");
?? ??? ??? ? ? var i=Math.floor(Math.random()*10)
?? ??? ??? ? ? var j=Math.floor(Math.random()*10)
?? ??? ??? ? ? var k=Math.floor(Math.random()*10)
?? ??? ??? ? ? var l=Math.floor(Math.random()*10)
?? ??? ??? ??
?? ??? ??? ? ? for(let f of yz){
?? ??? ??? ? ? f.value=i+""+j+""+k+""+l+"";
?? ??? ??? ? ? }
?? ??? ? ? }
?? ??? ?
?? ??? ? ? ?// 驗證用戶名 用戶密碼 驗證碼是否滿足要求，滿足的話
?? ??? ??? ?function dlUser(){
?? ??? ??? ??? ??
?? ??? ??? ? ?// 拿到用戶 密碼 驗證碼的值
?? ??? ??? ? ?var d1=userName.value;
?? ??? ??? ? ?var d2=userPwd.value;
?? ??? ??? ? ?var d3=userYzm.value;
?? ??? ??? ? ?// 拿到驗證框的值
?? ??? ??? ? var ?yzm=yzm1.value;
?? ??? ??? ? ?
?? ??? ??? ? ?// 正則
?? ??? ??? ? ?var rexName=/^\d{11}$/;
?? ??? ??? ? ?var rexPwd=/^\w{6,8}$/;
?? ??? ??? ? ?// 判斷用戶名和用戶密碼 驗證碼是否滿足驗證
?? ??? ??? ? ?if(rexName.test(d1)&&rexPwd.test(d2)&&d3==yzm){
?? ??? ??? ??? ? ?// 登錄成功以后跳轉(zhuǎn)界面
?? ??? ??? ??? ? ?window.open("main.html");
?? ??? ??? ??? ? ?return true;
?? ??? ??? ? ?}else{
?? ??? ??? ??? ? ?alert("用戶賬號和密碼或者驗證碼不正確");
?? ??? ??? ? ?return false;
?? ??? ??? ? ?}
?? ??? ??? ?}?? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?// 注冊的方法
?? ??? ??? ?// 1.覆蓋原本的表單
?? ??? ??? ?function zcUser(){
?? ??? ??? ??? ?// 登錄界面不顯示
?? ??? ??? ??? ? dlForm.style.display="none";
?? ??? ??? ??? ? // 注冊界面顯示出來
?? ??? ??? ??? ? zcForm.style.display="block";
?? ??? ??? ??? ? // 拿到用戶框，密碼框，郵箱，驗證碼；
?? ??? ??? ??? ? var name=zcName.value;
?? ??? ??? ??? ? var pwd=zcPwd.value;
?? ??? ??? ??? ? var email=zcEm.value;
?? ??? ??? ??? ? var yzm=zcYzm.value;
?? ??? ??? ??? ? // 拿到驗證碼的框里的值
?? ??? ??? ??? ? var zcyzm=zcYz.value;
?? ??? ??? ??? ? // 正則匹配
?? ??? ??? ??? ? var rexName=/^\d{11}$/;
?? ??? ??? ??? ? var rexPwd=/^\w{6,8}$/;
?? ??? ??? ??? ? var rexEm=/^\w+[.]\w+@\w+[.]\w+$/;
?? ??? ??? ??? ??
?? ??? ? if(rexName.test(name)&&rexPwd.test(pwd)&&rexEm.test(email)&&yzm==zcyzm){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ? return true;
?? ??? ??? ??? ? }else{?? ??
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ? return false;
?? ??? ??? ??? ? }
?? ??? ??? ??? ??
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?function balck(){
?? ??? ??? ??? ?// 登錄界面顯示
?? ??? ??? ??? ? dlForm.style.display="block";
?? ??? ??? ??? ? // 注冊界面不顯示出來
?? ??? ??? ??? ? zcForm.style.display="none";
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>二.商城中心和購物車
商城中心:
1.點擊商品下方的加入購物車，可以添加到我們的購物車中
2.點擊上方的菜單欄中的購物車可以到購物車，點擊商城，也又可以回到商城
購物車:
1.點擊刪除商品，可以刪除該商品
2.點擊全選按鈕，或者點擊多選框，點擊刪除商品，也可以刪除商品，點擊全選 ，在點擊所選商品，可以直接清空購物車
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>商城</title>
?? ??? ?
?? ??? ?<style>
?? ??? ?#img{
?? ??? ??? ?width:400px;
?? ??? ??? ?height:300px;
?? ??? ??? ?/* url:位置 */
?? ??? ??? ?background:url("img/2.jpg") center/cover;
?? ??? ??? ?position:absolute;
?? ??? ??? ?left:36%
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ? * {
?? ??? ? ? ? ? ? ? ?padding: 0px;
?? ??? ? ? ? ? ? ? ?margin: 0px;
?? ??? ? ? ? ? ? ? ?list-style: none;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?.nav {
?? ??? ? ? ? ? ? ? ?height: 50px;
?? ??? ? ? ? ? ? ? ?background: black;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?.nav>li {
?? ??? ? ? ? ? ? ? ?color: white;
?? ??? ? ? ? ? ? ? ?float: left;
?? ??? ? ? ? ? ? ? ?line-height: 50px;
?? ??? ? ? ? ? ? ? ?padding: 0px 30px;
?? ??? ? ? ? ? ? ? ?position: relative;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ?
?? ??? ? ? ? ? ?li {
?? ??? ? ? ? ? ? ? ?position: relative;
?? ??? ? ? ? ? ? ? ?text-align: center;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?.nav>li:hover {
?? ??? ? ? ? ? ? ? ?background:;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?.nav ul {
?? ??? ? ? ? ? ? ? ?background: green;
?? ??? ? ? ? ? ? ? ?width: 150px;
?? ??? ? ? ? ? ? ? ?position: absolute;
?? ??? ? ? ? ? ? ? ?left: 0px;
?? ??? ? ? ? ? ? ? ?/* display: none;*/
?? ??? ? ? ? ? ? ? ?opacity: 0;
?? ??? ? ? ? ? ? ? ?transform: rotate(0deg) scale(.5);
?? ??? ? ? ? ? ? ? ?transition: .2s;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?li li:hover {
?? ??? ? ? ? ? ? ? ?background: yellow;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?.nav>li:hover ul {
?? ??? ? ? ? ? ? ? ?/*display: block;*/
?? ??? ? ? ? ? ? ? ?opacity: 1;
?? ??? ? ? ? ? ? ? ?transform: rotate(360deg) scale(1);
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?li::after {
?? ??? ? ? ? ? ? ? ?content: "";
?? ??? ? ? ? ? ? ? ?position: absolute;
?? ??? ? ? ? ? ? ? ?width: 0;
?? ??? ? ? ? ? ? ? ?height: 5px;
?? ??? ? ? ? ? ? ? ?background: white;
?? ??? ? ? ? ? ? ? ?bottom: 10px;
?? ??? ? ? ? ? ? ? ?left: 50%;
?? ??? ? ? ? ? ? ? ?transform: translate(-50%, 0);
?? ??? ? ? ? ? ? ? ?transition: 1s;
?? ??? ? ? ? ? ?}
?? ??? ?
?? ??? ? ? ? ? ?li:hover::after {
?? ??? ? ? ? ? ? ? ?width: 80%;
?? ??? ? ? ? ? ?}
?? ??? ??? ??? ?/* 搜索框 */
?? ??? ??? ??? ?#ss{
?? ??? ??? ??? ??? ?/* 設(shè)置邊框 */
?? ??? ??? ??? ??? ?border : 1px solid gray;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?/* 調(diào)節(jié)邊框的大小 */
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?width:500px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:30%;
?? ??? ??? ??? ??? ?top:60px;
?? ??? ??? ??? ??? ?font-size:20px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?/* 搜索圖片 */
?? ??? ??? ??? ?#simg{
?? ??? ??? ??? ??? ?width:40px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:59%;
?? ??? ??? ??? ??? ?top:60px;
?? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ? ? ?/* 動態(tài)圖 */
?? ??? ??? ??? ?#img{
?? ??? ??? ??? ??? ?/* 設(shè)置div id名為img設(shè)置背景圖片 */
?? ??? ??? ??? ??? ?width:600px;
?? ??? ??? ??? ??? ?height:400px;
?? ??? ??? ??? ??? ?/* url:位置 */
?? ??? ??? ??? ??? ?background:url("img/1.gif") center/cover;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:15%;
?? ??? ??? ??? ??? ?top:20%;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?/* 漫野字體設(shè)置 ?*/
?? ??? ??? ??? ?#my{
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:20%;
?? ??? ??? ??? ??? ?top:7%;
?? ??? ??? ??? ?}
/* -----------------------第一個商品--------------------------------------- */
?? ??? ??? ??? ?/* 第一個商品div */
?? ??? ??? ??? ?#divSp1{
?? ??? ??? ??? ??? ?width:350px;
?? ??? ??? ??? ??? ?height:500px;
?? ??? ??? ??? ? ? ?border : 0px solid #9D9D9D;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:10%;
?? ??? ??? ??? ??? ?top:100%;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?/* 第一個物品img */
?? ??? ??? ? ? #sp1{
?? ??? ??? ??? ? ? width:300px;
?? ??? ??? ??? ? ? height:300px;
?? ??? ??? ??? ? ? position:absolute;
?? ??? ??? ??? ? ? left:20px;
?? ??? ??? ??? ? ? top:20px;
?? ??? ??? ? ? }
?? ??? ??? ? ? /* 購物車按鈕 */
?? ??? ??? ??? ? #gwc1{
?? ??? ??? ??? ??? ? width:100px;
?? ??? ??? ??? ??? ? height:40px;
?? ??? ??? ??? ??? ? position:absolute;
?? ??? ??? ??? ??? ? left:140px;
?? ??? ??? ??? ??? ? top:440px;
?? ??? ??? ??? ??? ? border-radius:20px;
?? ??? ??? ??? ??? ? background:white;
?? ??? ??? ??? ??? ??
?? ??? ??? ??? ? }
?? ??? ??? ?/* 商品第一個文字 */
?? ??? ??? ?#wz1{
?? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:40px;
?? ??? ??? ??? ?top:350px;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/* 商品價格 */
?? ??? ??? ?#jg1{
?? ??? ??? ?width:300px;
?? ??? ??? ?height:40px;
?? ??? ??? ?position:absolute;
?? ??? ??? ?left:160px;
?? ??? ??? ?top:405px;
?? ??? ??? ?}
?? ??? ??? ?
/*---- ------------------------第二個商品---------------------------------- */
? ? ? ? ? ? ? ? #divSp2{
?? ??? ??? ??? ??? ?width:350px;
?? ??? ??? ??? ??? ?height:500px;
?? ??? ??? ??? ??? ?border : 0px solid #9D9D9D;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:40%;
?? ??? ??? ??? ??? ?top:100%;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?#sp2{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:300px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:20px;
?? ??? ??? ??? ??? ?top:20px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?/* 購物車按鈕 */
?? ??? ??? ??? ? #gwc2{
?? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:140px;
?? ??? ??? ??? ?top:440px;
?? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ?background:white;
?? ??? ??? ??? ? }
?? ??? ??? ??? ??
?? ??? ??? ??? ? /* 商品第一個文字 */
?? ??? ??? ??? ? #wz2{
?? ??? ??? ??? ? ?? ?width:300px;
?? ??? ??? ??? ? ?? ?height:40px;
?? ??? ??? ??? ? ?? ?position:absolute;
?? ??? ??? ??? ? ?? ?left:40px;
?? ??? ??? ??? ? ?? ?top:350px;
?? ??? ??? ??? ? }
?? ??? ??? ??? ??
?? ??? ??? ??? ? /* 商品價格 */
?? ??? ??? ??? ? #jg2{
?? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ?top:405px;
?? ??? ??? ??? ? }
?? ??? ??? ??? ??
/*------------------------第三個----------------------------------------------- */
? ? ? ? ? ? ? ? ? ?/* div標(biāo)簽 */
?? ??? ??? ??? ??? ?#divSp3{
? ? ? ? ? ? ? ? ? ? ?? ?width:350px;
? ? ? ? ? ? ? ? ? ? ?? ?height:500px;
? ? ? ? ? ? ? ? ? ? ?? ?border : 0px solid #9D9D9D;
? ? ? ? ? ? ? ? ? ? ?? ?border-radius:20px;
? ? ? ? ? ? ? ? ? ? ?? ?position:absolute;
? ? ? ? ? ? ? ? ? ? ?? ?left:70%;
? ? ? ? ? ? ? ? ? ? ?? ?top:100%;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? /* 圖片 */
? ? ? ? ? ? ? ? ? ? #sp3{
? ? ? ? ? ? ? ? ? ? ?? ?width:300px;
? ? ? ? ? ? ? ? ? ? ?? ?height:300px;
? ? ? ? ? ? ? ? ? ? ?? ?position:absolute;
? ? ? ? ? ? ? ? ? ? ?? ?left:20px;
? ? ? ? ? ? ? ? ? ? ?? ?top:20px;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? /* 購物車按鈕 */
? ? ? ? ? ? ? ? ? ? ?#gwc3{
? ? ? ? ? ? ? ? ? ? width:100px;
? ? ? ? ? ? ? ? ? ? height:40px;
? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? left:140px;
? ? ? ? ? ? ? ? ? ? top:440px;
? ? ? ? ? ? ? ? ? ? border-radius:20px;
? ? ? ? ? ? ? ? ? ? background:white;
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ?/* 商品第一個文字 */
? ? ? ? ? ? ? ? ? ? ?#wz3{
? ? ? ? ? ? ? ? ? ? ??? ?width:300px;
? ? ? ? ? ? ? ? ? ? ??? ?height:40px;
? ? ? ? ? ? ? ? ? ? ??? ?position:absolute;
? ? ? ? ? ? ? ? ? ? ??? ?left:40px;
? ? ? ? ? ? ? ? ? ? ??? ?top:350px;
? ? ? ? ? ? ? ? ? ? ?}
?? ??? ??? ??? ??? ? /* 商品價格 */
?? ??? ??? ??? ??? ? #jg3{
?? ??? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ??? ??? ?top:405px;
?? ??? ??? ??? ??? ? }
?? ??? ??? ??? ??? ??
?/*------------------------第四個----------------------------------------------- */
?? ??? ??? ??? ??? ?/* div標(biāo)簽 */
?? ??? ??? ??? ??? ?#divSp4{
?? ??? ??? ??? ??? ?width:350px;
?? ??? ??? ??? ??? ?height:500px;
?? ??? ??? ??? ??? ?border : 0px solid #9D9D9D;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:65%;
?? ??? ??? ??? ??? ?top:18%;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? /* 圖片 */
?? ??? ??? ? ?#sp4{
?? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ?height:300px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:20px;
?? ??? ??? ??? ?top:20px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ??
?? ??? ??? ??? ?/* 購物車按鈕 */
?? ??? ??? ??? ? #gwc4{
?? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:140px;
?? ??? ??? ??? ?top:440px;
?? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ?background:white;
?? ??? ??? ??? ? }
?? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ?
?? ??? ??? ??? ?/* 商品第一個文字 */
?? ??? ??? ??? ? #wz4{
?? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:40px;
?? ??? ??? ??? ?top:350px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ? /* 商品價格 */
?? ??? ??? ??? ? #jg4{
?? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ?top:405px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?
?? ?
?? ?/*------------------------第五個----------------------------------------------- */
?? ??? ??? ??? ??? ??? ?/* div標(biāo)簽 */
?? ??? ??? ??? ??? ??? ?#divSp5{
?? ??? ??? ??? ??? ??? ?width:350px;
?? ??? ??? ??? ??? ??? ?height:500px;
?? ??? ??? ??? ??? ??? ?border : 0px solid #9D9D9D;
?? ??? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ??? ?left:10%;
?? ??? ??? ??? ??? ??? ?top:180%;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? /* 圖片 */
?? ??? ??? ??? ??? ?#sp5{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:300px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:20px;
?? ??? ??? ??? ??? ?top:20px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ??
?? ??? ??? ??? ??? ? /* 購物車按鈕 */
?? ??? ??? ??? ??? ? #gwc5{
?? ??? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:140px;
?? ??? ??? ??? ??? ?top:440px;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ?
?? ??? ??? ??? ??? ? ?/* 商品第一個文字 */
?? ??? ??? ??? ??? ?#wz5{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:100px;
?? ??? ??? ??? ??? ?top:350px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? /* 商品價格 */
?? ??? ??? ??? ??? ?#jg5{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ??? ?top:405px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ?/*------------------------第五個----------------------------------------------- */
?? ??? ??? ??? ??? ??? ?/* div標(biāo)簽 */
?? ??? ??? ??? ??? ??? ?#divSp6{
?? ??? ??? ??? ??? ??? ?width:350px;
?? ??? ??? ??? ??? ??? ?height:500px;
?? ??? ??? ??? ??? ??? ?border : 0px solid #9D9D9D;
?? ??? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ??? ?left:40%;
?? ??? ??? ??? ??? ??? ?top:180%;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? /* 圖片 */
?? ??? ??? ??? ??? ?#sp6{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:300px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:20px;
?? ??? ??? ??? ??? ?top:20px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ??
?? ??? ??? ??? ??? ? /* 購物車按鈕 */
?? ??? ??? ??? ??? ? #gwc6{
?? ??? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:140px;
?? ??? ??? ??? ??? ?top:440px;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ?
?? ??? ??? ??? ??? ? ?/* 商品第一個文字 */
?? ??? ??? ??? ??? ?#wz6{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:60px;
?? ??? ??? ??? ??? ?top:350px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? /* 商品價格 */
?? ??? ??? ??? ??? ?#jg6{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ??? ?top:405px;
?? ??? ??? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ?
?? ?/*------------------------第七個----------------------------------------------- */
?? ??? ??? ??? ??? ??? ?/* div標(biāo)簽 */
?? ??? ??? ??? ??? ??? ?#divSp7{
?? ??? ??? ??? ??? ??? ?width:350px;
?? ??? ??? ??? ??? ??? ?height:500px;
?? ??? ??? ??? ??? ??? ?border : 0px solid #9D9D9D;
?? ??? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ??? ?left:70%;
?? ??? ??? ??? ??? ??? ?top:180%;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? /* 圖片 */
?? ??? ??? ??? ??? ?#sp7{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:300px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:20px;
?? ??? ??? ??? ??? ?top:20px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ??
?? ??? ??? ??? ??? ? /* 購物車按鈕 */
?? ??? ??? ??? ??? ? #gwc7{
?? ??? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:140px;
?? ??? ??? ??? ??? ?top:440px;
?? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ? ? ? ? ? ? ? ? ? ? ? ?
?? ??? ??? ??? ??? ? ?/* 商品第一個文字 */
?? ??? ??? ??? ??? ?#wz7{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:60px;
?? ??? ??? ??? ??? ?top:350px;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ? /* 商品價格 */
?? ??? ??? ??? ??? ?#jg7{
?? ??? ??? ??? ??? ?width:300px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ??? ?top:405px;
?? ??? ??? ??? ??? ?}?? ??? ??? ?
/*---------------------------------表格------------------------------------------ */
?? ??? ??? ??? ?table{
?? ??? ??? ??? ??? ?border-top: 1px solid #333;
?? ??? ??? ??? ??? ?border-left: 1px solid #333;
?? ??? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ??? ?height:60px;
?? ??? ??? ??? ??? ?font-size:25px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/* 新增按鈕的大小 */
?? ??? ??? ??? ??? ?.tabelBu{
?? ??? ??? ??? ??? ??? ?width:60px;
?? ??? ??? ??? ??? ??? ?height:40px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0px;
?? ??? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/* 表格按鈕的大小 */
?? ??? ??? ??? ??? ?.tableBu1{
?? ??? ??? ??? ??? ??? ?width:60px;
?? ??? ??? ??? ??? ??? ?height:40px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0px;
?? ??? ??? ??? ??? ??? ?border-radius:20px;
?? ??? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/* 數(shù)量增加減按鈕操作*/
?? ??? ??? ??? ??? ?.tableBu2{
?? ??? ??? ??? ??? ??? ?width:20px;
?? ??? ??? ??? ??? ??? ?height:20px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0px;
?? ??? ??? ??? ??? ??? ?/* border-radius:20px; */
?? ??? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?td{
?? ??? ??? ??? ??? ?text-align:right;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?#delalll{
?? ??? ??? ??? ??? ?width:150px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?border:0px;
?? ??? ??? ??? ??? ?/* border-radius:20px; */
?? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?font-size:20px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?/* 熱銷商品 */
?? ??? ??? ??? ?#rx{
?? ??? ??? ??? ??? ?width:200px;
?? ??? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ??? ?background:white;
?? ??? ??? ??? ??? ?position:absolute;
?? ??? ??? ??? ??? ?left:160px;
?? ??? ??? ??? ??? ?top:700px;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div>
?? ??? ?<!-- 欄目 -->
?? ??? ?<ul class="nav">
?? ??? ? ? ? ? ?<li onclick="scMain()">商城</li>
?? ??? ??? ??? ?<li id="tz" onclick="fn1()">購物車</li>
?? ??? ??? ??? ?<li>收藏</li>
?? ??? ??? ??? ?<li>商品分類</li>
?? ??? ??? ??? ?<li>聯(lián)系客服</li>
?? ??? ?</ul>
?? ??? ?</div>
?? ??? ?
?? ??? ?<div id="divMain">
?? ??? ?<!-- 蕾姆老婆等你回家 -->
?? ??? ?<font size="6" id="my">漫野網(wǎng)</font>
?? ??? ?
?? ??? ?<!--搜索框-->
?? ??? ?<input id="ss" placeholder="冰墩墩"><img ?id="simg" src="img/搜索.png">
?? ??? ?
?? ??? ?
<!--第二個div------------------------------------------------------------------- -->
?? ??? ?
?? ??? ?<!-- 圖片切換 -->
?? ??? ?<div id="img"></div>
?? ??? ?<!-- 第一張商品圖 -->
?? ??? ?<div id="divSp1"><img src="img/6.jpg" id="sp1">
?? ??? ?<p id="wz1">初音未來4代櫻初音日本擺件玩具動漫周邊</p>
?? ??? ?<p id="jg3"><span>￥</span>257</p>
?? ??? ?<button id="gwc1" onclick="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 第二張圖片 -->
?? ??? ?<div id="divSp2">
?? ??? ?<img src="img/10.jpg" id="sp2">
?? ??? ?<p id="wz2">拉姆蕾姆透明亞克力立牌擺件禮物</p>
?? ??? ?<p id="jg2"><span>￥</span>57</p>
?? ??? ?<button id="gwc2" onmouseover="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 第三張圖 -->
?? ??? ?<div id="divSp3">
?? ??? ??? ?<img src="img/12.jpg" id="sp3">
?? ??? ??? ?<p id="wz3"> 蕾姆 Q版 手辦正品景品</p>
?? ??? ??? ?<p id="jg3"><span>￥</span>157</p>
?? ??? ??? ?<button id="gwc3" onclick="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 第四張圖片 -->
?? ??? ?<div id="divSp4">
?? ??? ??? ?<img src="img/102.jpg" id="sp4">
?? ??? ??? ?<p id="wz4">嗶哩嗶哩初音未來長發(fā)公主景品手辦</p>
?? ??? ??? ?<p id="jg4"><span>￥</span>157</p>
?? ??? ??? ?<button id="gwc4" onclick="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?
?? ??? ?<!-- 第五張圖片 -->
?? ??? ?<div id="divSp5">
?? ??? ??? ?<img src="img/101.jpg" id="sp5">
?? ??? ??? ?<p id="wz5">魔女之旅 伊蕾娜 景品手辦</p>
?? ??? ??? ?<p id="jg5"><span>￥</span>257</p>
?? ??? ??? ?<button id="gwc5" onclick="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 第六張圖片 -->
?? ??? ?<div id="divSp6">
?? ??? ??? ?<img src="img/103.jpg" id="sp6">
?? ??? ??? ?<p id="wz6">MG紅異端強(qiáng)襲自由獨角獸二次元機(jī)器人機(jī)甲HG手辦拼裝玩具</p>
?? ??? ??? ?<p id="jg6"><span>￥</span>357</p>
?? ??? ??? ?<button id="gwc6" onclick="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<!-- 第七張圖片 -->
?? ??? ?<div id="divSp7">
?? ??? ??? ?<img src="img/104.jpg" id="sp7">
?? ??? ??? ?<p id="wz7">MG強(qiáng)襲自由獨角獸紅異端PG機(jī)甲初號機(jī)Eva拼裝玩具男</p>
?? ??? ??? ?<p id="jg7"><span>￥</span>720</p>
?? ??? ??? ?<button id="gwc7" onclick="gwc(this)">加入購物車</button>
?? ??? ?</div>
?? ??? ?
?? ??? ?<div id="rx"><h1>熱銷商品</h1></div>
?? ??? ?
?? ??? ?</div>
?? ??? ?
<!--------------------------------購物車表單----------------------------------->
?? ??? ??? ??? ?<table id="table" border="0" cellspacing="50px">
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?<tr>
?? ??? ??? ?<td id="delalll" onclick="delCKRow()">刪除選中商品</td>
?? ?<td colspan="6"><span id="spanSum">商品總價:￥<font id="allPrice"></font></span></td>
?? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ?<td>全選 ?<input type="checkbox" onclick="selectAll(this.checked)" id="selAll"></td>
?? ??? ??? ??? ??? ??? ?<td>商品</td>
?? ??? ??? ??? ??? ??? ?<td>商品名稱</td>
?? ??? ??? ??? ??? ??? ?<td>商品個數(shù)</td>
?? ??? ??? ??? ??? ??? ?<td>商品價格</td>
?? ??? ??? ??? ??? ??? ?<td>商品總價</td>
?? ??? ??? ??? ??? ??? ?<td>商品操作</td>
?? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ?
?? ?<tr>
?? ??? ?<td><input type="checkbox" class="cbox"></td>
?? ??? ?<td><img src="img/10.jpg" width="150px" height="150px"></td>
?? ??? ?<td class="tableName">拉姆蕾姆透明亞克力立牌擺件禮物</td>
?? ??? ?<td><button class="tableBu2" onclick="mathAdd(this,this.parentElement.parentElement)">+</button>
?? ??? ?<span class="count1">1</span>?
?? ??? ?<button class="tableBu2" onclick="mathDel(this,this.parentElement.parentElement)">-</button></td>
?? ??? ?<td class="price">57</td>
?? ??? ?<td class="sum">57</td>
?? ??? ?<td><button class="tableBu1" onclick="delRow(this.parentElement.parentElement)">刪除商品</button>
?? ??? ?</td>
?? ?</tr>
?? ??? ??? ??? ??? ?
?? ?</table>
?? ?
?? ?
? ? ? ? ? ??
?? ??? ?
?? ??? ?<script>
?? ??? ?var b=1;
?? ??? ?//使用循環(huán)計時器讓我們的圖片切換
?? ??? ?setInterval(function fn1(){
?? ??? ??? ??? ? img.style.backgroundImage='url("img/'+(b%3)+'.gif")';
?? ??? ??? ??? ?//每執(zhí)行一次b就加上1
?? ??? ? ? ? ? ? b++;
?? ??? ?},2000)
?? ??? ?
?? ??? ?
?? ??? ?var count=0;
?? ??? ?// 寫方法當(dāng)點擊按鈕時把商品加入購物車
?? ??? ?function gwc(obj){
?? ??? ??? ?
?? ??? ??? ?count++;
?? ??? ??? ?// 1.拿到商品圖片
?? ??? ??? ?// 2.拿到商品名稱
?? ??? ??? ?// 3.增加個數(shù)
?? ??? ??? ?// obj按鈕自己,拿到圖片
?? ??? ??? ?// 拿到價格
?? ??? ??? ?var money=obj.previousElementSibling.textContent;
?? ??? ??? ?// 轉(zhuǎn)換純數(shù)字
?? ??? ??? ?var m=money.replace(/[^0-9]/ig,"");
?? ??? ??? ?
?? ??? ??? ?// 拿到商品名字
?? ??? ??? ?var name=obj.previousElementSibling.previousElementSibling.textContent;
?? ??? ? ? ?// 拿到商品圖片
?? ??? ??? ? var img=obj.previousElementSibling.previousElementSibling.previousElementSibling;
?? ??? ??? ? var imgSrc=img.getAttribute("src");
?? ??? ??? ??
?? ??? ??? ??? ??? ? // 新增行
?? ??? ??? ??? ??? ? // table:是我們給表格的id名
?? ??? ??? ??? ??? ? // table.insertRow(i):在表格中為i的位置插入一行
?? ??? ??? ??? ??? ? var tr=table.insertRow();
?? ??? ??? ??? ??? ? // row.insertCell:在行里面插列
?? ??? ??? ??? ??? ? var d1=tr.insertCell();
?? ??? ??? ??? ??? ? var d2=tr.insertCell();
?? ??? ??? ??? ??? ? var d3=tr.insertCell();
?? ??? ??? ??? ??? ? var d4=tr.insertCell();
?? ??? ??? ??? ??? ? var d5=tr.insertCell();
?? ??? ??? ??? ??? ? var d6=tr.insertCell();
?? ??? ??? ??? ??? ? var d7=tr.insertCell();
?? ??? ??? ??? ??? ? // 給每一列插內(nèi)容
?? ??? ??? ??? ??? ? // innerHTM可以插html標(biāo)簽也可以插文字
?? ??? ??? ??? ??? ? d1.innerHTML='<input type="checkbox" class="cbox">'
?? ??? ??? ??? ??? ? // textContent 可以插文字，無法插html標(biāo)簽
?? ??? ??? ??? ??? ? // 商品圖片
?? ??? ??? ??? ??? ? d2.innerHTML='<img src='+(imgSrc)+' width="150px" height="150px">';?? ?
?? ??? ??? ??? ??? ??
?? ??? ??? ??? ??? ? // 商品名稱
?? ??? ??? ??? ??? ? d3.innerHTML="<span class='tableName'> "+(name)+" </span>";
?? ??? ??? ??? ??? ? // 商品個數(shù)
?? ??? ??? ??? ??? ? d4.innerHTML="<button class='tableBu2' onclick='mathAdd(this,this.parentElement.parentElement)'>+</button><span class='count1'> ?"+(count)+" ?</span><button class='tableBu2' onclick='mathDel(this,this.parentElement.parentElement)'>-</button>";
?? ??? ??? ??? ??? ? // 商品價格
?? ??? ??? ??? ??? ? d5.innerHTML="<span class='price'> "+(m)+" </span>";
?? ??? ??? ??? ??? ? // 商品總價
?? ??? ??? ??? ??? ? d6.innerHTML="<span class='sum'> "+(m)+" </span>";
?? ??? ??? ??? ??? ? // 商品操作
?? ??? ??? ??? ??? ? d7.innerHTML="<button class='tabelBu' onclick='delRow(this.parentElement.parentElement)'>刪除商品</button>";
?? ??? ??? ??? ??? ? count=0;
?? ??? ??? ??? ? calcAll();
?? ??? ??? ? }
?? ??? ??? ?
?? ??? ??? ??
?? ??? ??? ??
?? ??? ??? ?
?? ??? ?
?? ? ? ? ?// 點擊跳轉(zhuǎn)按鈕時，表格顯示出來
?? ??? ? function fn1(){
?? ??? ??? ? divMain.style.display="none";
?? ??? ??? ? table.style.display="block";
?? ??? ??? ?
?? ??? ? }
?? ??? ??
?? ??? ? ?
?? ??? ? ?// 點擊商城
?? ??? ? ?function scMain(){
?? ??? ??? ? ?divMain.style.display="block";
?? ??? ??? ? ?table.style.display="none";
?? ??? ??? ??
?? ??? ? ?}
?? ??? ? ?
?? ??? ? ?// 點+號數(shù)量加1
?? ??? ? ?function mathAdd(obj,tr){
?? ??? ??? ? ?// 當(dāng)點加時，拿到數(shù)量加1
?? ??? ??? ? ?var span1=obj.nextElementSibling;
?? ??? ??? ??? ? ?// 拿到他下一個元素的值
?? ??? ??? ?span1.textContent=span1.textContent*1+1; ? ??
?? ??? ??? ?calc(tr);
?? ??? ??? ?calcAll();
?? ??? ? ?}
?? ??? ? ?
?? ??? ? ?// 點減號時刪除商品
?? ??? ? ?// 點-號數(shù)量-1
?? ??? ? ?function mathDel(obj,tr){
?? ??? ? ??? ?// 當(dāng)點加時，拿到數(shù)量加1
?? ??? ? ??? ? var span1=obj.previousElementSibling;
?? ??? ? ??? ? // 拿到他下一個元素的值
?? ??? ??? ? if(span1.textContent<=1){
?? ??? ??? ? ?? ?span1.textContent=1;
?? ??? ??? ??? ?return;
?? ??? ??? ? }
?? ??? ??? ?
?? ??? ? ??? ?span1.textContent=span1.textContent-1;
?? ??? ? ? ?calc(tr);
?? ??? ??? ?calcAll();
?? ??? ? ?}
?? ??? ? ?
?? ??? ? ?
?? ??? ? ?
?? ??? ? ?
?? ??? ? ?// 總價計算
?? ??? ? ?// 個數(shù)*價格
?? ??? ? ? function calc(tr) {
?? ??? ? ? //value只有在input或者select
?? ??? ? ? //其他的內(nèi)容全部使用textContent,innerHTML
?? ??? ? ? ?var price=tr.getElementsByClassName("price")[0].textContent;
?? ??? ? ? ?var count=tr.getElementsByClassName("count1")[0].textContent;
?? ??? ? ? ?
?? ??? ? ? ? ? ?//使用單價*數(shù)量算出總價 并賦值給對應(yīng)元素
? ? ? ? ? ? ? ? tr.getElementsByClassName("sum")[0].textContent=price*count;
?? ??? ? ? ? ? calcAll();
?? ??? ? ? ? ?}
?? ??? ? ?
?? ??? ? ?// 當(dāng)進(jìn)來時只顯示主界面
?? ??? ? ? window.onload=()=>{
?? ??? ? ??? ??? ??? ?table.style.display="none";
?? ??? ? ??? ??? ??? ?var rs=document.getElementsByTagName("tr")
?? ??? ? ??? ??? ??? ?for(let i=2;i<rs.length;i++){
?? ??? ? ??? ??? ??? ?calc(rs[i])
?? ??? ? ??? ??? ??? ? }
?? ??? ??? ??? ?calcAll();
?? ??? ? ? }
?? ??? ? ??
?? ??? ? ? ? ? ?// 刪除整行
?? ??? ? ? ? ?//按鈕點擊刪除該行
?? ??? ? ? ? ? ? function delRow(tr) {
?? ??? ? ? ? ? ? ? ? tr.outerHTML="";
?? ??? ??? ??? ??? ? calcAll();
?? ??? ? ? ? ? ? }
?? ??? ??? ??? ?
?? ??? ??? ??? ??
?? ??? ??? ??? ?
?? ??? ? ? ? ?//計算當(dāng)前所有商品的總價
?? ??? ? ? ?function calcAll() {
?? ??? ? ? ?//獲得頁面中所有的行
?? ??? ? ? ?var rs=document.getElementsByTagName("tr")
?? ??? ? ? ?var sum=0;
?? ??? ? ? ?for(let i=2;i<rs.length;i++){
?? ??? ? ? ?//rs[i]就是除了第一行之外的其他的行
?? ??? ? ? var s1=rs[i].getElementsByClassName("sum")[0].textContent;
?? ??? ? ? ? sum+=parseFloat(s1)
?? ??? ? ? ? ? ? ? ? ?}
?? ??? ? ? ?//給頁面賦值,只要小書店后兩位
?? ??? ? ? ?allPrice.textContent=sum.toFixed(2);
?? ??? ? ? ? ? ? ?}
?? ??? ??? ??? ? ?
?? ??? ??? ?
?? ??? ??? ? ? ?//刪除選中的行
?? ??? ??? ? ? ?function delCKRow() {
?? ??? ??? ? ? ? ? ?//獲得頁面中所有的行
?? ??? ??? ? ? ? ? ?var rs=document.getElementsByTagName("tr")
?? ??? ??? ? ? ? ? ?//將集合collection變成數(shù)組array
?? ??? ??? ? ? ? ? ?rs=Array.from(rs)
?? ??? ??? ? ? ? ? ?for(let i=2;i<rs.length;i++){
?? ??? ??? ? ? ? ? ? ? ?//拿到行中對應(yīng)的多選框
?? ??? ??? ? ? ? ? ? ? ?var ck=rs[i].querySelectorAll("input[type='checkbox']")[0]
?? ??? ??? ? ? ? ? ? ? ?//判斷多選框是否被選中
?? ??? ??? ? ? ? ? ? ? ?if(ck.checked){
?? ??? ??? ? ? ? ? ? ? ? ? ?//刪除該行
?? ??? ??? ? ? ? ? ? ? ? ? ?rs[i].outerHTML=""
?? ??? ??? ? ? ? ? ? ? ?}
?? ??? ??? ? ? ? ? ?}
?? ??? ??? ? ? ? ? ?calcAll()
?? ??? ??? ? ? ?}
?
?? ??? ??? ?
?? ??? ? //全選功能
?? ??? ? ? ?function selectAll(status) {
?? ??? ? ? ? ? ?var is=document.querySelectorAll("input[type='checkbox']")
?? ??? ? ? ? ? ?for (let i of is){
?? ??? ? ? ? ? ? ? ?i.checked=status
?? ??? ? ? ? ? ?}
?? ??? ? ? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?</script>
?? ?
?? ?</body>
</html>JavaScript的最后一節(jié)課到這里啦，大家可以把代碼拿過去運行一下。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)點擊文本自動定位到下拉框選中操作
這篇文章主要介紹了JavaScript實現(xiàn)點擊文本自動定位到下拉框選中操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
淺談MUI框架中加載外部網(wǎng)頁或服務(wù)器數(shù)據(jù)的方法
下面小編就為大家分享一篇淺談MUI框架中加載外部網(wǎng)頁或服務(wù)器數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
javascript特效實現(xiàn)——當(dāng)前時間和倒計時效果的簡單實例
下面小編就為大家?guī)硪黄猨avascript特效實現(xiàn)——當(dāng)前時間和倒計時效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了原生JavaScript實現(xiàn)瀑布流布局的相關(guān)資料,實現(xiàn)鼠標(biāo)下拉圖片自動加載效果，和百度圖片效果類似，需要的朋友可以參考下
2016-01-01 
uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及解決
這篇文章主要給大家介紹了關(guān)于uni.setNavigationBarColor設(shè)置字體顏色及背景色無效的4個原因及正確解決辦法,文中還介紹了uni-app設(shè)置頁面導(dǎo)航條顏色的實例代碼,需要的朋友可以參考下
2024-01-01 
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)貪吃蛇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08 
這篇文章主要介紹了JS實現(xiàn)橫向跑馬燈效果代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-04-04 
使用JS調(diào)用工控機(jī)(Windows)虛擬鍵盤
在工控機(jī)觸摸屏中,通過瀏覽器web端進(jìn)行表單輸入,當(dāng)聚焦表單輸入框并不會出現(xiàn)虛擬鍵盤進(jìn)行輸入,本文介紹將給大家介紹如何通過js調(diào)用工控機(jī)(Windows)虛擬鍵盤,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01 
JavaScript和其他語言一樣,都擁有捕獲異常的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JS中異常拋出和處理的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11