目錄
一.登陸界面
二.注冊界面
三.購物車界面
一.登陸界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陸界面</title>
<style type="text/css">
html,body{
height:100%;/*高度為屏幕的百分之百*/
margin: 0px;/*外間距*/
}
body{/*背景圖片*/
background: url(tupian/1.jpeg) center/cover;
}
form{/*表單·*/
color: white;
/*將背景設(shè)置透明*/
background: rgba(255,255,255,.1);
position: absolute;
padding: 0px 20px;
left: 50%;
top: 50%;
/* 在自己的基礎(chǔ)上往右邊和下面走-50% */
transform: translate(-50%,-50%);
border-radius: 10px;
box-shadow: 6px 6px 10px black;
}
input{
border: 1px solid gray;
border-radius: 20px;
height: 40px;
width: 300px;
}
button{
width: 80px;
height: 40px;
transform: translate(80%,20%);
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px;
}
input{
background: rgba(255,255,255,.5);
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<form action="" id="myJM" method="post">
<h3>白馬時光</h3>
<p>昵稱: <input type="text" id="userName" placeholder="輸入3-6個大寫或小寫字母")></p>
<p>密碼: <input type="password" id="userPwd" placeholder="不能為標(biāo)點(diǎn)或文字(長度在6-10)")></p>
<p>
<button type="button" onclick="fun01()" >登陸</button>
<button type="button" onclick="fun02()" >注冊</button>
</p>
<p>
忘記密碼？<a>點(diǎn)擊這里</a>
</p>
</form>
<script>
//登陸
function fun01() {
//拿到輸入框的值
var f1=userName.value;
var f2=userPwd.value;
//正則
var rexName=/^[a-zA-Z]{3,6}$/;
var rexPwd=/^\w{6,10}$/;
//正則匹配
var b1=rexName.test(f1)
var b2=rexPwd.test(f2)
if(b1&&b2){
location.href="11111.html"
}else{
if(userName.valu==""||userPwd.value==""){
alert("信息不能為空")
return false;
}
alert("輸入錯誤")
return false;
}
}
//注冊
function fun02(){
location.href="zhuce.html"
}
</script>
</body>
</html>?我的登陸界面用正則判斷，昵稱輸入框的輸入要求時3到6個大寫或小寫字母，placeholder時信息提示，它在輸入框中顯示，當(dāng)你在輸入框中輸入值時，就會消失
?我寫了非空判斷，在沒有輸入值就點(diǎn)擊登陸時，就會彈出提示框（alert）
?
在輸入信息與消息提示不符時，也會?彈出提示框（alert）
二.注冊界面
我寫的注冊界面不怎么全面沒有運(yùn)用二級聯(lián)動，也沒有輸入電話號碼。有需要的朋友還是去看看別的大佬的d=====(￣▽￣*)b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陸界面</title>
<style type="text/css">
html,body{
height:100%;
margin: 0px;
}
body{
background: url(tupian/2.jpeg) center/cover;
}
form{
color: white;
background: rgba(255,255,255,.1);
position: absolute;
padding: 0px 20px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 10px;
box-shadow: 6px 6px 10px black;
}
input{
border: 1px solid gray;
border-radius: 20px;
height: 40px;
width: 300px;
}
button{
width: 80px;
height: 40px;
transform: translate(80%,20%);
border: 1px solid black;
border-radius: 20px;
margin: 0px 20px;
}
input{
background: rgba(255,255,255,.5);
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<form action="" id="myJM" method="post">
<h3>白馬時光</h3>
<p>昵稱: <input type="text" id="userName" placeholder="輸入3-6個大寫或小寫字母")></p>
<p>密碼: <input type="password" id="userPwd" placeholder="不能為標(biāo)點(diǎn)或文字(長度在6-10)")></p>
<p>
<button type="button" onclick="fun01()">提交</button>
<button type="reset">清除</button>
</p>
</form>
<script>
//登陸
function fun01() {
//拿到輸入框的值
var f1=userName.value;
var f2=userPwd.value;
//正則
var rexName=/^[a-zA-Z]{3,6}$/;
var rexPwd=/^\w{6,10}$/;
//正則匹配
var b1=rexName.test(f1)
var b2=rexPwd.test(f2)
if(b1&&b2){
alert("注冊成功")
}else{
if(userName.valu==""||userPwd.value==""){
alert("信息不能為空")
return false;
}
alert("格式不規(guī)范")
return false;
}
}
</script>
</body>
</html>
?我的注冊界面有一個清除按鈕，在輸入值后可以一鍵清除
輸入值符合要求后點(diǎn)擊提交就會提示注冊成功?
?
三.購物車界面
我的購物車和商城在同一個界面，所以我說這是一個不完善的購物車
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>購物車</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
/* 去除編號 */
list-style: none;
}
img{
width: 250px;
height: 250px;
}
td{
font-size: 20px;
font-weight: 40px;
width: 200px;
text-align: center;
}
.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: blue;
}
.nav ul {
background: green;
width: 100px;
position: absolute;
left: 0px;
opacity: 0;
transform: rotate(0deg) scale(.5);
transition: .2s;
}
li li:hover {
background: yellow;
}
.nav>li:hover ul {
opacity: 1;
transform: rotate(360deg) scale(1);
}
li::after {
content: "";
position: absolute;
width: 0;
height: 5px;
background: pink;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
transition: 1s;
}
li:hover::after {
width: 80%;
body {
font-size: 12px;
line-height: 25px;
}
table {
border-top: solid 1px #666666;
border-left: solid 1px #666666;
}
td {
text-align: center;
border-right: solid 1px #666666;
border-bottom: solid 1px #666666;
}
.left {
text-align: left;
padding-left: 10px;
}
#photo {
border: solid 1px #0066CC;
width: 200px;
text-align: center;
z-index: 2;
position: absolute;
display: none;
top: 50px;
left: 50px;
background-color: #ffffff;
}
#big {
width: 200px;
}
h1 {
/* transform: translate(45%); */
text-align: center;
}
table {
margin: 0 auto;
width: 100%;
border: 2px solid #aaa;
border-collapse: collapse;
}
table th,
table td {
border: 2px solid #aaa;
padding: 5px;
}
th {
background-color: #eee;
}
.id{
font-size: 10px;
}
</style>
</head>
<body>
<ul class="nav">
<li>個人中心 </li>
<li>首頁</li>
</ul>
<table style="width: 100%;" cellspacing="0" cellpadding="0" >
<tr>
<td>商品圖片</td>
<td>商品名稱</td>
<td >商品價格</td>
<td>操作</td>
</tr>
<tr>
<td>
<img src="img/1.png"/>
</td>
<td class="left">飛鳥集</td>
<td class="sum">26.00元</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td >
<img src="img/2.png"/>
</td>
<td class="left">月亮與六便士</td>
<td class="sum">26.80元</td>
<td>
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td>
<img src="img/3.png"/>
</td>
<td class="left">小王子</td>
<td class="sum">32.80元</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td>
<img src="img/4.png"/>
</td>
<td class="left">新月集</td>
<td class="sum">44.00元</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td>
<img src="img/5.png"/>
</td>
<td class="left">茶館/我這一輩子</td>
<td class="sum">67.40元</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)" />
</td>
</tr>
<tr>
<td>
<img src="img/6.png"/>
</td>
<td class="left">呼嘯山莊</td>
<td class="sum">38.00元</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcart(this)" />
</td>
</tr>
</table>
<div id="photo" onmouseout="hidden()" onmousemove="shows()"></div>
<h1>購物車</h1>
<table id="a">
<thead>
<tr>
<th>商品</th>
<th>單價（元）</th>
<th>數(shù)量</th>
<th>金額（元）</th>
<th>刪除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">總計(jì)</td>
<td id="total"></td>
<td><button onclick="tk(this)">購買</button></td>
</tr>
</tfoot>
</table>
<script>
//第一個表格
function show(image, event) {
var x;
var y;
document.getElementById("photo").style.display = "block";
x = parseInt(event.clientX) + parseInt(document.documentElement.scrollLeft);
y = parseInt(event.clientY) + parseInt(document.documentElement.scrollTop);
document.getElementById("photo").style.top = y + "px";
document.getElementById("photo").style.left = x + "px";
document.getElementById("big").src = "images/" + image;
}
function shows() {
document.getElementById("photo").style.display = "block";
}
function hidden() {
document.getElementById("photo").style.display = "none";
}
window.onscroll = "show()";
//------------------------------------------------------------------------------------------------
var map = new Map(); //創(chuàng)建一個集合
function add_shoppingcart(btn) { //btn就是上面?zhèn)飨聛淼膖his
//console.log(btn);
var ntr = document.createElement("tr");
//獲取到商品的價格和名稱
var tr = btn.parentNode.parentNode; //獲取到按鈕的父親
var tds = tr.children;
//獲取商品的名稱
var name = tds[0].innerHTML;
//獲取商品的價格
var price = tds[2].innerHTML;
console.log("name:" + name + ",price:" + price);
//判斷集合中是否又加入商品.如果有不能加入,只能加數(shù)量,沒有可加入
if (map.has(name)) {
//如果有不能加入,只能加數(shù)量
var tr1 = map.get(name);
//console.log(tr1);
//var btn1=tr1.getElementById("btn1");
var btn1 = tr1.getElementsByTagName("button")[1];
//console.log(btn1);
jia(btn1);
} else {
//如果沒有該商品,可以正常添加
ntr.innerHTML =
`
<td style="text-align:center;">${name}</td>
<td style="text-align:center;">${price}</td>
<td style="text-align:center;">
<button onclick="jian(this)">-</button>
<input type="text" value="1" size="1" />
<button id="btn1" onclick="jia(this)">+</button>
</td>
<td>${price}</td>
<td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`;
//將name和一行數(shù)據(jù)存入到集合中
map.set(name, ntr);
//找到tbody的對象
var tbody = document.getElementById("goods");
//把上面創(chuàng)建好的一行五列加入到tbody中
tbody.appendChild(ntr);
sum();
}
}
function del(btn) {
var tr = btn.parentNode.parentNode;
tr.remove(); //刪除的是DOM文檔中的內(nèi)容,并沒有把集合中的內(nèi)容刪除.
var tr = btn.parentNode.parentNode; //獲取到按鈕的父親
var tds = tr.children;
//獲取商品的名稱
var name = tds[1].innerHTML;
map.delete(name); //刪除的是集合中的內(nèi)容
sum();
}
function jian(btn) {
var inpt = btn.nextElementSibling;
var amount = inpt.value;
if (amount <= 1) {
return;
} else {
inpt.value = --amount;
var trs = btn.parentNode.parentNode;
console.log(trs);
var price = parseInt(trs.children[1].innerHTML);
trs.children[3].innerHTML = price * amount;
sum();
}
}
function jia(btn) { //形式參數(shù)
//獲取+號按鈕左邊input控件的對象
var inpt = btn.previousElementSibling;
//console.log(Inpt);
var amount = inpt.value;
//console.log(amount);
inpt.value = ++amount; //把累加后的數(shù)放進(jìn)去
var td = btn.parentNode.previousElementSibling;
//console.log(td);
var price = parseInt(td.innerHTML); //取到單價的值
//console.log(price);
var rtd = btn.parentNode.nextElementSibling;
rtd.innerHTML = price * amount;
sum();
}
//求所有商品的累加和
function sum() {
//獲取到tbody的對象
var tbody = document.getElementById("goods");
var trs = tbody.children; //得到tbody的孩子
var total = 0; //用于求累加和
for (i = 0; i < trs.length; i++) { //取到每一個商品的價格
var price = trs[i].children[3].innerHTML;
total = total + parseInt(price);
}
var t = document.getElementById("total");
//然后把total的值放入到t對象中
t.innerHTML = total;
}
function tk(btn){
}
</script>
</body>
</html>看到圖片上黑色的一行工具欄了嗎，在代碼中寫了呦?
在點(diǎn)擊加入購物車后 ，商品的信息會在購物車顯示，點(diǎn)擊兩次數(shù)量會加一，在購物車數(shù)量點(diǎn)加減數(shù)量會變化文章來源：http://www.zghlxwxcb.cn/news/detail-478459.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-478459.html
到了這里，關(guān)于Html購物車的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
