master

分支 (1)

管理

管理

master

mobile_mall
/
buycar.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				width: 100%;
				font-family: 宋体;
			}

			* {
				margin: 0;
				padding: 0;
			}

			.out {
				position: fixed;
				width: 100%;
			}

			.top {
				background-color: rgb(51, 51, 51);
				color: #ccc;
				width: 100%;
				height: 30px;
				font-size: 14px;
				overflow: hidden;
			}

			#index {
				width: 40%;
				float: left;
				text-align: center;
				list-style-type: none;
			}

			.index-li {
				width: 20%;
				float: left;
				padding: 8px 0;
			}

			a {
				text-decoration: none;
			}

			.user {
				float: right;
				padding-top: 8px;
				padding-bottom: 8px;
				padding-right: 3%;
			}

			.user-shop {
				margin-right: 40px;
			}

			.top a {
				color: #CCCCCC;
			}

			.top a:hover {
				color: #999999;
			}

			.head {
				position: fixed;
				background: rgb(247, 247, 247);
				opacity: 0.9;
				width: 100%;
			}

			#battery {
				width: 90%;
				float: left;
				text-align: center;
				list-style-type: none;
				font-family: 微软雅黑;
				font-size: 18px;
			}

			.battery-logo {
				width: 11.2%;
				float: left;
				font-size: 30px;
			}

			.battery-logo img {
				width: 70%;
				padding-top: 15%;
			}

			.battery-phone {
				width: 11.1%;
				float: left;
				padding: 20px 0;
			}

			.battery-a {
				color: black;
			}

			.battery-a:hover {
				color: #415fff;
			}

			.main {
				padding-top: 94px;
				height: 800px;
				background-color: rgb(247, 247, 247);
			}

			.mycar {
				width: 90%;
				margin-left: 5%;
				background-color: white;
				height: 70px;
				margin-top: 10px;
			}

			.mycarp1 {
				font-size: 20px;
				font-family: "微软雅黑";
				margin-left: 45%;
				padding: 20px;
			}

			.mycarp2 {
				float: right;
				margin-top: -40px;
				margin-right: 50px;
			}

			.buylist {
				width: 90%;
				margin-left: 5%;
				background-color: white;
				height: 600px;
				margin-top: 10px;
			}

			.have{
				width: 100%;
			}
			.nohaveimg {
				width: 400px;
				height: 250px;
				margin-left: 35%;
				margin-top: 5%;
			}

			.listtable{
				width: 80%;
				padding: 5px;
				margin-left: 10%;

			}

			.tdchenck{
				margin-left: 40%;
			}

			.tdimg{
				width: 100px;
				height: 100px;
				display: inline-block;
				float: left;
				margin-left: 100px;
			}

			.tdp{
				display: inline-block;
				float: left;
				margin-top: 40px;
				margin-left: 30px;
			}

			.tdPrice{
				text-align: center;
			}

			.clearcar,.buy{
				padding: 1% 5%;
				border-radius: 25px;
				border: none;
				color: white;
				font-size: 15px;
				margin-top: 50px;
				cursor:pointer;

			}

			.clearcar{
				background-color: #444;
				margin-left: 35%;
				/* margin-left: 25%; */
			}

			.buy{
				background-color: rgb(217,4,26);
				/* margin-left: 5%; */
			}


			footer {
				background-color: white;
				margin-top: 5%;
				padding: 3% 0 3% 0;
				text-align: center;
			}

			.down {
				float: left;
				width: 25%;
			}

			footer img {
				width: 20px;
			}

			.end {
				color: #333333;
				font-size: 18px;
			}

			.foot {
				color: #666666;
				font-size: 13px;
			}
		</style>


	</head>
	<body>
		<div class="out">
			<div class="top">
				<nav id="index">
					<li class="index-li"><a href="brand.html" class="index-a">品牌</a></li>
					<li class="index-li">Funtouch OS</li>
					<li class="index-li">体验店</li>
					<li class="index-li">政企业务</li>
					<li class="index-li">社区</li>
				</nav>
				<div class="user">
					<a class="user-shop" href="buycar.html" style="color: #999999">购物车</a>
					<a class="login" href="login.html" id="logintext">登录</a>
					<span style="margin-left:15px; margin-right: 10px;">|</span>
					<a class="register" href="register.html"  id="restext">注册</a>
				</div>
			</div>
			<div class="head">
				<ul id="battery">
					<li class="battery-logo"><img src="img/logo.JPG" /></li>
					<li class="battery-phone"><a href="index.html" class="battery-a">商城</a></li>
					<li class="battery-phone"><a href="iQOO.html" class="battery-a">iQOO专区</a></li>
					<li class="battery-phone"><a href="NEX.html" class="battery-a">NEX系列</a></li>
					<li class="battery-phone"><a href="X.html" class="battery-a">X系列</a></li>
					<li class="battery-phone"><a href="S.html" class="battery-a">S系列</a></li>
					<li class="battery-phone"><a href="Z.html" class="battery-a">Z系列</a></li>
					<li class="battery-phone"><a href="Y.html" class="battery-a">Y系列</a></li>
					<li class="battery-phone"><a href="U.html" class="battery-a">U系列</a></li>
				</ul>
			</div>
		</div>
		<div class="main">
			<div class="mycar">
				<p class="mycarp1">我的购物车</p>
				<a href="index.html" class="mycarp2">继续购物 ></a>
			</div>

			<div class="buylist">
				<div class="nohave" style="display: none;" id="nohave">
					<img src="./img/nohave.jpg" class="nohaveimg" />
				</div>
				<div class="have" id="have">
					<table class="listtable" border="1" id="tab">
						<tr>
							<th style="width: 10%;"><input type="checkbox" name="checkgroup" id="buyall" onclick="buyall()"/>全选</th>
							<th style="width: 50%;">商品名称</th>
							<th style="width: 10%;">价格（元）</th>
							<th style="width: 30%;">数量</th>
						</tr>


					</table>
						<input type="button" class="clearcar" value="清空购物车" onclick="clearbuycar()"/>
						<input type="button" class="buy" value="  立即付款  " onclick="buy()"/>
				</div>
			</div>

		</div>


		<footer>
			<div class="end">
				<div class="down"><img src="img/icon1.JPG" />官方正品</div>
				<div class="down"><img src="img/icon2.JPG" />顺丰极速达</div>
				<div class="down"><img src="img/icon3.JPG" />全国联保</div>
				<div class="down"><img src="img/icon4.JPG" />镭雕定制</div>
			</div>
			<hr style="margin: 4% 0 2% 0; color: #999999;" />
			<div class="foot">
				Copyright ©2011-2020 广东天宸网络科技有限公司 版权所有 保留一切权利 | 隐私政策 | 法律声明 | 营业执照 | 粤B2-20080267 | 粤ICP备14052990号 | 粤公网安备
				44190002004246号
			</div>
		</footer>
	</body>

	<script language="javascript" type="text/javascript" src="js/myphone.js"></script>

	<script type="text/javascript">

		function addphonetip(){
			//获取当前路径并切割ID
			var url = window.location.href;
			var phoneid = url.split("?")[1];
			//获取当前ID的手机信息字符串
			phoneid = phoneid.replace("id=","").trim();
			//获取并显示————手机名称
			phonename = phones[phoneid].split(" ")[0];
			document.getElementById("phonename").innerHTML = phonename.replace(/_/g," ");
			//获取并显示————手机价格
			Price = phones[phoneid].split(" ")[2];
			document.getElementById("Price").innerHTML = Price;
			//获取并显示————手机描述
			phonenamemini = phones[phoneid].split(" ")[1];
			document.getElementById("phonenamemini").innerHTML = phonenamemini;
			//获取并显示————手机图片路径
			var phonesrc = "./img/"+phonename.replace(/_/g," ")+".png";
			var phoneimg = document.getElementById("phoneimg");
			phoneimg.src = phonesrc;
		}


		//文档初始化事件，window.onload是表示文档结构已经加载完成（不包含图片等非文字媒体文件）
		// if (document.addEventListener) {
		//         document.addEventListener ("DOMContentLoaded", addphonetip, false);
		// }
		function setCookie(name, value) {
			if (value) {
				var Days = 365
				var exp = new Date()
				exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
				document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
			}
		}

		function getCookie(name) {
			var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
			if (arr = document.cookie.match(reg))
				return unescape(arr[2]);
			else
				return null;
		}

		function sayhi() {
			if((getCookie("用户名")!=null)&&(getCookie("用户名")!="退出"))
			{
				var username = document.getElementById("logintext");
				username.innerHTML = "Hi,"+getCookie("用户名");
				username.href = "brand.html";
				var again = document.getElementById("restext");
				again.innerHTML = "退出";
				again.href = "login.html";
			}
		}
		window.onload = sayhi;


		function showall(){
			var show = 0;
			for(var i =0 ;i<=10;i++)
			{
				if(getCookie(i)=="是")
				{
					var phonename = phones[i].split(" ")[0];
					var Price = phones[i].split(" ")[2];
					var phonesrc = "./img/"+phonename.replace(/_/g," ")+".png";

					var tab = document.getElementById("tab");
					var tr = document.createElement("tr");
					tab.appendChild(tr);

					var t0 = document.createElement("td");
					var che = document.createElement("input");
					che.type = "checkbox";
					che.name = "buy";
					che.className = "tdchenck";
					t0.appendChild(che);
					tr.appendChild(t0);

					var t1 = document.createElement("td");
					var t1img = document.createElement("img");
					t1img.src = phonesrc;
					t1img.className = "tdimg";
					var t1p = document.createElement("p");
					t1p.innerHTML = phonename.replace(/_/g," ");
					t1p.className = "tdp";
					t1.appendChild(t1img);
					t1.appendChild(t1p);
					tr.appendChild(t1);

					var t2 = document.createElement("td");
					var t2p = document.createElement("p");
					t2p.innerHTML = Price;
					t2p.className = "tdPrice";
					t2.appendChild(t2p);
					tr.appendChild(t2);

					var t3 = document.createElement("td");
					var t3p = document.createElement("p");
					t3p.innerHTML = "1台";
					t3p.className = "tdPrice";
					t3.appendChild(t3p);
					tr.appendChild(t3);
					show++;
				}
			}
			if(show == 0)
			{
				var have = document.getElementById("have");
				have.style.display = "none";
				var nohave = document.getElementById("nohave");
				nohave.style.display = "block";
			}
		}

		if (document.addEventListener) {
		        document.addEventListener ("DOMContentLoaded", showall, false);
		}

		function clearbuycar(){
			for(var i =0 ;i<=10;i++)
			{
				setCookie(i,"否");
			}
			window.location.href="buycar.html";
		}

		function buy(){
			alert("非常遗憾，支付功能还在开发中哦~");
		}

		function buyall(){
			var bools = document.getElementById("buyall").checked;
			var likearr = document.getElementsByName("buy");
			for(var i = 0;i < likearr.length; i++)
			{
				likearr[i].checked = bools;
			}
		}
	</script>
</html>