javascript div 沒id_使用原生的JavaScript代碼，完成京東的購物車基本效果制作 一、概述
1. 字元集：UTF-8，作業系統版本：Windows7旗艦版
2.完成時間：2019.3.19
3.作者：任鑫
4.項目花費時間：2h
二.、項目描述
使用原生的JavaScript代碼，完成京東的購物車基本效果制作
三、源代碼
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="css/jd.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="icon/iconfont.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="js/jd.js" ></script>
</head>
<body>
<!--導航開始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><i class="iconfont"></i>京東首頁</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >配送到：北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >洋洋寶貝</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >我的訂單</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >我的京東</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >京東會員</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >企業采購</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >京東手機</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >關注京東</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >客戶服務</a><span>|</span></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >網站導航</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)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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>
js代碼
//獲得所有多選框對象
var fav = document.getElementsByName("fav");
//判斷是否全選操作
function checkTest1(th){
var flag = th.checked;
for(var i in fav){
fav[i].checked=flag;
}
}
//單選決定全選操作
function checkTest2(){
var flag =true;
for(var i=1;i<fav.length-1;i++){
if(!fav[i].checked){
flag=false;
break;
}
}
//決定框是否勾選
fav[0].checked=flag;
fav[fav.length-1].checked=flag;
//價格是否統計
//商品的總價格
var zong =0;
//統計是否有勾選的對象
var num=0;
//統計商品的數量
var spNum=0;
for(var i=1;i<fav.length-1;i++){
if(fav[i].checked){
num++;
//獲得ul父節點
var par=fav[i].parentNode.parentNode;
//獲得指定ul下面的所有的li
var li= par.getElementsByTagName("li");
//單個商品的總價格
var z=li[6].innerText.split("￥")[1];
//獲得所有商品的總價格
zong+=Number(z);
document.getElementById("zongz").innerText=zong;
//獲得商品的數量
var z2=li[5].getElementsByTagName("input");
var num2=z2[0].value;
spNum+=Number(num2);
//獲得商品數量統計的對象
document.getElementById("snum").innerText=spNum;
}
}
if(num==0){
document.getElementById("zongz").innerText=0;
document.getElementById("snum").innerText=0;
}
}
function checkTest3(th,sig){
var pre;
if(sig==1){
pre = th.nextElementSibling;
if(pre.value>0)
pre.value = Number(pre.value)-1;
}else{
//獲得上一個節點對象
pre = th.previousElementSibling;
//獲得節點的value值
pre.value = Number(pre.value)+1;
}
var val = pre.parentNode.previousElementSibling.innerHTML;
var zong = Number(val) * Number(pre.value);
pre.parentNode.nextElementSibling.innerHTML="￥" + zong;
}
function checkTest4(th){
var div = th.parentNode.parentNode.parentNode;
div.remove();
}
![append替換代碼後jquery不起作用_原生JavaScript與jQuery[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)