【3】JS美淘網(wǎng)電商項目部分效果實現(xiàn)：購物車，手風琴，登錄注冊，放大鏡【詩書畫唱】
注冊界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link? rel="stylesheet" href="css/zhuJieMian.css" />-->
<style>
*{
margin: 0px;padding: 0px;font-size: 10px;
}
ul{
list-style: none;
}
/**和ui的以上的全局設置是常用的,可以省很多代碼*/
#ZCdivMain{
width: 1000px; height: 800px;margin: 0px auto;position: relative;
}
#ZCdivTop1{
width: 1000px; height: 30px;position: relative;
}
#ZCtopLeft{
width: 100px;position: absolute;left: 50px; height: 30px;
line-height: 30px;
}
#ZCtopLeft a{
text-decoration: none;color: black;font-size:10px;font-weight: bold;
}
#ZCdivRght{
width: 400px; position: absolute;right: 50px; height: 30px; line-height: 30px;
}
#ZCdivRght span{
display: inline-block;margin-left: 15px;position: relative;
}
#ZCdivRght span a{
color: black;text-decoration: none;display: block;
}
#ZCdivRght span a:hover{
color: orange;
}
#ZCdivRght span ul{
display: none;position: absolute;left: 0px; top: 20px;list-style: none;z-index: 10;
}
#ZCdivRght span ul li{
height: 20px;
}
.ZCgwcSpan{
background-image: url(./img/1.jpg); padding-left: 15px;background-repeat: no-repeat;
background-position: 0px 8px;
}
#ZCdivTop2{
width: 1000px; height: 80;position: relative;
}
#ZCdivTopLeft{
width: 330px; position: absolute;left: 10px; top: 10px;
}
#ZCdivTopRight{
width: 450px; position: absolute;left:auto; top: 10px;right: 50px;height: 80px;z-index: 6;
}
#ZCdivTopRight form input[type="text"]{
background-image: url(./img/放大鏡.jpg);background-repeat: no-repeat;
height: 40px;font-size: 20px;width: 250px;padding-left: 40px;
}
#ZCdivTopRight form input[type="submit"]{
width: 100px; height: 43px;background-color: yellow;border: 1px solid yellow;
margin-left: -2px;
}
#ZCdivTopRight form a{
color: gray;margin-left:10px;text-decoration: none;
}
#dade_daohangtiao{
/*這里position: fixed;可寫也可不寫因為包到這個的div設置成了國定定位*/
left: 0px;top: 110px;width: 100%; height: 35px; background-color: orange;
z-index: 0;
}
#ZCbigToubu{
position: fixed;
z-index: 20;background-color: white;width: 1000px;height: 145px;
}
#ZCdaoHangTiao{
width: 100%;height: 35px; background-color: orange;position: absolute;left: 0px;top: 110px;
z-index: 1;
}
#ZCdaoHangTiao ul{
list-style: none;
}
#ZCdaoHangTiao ul li{
float: left;width: 130px;height: 35px;line-height: 35px;text-align: center;
? }
? #ZCdaoHangTiao ul li:hover{
? background-color: green;
? }
? #ZCdaoHangTiao ul li a{
? font-size: 20px;text-decoration: none;color: white;font-weight: bold;
? }
? #ZCdaoHangTiao ul li a:hover{
? color: red;
? }
?
? /*ZCjsSouSuoNeiRongTiShi:用JS做的搜索內(nèi)容提示的創(chuàng)建*/
? .ZCjsSouSuoNeiRongTiShi{
? width: 150px; color:limegreen; font-size: 18px;height: 22px;font-weight: bold;margin-top: 10px;
?
? }
?
#ZCGray{
width: 100%;height: 100%;opacity: 0.6;background-color: black;z-index: 30;position: fixed;
left: 0px;top: 0px;display: none;
}
#ZCdengLu{
width: 500px;height: 300px;background-color: white;z-index: 40;position: fixed;left: 50%;
top: 50%;margin-left: -250px;margin-top: -150px;display: none;
}
#ZCdlCloseImg{
width: 30px;height: 30px;position: absolute;right:5px;top:5px;
background-image: url(./img/guanbi.png);cursor: pointer;
}
#ZCdlYongHudengLu{
width: 100px;height: 50px;border: 1px solid gray;text-align: center;line-height: 50px;
position: absolute;left: 70px;top: 20px;font-size: 20px;font-weight: bold;color: gray;
}
#ZCdlNeiRong{
position: absolute;left: 70px;top: 70px;border: 1px solid gray;width: 350px;height: 170px;
}
#ZCdlBiaoGe{
margin-left: 50px;width: 250px;height: 170px; margin: 0px auto;color: red;
}
#ZCdlBiaoGe tr td{
font-size: 15px;
}
#ZCdlBiaoGe tr td input[type="text"]{
width: 150px;height: 30px;font-size: 15px;
}
#ZCdlBiaoGe tr td input[type="password"]{
width: 150px;height: 30px;font-size: 15px;
}
#ZCdlBiaoGe tr td input[type="button"]{
width: 70px;height: 30px;border: 1px solid gray;background-color:gray;opacity: 0.7;
font-size: 15px;color: white;margin-left: 20px;cursor: pointer;
}
#ZCul li{
border: 1px yellow solid;width: 50px;height: 20px;line-height: 20px;
}
#ZCzhuCe{
width: 500px;height: 500px; position: absolute;
top: 160px;left: 50%;margin-left: -200px;border: 1px solid gray;
}
#ZCyhZhuCe{
font-size: 25px;width: 150px; margin: 20px auto;text-align: center;
}
#ZCzhuCeNeirong{
width: 400px;height: 300px;margin: 0px auto;
}
#ZCzhuCeNeirong table tr{
height: 60px;
}
#ZCzhuCeNeirong table tr td{
font-size: 20px;
}
#ZCzhuCeNeirong .ZCwenBenKuang{
width: 180px; height: 25px;font-size: 15px;
}
#ZCzhuCeNeirong .btn{
width: 70px; height: 30px;margin-left: 50px;
}
#ZCzhuCeNeirong select{
height: 30px;
}
</style>
<!--<script src="js/zhuCe.js"></script>-->
<script>
window.onload=function(){
//我的信息
var div_top_right=document.getElementById("ZCdivRght");
var div_top_right_spans=div_top_right.children;
div_top_right_spans[1].onmouseover=function(){
this.children[1].style.display="block";
}
div_top_right_spans[1].onmouseout=function(){
this.children[1].style.display="none";
}
//智能搜索框
var input_texts=["手機充電器","手機充電器","手機殼","手機貼膜"];
var input_texts_div=document.getElementById("ZCdivTopRight");
var input_text=document.getElementById("ZCdivTopRight").getElementsByTagName("input")[0];
var div_tishikuang=document.getElementById("ZCjsSouSuoKuang");
input_text.onkeyup=function(){
var kong_arr=[];
var neirong=this.value;
for(var i of input_texts){
if(i.indexOf(neirong)==0){
kong_arr.push(i);
}
}
console.log(kong_arr);
if(input_text.value==""){
input_texts_div.removeChild(input_texts_div.children[1]);
var input_c_ul=document.createElement("ul");
input_c_ul.style.border="0px solid red";
input_texts_div.appendChild(input_c_ul);
}else{
if(div_tishikuang){
input_texts_div.removeChild(input_texts_div.children[1]);
console.log(div_tishikuang);
var input_c_ul=document.createElement("ul");
input_c_ul.style.border="1px solid red";
// input_c_ul.style.backgroundColor="orange";
input_c_ul.style.width="300px";
for(var i of kong_arr){
var input_c_li=document.createElement("li");
var input_c_li_text=document.createTextNode(i);
input_c_li.className="ZCjsSouSuoNeiRongTiShi";
input_c_li.appendChild(input_c_li_text);
input_c_ul.appendChild(input_c_li);
}
input_texts_div.appendChild(input_c_ul);
}
}
}
//關閉彈出的登錄
window.inputs=document.getElementById("ZCdlBiaoGe").getElementsByTagName("input");
inputs[3].onclick=guanbidl;
// window.XXX(id名).onclick:給id為XXX的部分設置點擊事件
window.ZCdlCloseImg.onclick=guanbidl;
var a_dl=document.getElementById("ZCdlHref");
a_dl.onclick=kaiqidl;
//給用戶的地址賦值
var sheng=["請選擇","湖南","山東"];
var shi=[["請選擇"],["長沙","湘潭"],["濟寧","濟南"]];
var xian=[[["請選擇"]],[["長沙1","長沙2"],["湘潭1","湘潭2"]],[["濟寧1","濟寧2"],["濟南1","濟南2"]]];
//初始化
var selects=document.getElementById("ZCtdXiaLaKuang").getElementsByTagName("select");
for(var i of sheng){
var sheng=document.createElement("option");
sheng.value=i;
sheng.innerHTML=i;
selects[0].appendChild(sheng);
}
selects[1].options.length=1;
selects[1].options[0].value=shi[0][0];
selects[1].options[0].innerHTML=shi[0][0];
selects[2].options.length=1;
selects[2].options[0].value=xian[0][0][0];
selects[2].options[0].innerHTML=xian[0][0][0];
var diyige=0;
selects[0].onchange=function(){
selects[1].options.length=shi[this.selectedIndex].length;
diyige=this.selectedIndex;
for(var i=0;i<selects[1].options.length;i++){
selects[1].options[i].value=shi[this.selectedIndex][i];
selects[1].options[i].innerHTML=shi[this.selectedIndex][i];
}
}
selects[1].onchange=function(){
selects[2].options.length=xian[diyige][this.selectedIndex].length;
for(var i=0;i<selects[2].options.length;i++){
selects[2].options[i].value=xian[diyige][this.selectedIndex][i];
selects[2].options[i].innerHTML=xian[diyige][this.selectedIndex][i];
}
}
//用戶注冊正則
}
//打開登錄和遮罩層
function kaiqidl(){
var zhezhaoceng=document.getElementById("ZCGray");
zhezhaoceng.style.display="block";
var dl=document.getElementById("ZCdengLu");
dl.style.display="block";
}
//關閉登錄和遮罩層
function guanbidl(){
var zhezhaoceng=document.getElementById("ZCGray");
zhezhaoceng.style.display="none";
var dl=document.getElementById("ZCdengLu");
dl.style.display="none";
}
</script>
</head>
<body>
<!--absoluteBuFen：絕對定位部分，這個部分和zhuJieMian.html的部分對應的CSS的設置一樣，
其實都可以id等的名字取一樣，之后都寫css文件，html中調(diào)用就可以了，這樣可以省很多代碼，js也一樣。
但也可以幾個html對應的CSS部分寫在一起，最好寫對應的CSS，這樣容易理清思路，
目前css，js和html一起寫是方便一起重命名，同時都用搜索HTML
的id，標簽等的名字方便快速找到和設置css，js等-->
<!--帶ZC的說明都是zhuce.html中的-->
<div id="ZCdivMain">
<div id="ZCbigToubu">
<div id="ZCdivTop1">
<div id="ZCtopLeft"><a href="#">武漢【切換城市】</a></div>
<div id="ZCdivRght">
<span>美淘，每天淘一次</span>
<span>
<a href="#">我的美淘</a>
<ul id="ZCul">
<li><a href="#">我的訂單</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余額</a></li>
</ul>
</span>
<span><a href="#" class="ZCgwcSpan">購物車</a></span>
<span><a href="#" id="ZCdlHref">【登錄】</a></span>
<span><a href="#">【注冊】</a></span>
</div>
</div>
<div id="ZCdivTop2">
<div id="ZCdivTopLeft"><img src="img/meitao_log.jpg"></div>
<div id="ZCdivTopRight">
<form action="#" method="#">
<table>
<tr>
<td><input type="text"? align="top"/></td>
<td><input type="submit" value="搜索"? placeholder="請輸入要搜索內(nèi)容的關鍵詞"/></td>
</tr>
<tr>
<td colspan="2">
<a href="#">美的熱水器</a>
<a href="#">利浦電動牙刷</a>
<a href="#">美的電飯煲</a>
<a href="#">格力士微波爐</a>
</td>
</tr>
</table>
</form>
<div id="ZCjsSouSuoKuang">
</div>
</div>
</div>
<div id="ZCdaoHangTiao">
<ul>
<li><a href="zhuJieMian.html">首頁</a></li>
<li><a href="#">團購</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">電影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">酒店訂票</a></li>
<li><a href="#">購物</a></li>
</ul>
</div>
</div>
<div id="ZCzhuCe">
<div id="ZCyhZhuCe">用戶注冊</div>
<div id="ZCzhuCeNeirong">
<form action="#" method="post">
<table>
<tr>
<td align="right">用戶名:</td>
<td><input type="text" placeholder="用戶長度為6-12位" class="ZCwenBenKuang"></td>
<td><span id="ZCspanYongHuMing">請輸入用戶名</span></td>
</tr>
<tr>
<td align="right">密碼:</td>
<td><input type="password" placeholder="密碼長度為6-12位" class="ZCwenBenKuang"></td>
<td><span id="ZCspanYongHuMiMa">請輸入用戶密碼</span></td>
</tr>
<tr>
<td align="right">真實姓名:</td>
<td><input type="text" placeholder="請輸入3-6個漢字" class="ZCwenBenKuang"></td>
<td><span id="ZCspanTrueName">請輸入真實姓名</span></td>
</tr>
<tr>
<td align="right">家庭地址:</td>
<td colspan="2" id="ZCtdXiaLaKuang">
<select></select>
<select></select>
<select></select>
</td>
</tr>
<tr>
<td align="right">手機號:</td>
<td><input type="text" placeholder="請輸入長度為11位的手機號" class="ZCwenBenKuang"></td>
<td><span id="ZCspanPhone">請輸入手機號</span></td>
</tr>
<tr>
<td colspan="3">
<input type="button" class="btn" value="注冊" />
<input type="button" class="btn" value="取消" />
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div id="ZCGray">
</div>
<div id="ZCdengLu">
<div id="ZCdlCloseImg"></div>
<div id="ZCdlYongHudengLu">用戶登錄</div>
<div id="ZCdlNeiRong">
<form action="#" method="post">
<table? id="ZCdlBiaoGe">
<tr>
<td width="100px">用戶名:</td>
<td width="100px"><input type="text"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="登錄" />
<input type="button" value="取消" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
