目录
一，JavaScript的核心知识点
- 思维导图：
二，购物车
- 项目组成：登录注册界面、购物车
- 登录注册实现原理：使用CSS排版，使用正则判断输入框的值，若满足所有条件就跳转到购 物车的界面
- 购物车的实现原理：使用table排版，主要实现的功能为全选、反选的功能、删除商品、增加商品个数
代码展示：
登录注册解界面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
/* 初始化 */
* {
margin: 0;
padding: 0;
}
/* 第一
布局 */
body {
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 渐变背景 */
background: linear-gradient(200deg, #f3e7e9, #e3eeff);
}
#container {
background-color: #FFF;
width: 650px;
height: 415px;
border-radius: 5px;
/* 设置阴影 */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
/* 相对位置 */
position: relative;
}
#form-box {
/* 设置绝对布局 */
position: absolute;
top: -10%;
left: 5%;
background-color: #d3b7d8;
width: 320px;
height: 500px;
border-radius: 7px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
/* 设置弹性布局 */
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
/* 动画过渡，加速后加速 */
transition: 0.5s ease-in-out;
}
.register-box,
.login-box {
height: 120%;
/* 弹性布局，垂直排列 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.hidden {
display: none;
transition: 0.5s;
}
h1 {
/* 设置文本居中 */
text-align: center;
margin-bottom: 25px;
/* 大写 */
text-transform: uppercase;
color: #fff;
/* 设置字间距 */
letter-spacing: 5px;
}
input {
background-color: transparent;
width: 70%;
color: #fff;
border: none;
/* 下边框样式 */
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding: 10px 0;
text-indent: 10px;
margin: 8px 0;
font-size: 14px;
letter-spacing: 2px;
}
input::placeholder {
color: #fff;
}
input:focus {
color: #a262ad;
outline: none;
border-bottom: 1px solid #A262AD;
transition: 0.5s;
}
input:focus::placeholder {
opacity: 0;
}
#form-box button {
width: 70%;
margin-top: 35px;
background-color: #f6f6f6;
outline: none;
border-radius: 8px;
padding: 13px;
color: #A262AD;
letter-spacing: 2px;
border: none;
cursor: pointer;
}
#form-box button:hover {
background-color: #A262AD;
color: #f6f6f6;
transition: background-color 0.5s ease;
}
.con-box {
width: 50%;
/* 设置弹性布局 */
display: flex;
/* 垂直排列 */
flex-direction: column;
/* 居中 */
justify-content: center;
align-items: center;
/* 绝对定位 */
position: absolute;
/* 居中 */
top: 50%;
transform: translateY(-50%);
}
.con-box.left {
left: -2%;
}
.con-box.right {
right: -2%;
}
.con-box h2 {
color: #8e9aaf;
font-size: 25px;
font-weight: bold;
letter-spacing: 3px;
text-align: center;
margin-bottom: 4px;
}
.con-box p {
font-size: 12px;
letter-spacing: 2px;
color: #8E9AAF;
text-align: center;
}
.con-box span {
color: #d3b7d8;
}
.con-box img {
width: 150px;
height: 150px;
opacity: 0.9;
margin: 40px 0;
}
.con-box button {
margin-top: 3%;
background-color: #fff;
color: #A262AD;
border: 1px solid #D3B7D8;
padding: 6px 10px;
border-radius: 5px;
letter-spacing: 1px;
outline: none;
cursor: pointer;
}
.con-box button:hover {
background-color: #D3B7D8;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="form-box">
<!-- 注册 -->
<div class="register-box hidden">
<h1>register</h1>
<input type="text" placeholder="用户名" />
<input type="email" placeholder="邮箱" />
<input type="password" placeholder="密码" />
<input type="password" placeholder="确认密码" />
<button id="register1">注册</button>
</div>
<!-- 登录 -->
<div class="login-box">
<h1>login</h1>
<!-- (长度在3~10位之间) -->
<input type="text" placeholder="用户名" />
<input type="password" placeholder="密码(6位数字)" />
<button id="login1">登录</button>
</div>
</div>
<!-- 去登录（左侧） -->
<div class="con-box left">
<h2>欢迎来到<span>手机之家</span></h2>
<p>快来领取你的专属<span>手机</span></p>
<img src="imgs/phone1.png">
<p>已有账号</p>
<button id="login"> 去登录</button>
</div>
<!-- 去注册（右侧） -->
<div class="con-box right">
<h2>欢迎来到<span>手机之家</span></h2>
<p>快来看看你的炫酷<span>手机</span></p>
<img src="imgs/phone2.png">
<p>没有账号？</p>
<button id="register">去注册</button>
</div>
</div>
<script type="text/javascript">
//切换div需要操作的元素
var login = document.getElementById('login');
var register = document.getElementById('register');
var form_box = document.getElementById('form-box');
var register_box = document.getElementsByClassName('register-box')[0];
var login_box = document.getElementsByClassName('login-box')[0];
//登录、注册需要操作的元素
var login1 = document.getElementById('login1');
var register1 = document.getElementById('register1');
//去注册的点击事件
register.onclick = () => {
form_box.style.transform = 'translateX(80%)';
login_box.classList.add('hidden');
register_box.classList.remove('hidden');
}
//去登录的点击事件
login.onclick = () => {
form_box.style.transform = 'translateX(0%)';
register_box.classList.add('hidden');
login_box.classList.remove('hidden');
}
//登录点击事件
login1.onclick = () => {
//拿得输入框的集合
var inputs = login_box.getElementsByTagName('Input');
//匹配用户名输入框的正则判断
var rex1 = /^\w{3,10}$/; //用户名（可以为数字、大小写字母、汉字）
var rex2 = /^\d{6}$/; //密码长度为6位
//用户名输入框的空值约束
if (inputs[0].value.length == 0) {
alert("请填写用户名!");
return false;
}
//密码输入框的空值约束
if (inputs[1].value.length == 0) {
alert("请填写密码!");
return false;
}
//用户名正则判断
if (!rex1.test(inputs[0].value)) {
alert("用户名格式有误!");
return false;
}
//密码正则判断
if (!rex2.test(inputs[1].value)) {
alert("密码有误!")
return false;
}
//跳转界面
location.href = "index55.html";
}
//注册点击事件
register1.onclick = () => {
//拿得输入框的集合
var inputs = register_box.getElementsByTagName('Input');
//匹配用户名输入框的正则判断
var rex1 = /^[0-9a-zA-Z]{3,10}$/; //用户名（可以为数字、大小写字母、汉字）
var rex2 = /^\d{6}$/; //密码长度为6位
var rex3 = /^[a-zA-Z][.][a-zA-Z][@][a-zA-Z][.][com]$/; //形如www.wwww@www.www
console.log(rex3.test("www.www@www.www"));
//空值约束
//用户名输入框的空值约束
if (inputs[0].value.length == 0) {
alert("请填写用户名!");
return false;
}
//邮箱输入框的空值约束
if (inputs[1].value.length == 0) {
alert("请填写邮箱!");
return false;
}
//密码输入框的空值约束
if (inputs`[2].value.length == 0) {
alert("请填写密码!");
return false;
}
//密码输入框的空值约束
if (inputs[3].value.length == 0) {
alert("请再次密码!");
return false;
}
//正则约束
//用户名正则判断
if (!rex1.test(inputs[0].value)) {
alert("用户名格式有误!");
return false;
}
//邮箱正则判断
if (!rex3.test(inputs[1].value)) {
alert("邮箱格式有误!")
return false;
}
//密码正则判断
if (!rex2.test(inputs[2].value)) {
alert("密码有误!")
return false;
}
//确认密码正则判断
if (!rex2.test(inputs[3].value)) {
alert("确认密码有误!")
return false;
}
//跳转界面
location.href = "index55.html";
}
</script>
</body>
</html>
购物车代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shopcar</title>
<style type="text/css">
#main {
padding: 30px 0px;
}
#cart {
/* 设置默认背景 */
background: url(imgs/goods.jpeg) center/cover;
padding: 40px;
}
#cart h1 {
color: white;
line-height: 40px;
padding: 0px 0px 10px 0px;
}
table.form {
border-collapse: collapse;
empty-cells: show;
margin: 20px 0px;
padding: 0px;
table-layout: fixed;
width: 100%;
}
table.form th,
table.form td {
color: white;
font-family: "bodoni mt condensed";
border-bottom: 1px solid #DDDDDD;
padding: 15px 10px;
text-align: left;
}
table.form {
border-top: 3px solid #DDDDDD;
}
.goods .goods-image img {
border: 1px solid #DDDDDD;
float: left;
height: 100px;
margin: 0px 20px 0px 0px;
}
img {
width: 130px;
height: 130px;
}
.goods .goods-information {
float: left;
}
.goods .goods-information ul {
color: #666666;
font-size: 12px;
line-height: 20px;
margin: 10px 0px 0px 0px;
}
.price,
.amount,
#total-amount {
color: #E00000;
}
#total-amount {
font-size: 22px;
}
.price em,
.amount em,
#total-amount em {
font-style: normal;
}
.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus {
background: #FFFFFF;
border: 1px solid #DDDDDD;
color: #333333;
float: left;
font-weight: bold;
margin: 0px;
outline: none;
text-align: center;
}
.combo .combo-minus,
.combo .combo-plus {
font-size: 16px;
height: 26px;
line-height: 26px;
padding: 0px;
width: 24px;
}
.combo .combo-value {
border-left: none;
border-right: none;
height: 20px;
line-height: 20px;
padding: 2px;
width: 40px;
}
#cart-delete {
margin-left: 20px;
}
#settlement {
background: #E00000;
border: none;
color: #FFFFFF;
float: right;
font-size: 16px;
height: 40px;
line-height: 40px;
margin: 0px;
outline: none;
padding: 0px;
width: 160px;
}
</style>
</head>
<body>
<div class="container">
<div id="cart">
<h1>购物车</h1>
<form action="#" method="post">
<table class="form">
<thead>
<tr>
<th width="8%">选择</th>
<th width="50%">商品</th>
<th width="13%">单价（元）</th>
<th width="15%">数量</th>
<th width="14%">金额（元）</th>
</tr>
</thead>
<tbody id="cart-goods-list">
<tr>
<td>
<input type="checkbox" name="good-id" value="1">
</td>
<td class="goods">
<div class="goods-image">
<img src="imgs/Y53s.jpeg">
</div>
<div class="goods-information">
<h3>VIVO x99 亿万像素 智能拍照手机</h3>
<ul>
<li>全新</li>
<li>支持7天无理由退货</li>
</ul>
</div>
</td>
<td>
<span class="price">￥<em class="price-em">498.00</em></span>
</td>
<td>
<div class="combo">
<input type="button" name="minus" value="-" class="combo-minus">
<input type="text" name="count" value="1" class="combo-value">
<input type="button" name="plus" value="+" class="combo-plus">
</div>
</td>
<td>
<strong class="amount">￥<em class="amount-em">498.00</em></strong>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="good-id" value="2">
</td>
<td class="goods">
<div class="goods-image">
<img src="imgs/T1.jpeg">
</div>
<div class="goods-information">
<h3>APPLE 智能 超高清触感优良</h3>
<ul>
<li>全新</li>
<li>支持7天无理由退货</li>
</ul>
</div>
</td>
<td>
<span class="price">￥<em class="price-em">598.00</em></span>
</td>
<td>
<div class="combo">
<input type="button" name="minus" value="-" class="combo-minus">
<input type="text" name="count" value="1" class="combo-value">
<input type="button" name="plus" value="+" class="combo-plus">
</div>
</td>
<td>
<strong class="amount">￥<em class="amount-em">598.00</em></strong>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<label>
<input type="checkbox" name="all">
<span>全选</span>
</label>
<a href="#" id="cart-delete">删除</a>
</td>
<td colspan="3">
<span>合计：</span>
<strong id="total-amount">￥<em id="total-amount-em">0.00</em></strong>
<input type="submit" value="立即结算" id="settlement">
</td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
</div>
<script type="text/javascript">
//需要操作的元素
var inputs = document.getElementsByName("good-id");//复选框
var all = document.getElementsByName("all")[0];//全选框
//全选复选框的点击事件
all.onclick = function() {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = this.checked;
}
// 再次调用计算价格的方法
sumprice();
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
var count = 0;
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].checked == true) {
count++;
}
}
if (count < inputs.length) {
all.checked = false;
} else {
all.checked = true;
}
sumprice();
}
}
//减少
var minus = document.getElementsByName("minus");
for (var i = 0; i < minus.length; i++) {
minus[i].onclick = function() {
var counts = this.nextElementSibling;
var count = parseInt(counts.value);
if (count > 1) {
counts.value = --count;
}
sumprice();
}
}
//增加
var plus = document.getElementsByName("plus");
for (var i = 0; i < plus.length; i++) {
plus[i].onclick = function() {
var counts = this.previousElementSibling;
var count = parseInt(counts.value);
counts.value = ++count;
sumprice();
}
}
//手动输入
var counts = document.getElementsByName("count");
for (var i = 0; i < counts.length; i++) {
counts[i].onblur = function() {
var count = parseInt(this.value);
if (isNaN(count) || count < 1) {
count = 1;
}
this.value = count;
sumprice();
}
}
//计算
function sumprice() {
var tbody = document.getElementById("cart-goods-list");
var tbodyTr = tbody.getElementsByTagName("tr");
var sumprice = 0;
for (var i = 0; i < tbodyTr.length; i++) {
//获取单价
var priceEm = tbodyTr[i].getElementsByClassName("price-em")[0];
var price = parseFloat(priceEm.innerText);
//获取数量
var counts = tbodyTr[i].getElementsByClassName("combo-value")[0];
var count = parseInt(counts.value);
//乘积
var chengji = price * count;
//把乘积弄到金额里面
var amountEm = tbodyTr[i].getElementsByClassName("amount-em")[0];
amountEm.innerText = chengji.toFixed(2); //保留两位小数
//获取单选框
var liD = tbodyTr[i].getElementsByTagName("input")[0];
if (liD.checked) {
sumprice += chengji;
}
}
var zong = document.getElementById("total-amount-em");
zong.innerText = sumprice.toFixed(2);
}
//删除
document.getElementById("cart-delete").onclick = function() {
var tbody = document.getElementById("cart-goods-list");
var del = [];
for (var i = 0; i < inputs.length; i++) {
1
if (inputs[i].checked) {
del.push(inputs[i].parentElement.parentElement);
}
}
for (var i = 0; i < del.length; i++) {
tbody.removeChild(del[i]);
}
all.checked = false;
sumprice();
}
document.getElementById("total-amount").onmouseover = function() {
document.getElementById("total-amount").style.cursor = "pointer";
}
document.getElementById("total-amount").onclick = function() {
var tbody = document.getElementById("cart-goods-list");
var tr = document.createElement("tr");
tr.innerHTML = '<tr>< td >
<input type = "checkbox" name = "good-id"value = "1" > < /td><td class="goods">
<div class="goods-image"><img src="imgs/nex3s.jpeg" ></div>
<div class="goods-information">
<h3>OPPO nexs 高清 超强游戏机</h3>
<ul><li>全新</li><li>支持7天无理由退货</li></ul>
</div>
</td><td>
<span class="price">￥<em class="price-em">498.00</em></span>
</td>
<td>
<div class="combo">
<input type="button" name="minus" value="-" class="combo-minus">
<input type="text" name="count" value="1" class="combo-value">
<input type="button" name="plus" value="+" class="combo-plus">
</div>
</td>
<td>
<strong class="amount ">￥<em class="amount-em">498.00</em></strong>
</td></tr>';
tbody.appendChild(tr);
}
</script>
</body>
</html>
今天的分享到此为止！下期给大家带来跟多精彩！
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
