jQuery在購物車的使用
任务时间：时间未知
安装 Nginx
yum install -y nginx
启动 Nginx
service nginx start
访问 Nginx 页面
http://<您的 CVM IP 地址> 会看到 Nginx 的默认页面
创建HTML文件
任务时间：时间未知
创建目录
mkdir /usr/share/nginx/html/shop
创建HTML文件
touch /usr/share/nginx/html/shop/cart.html
编辑HTML文件
编辑 HTML 文件， 输入如下代码， 作为该系列实验的模版文件，它包含了 HTML 文件的基本结构，以及 编写 CSS 样式的 style 区域。
- 编辑 /user/share/nginx/html/shop/cart参考内容如下
示例代码：/data/cart.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery购物车</title>
<style>
/*数量框字体居中*/
.textNum {
text-align: center;
}
/*****/
span {
color: red;
}
label {
margin-left: 20px;
}
input[value='删除'] {
color: green;
}
/*总价格颜色*/
#total {
color: red;
font-size: 1em; /*字体大小为原来的1倍*/
}
</style>
</head>
<body>
<div id="bigbox">
<div id="container" style="height:220px;width:620px;border:1px solid gray;margin:0 auto;">
<p>
<input type="checkbox" name="ckall" value="" class="box" checked="checked"/>
<label>电视：</label>
<input type="button" name="name" value="-" class="reduce" disabled="disabled"/>
<input type="text" name="name" value="0" class="textNum" disabled="disabled"/>
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="unitPrice">1</span><strong>￥ |</strong>
<label>小计：</label>
<span class="subtotal">0</span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<p>
<input type="checkbox" name="ckall" value="" class="box" checked="checked"/>
<label>冰箱：</label>
<input type="button" name="name" value="-" class="reduce" disabled="disabled"/>
<input type="text" name="name" value="0" class="textNum" disabled="disabled"/>
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="unitPrice">2</span><strong>￥ |</strong>
<label>小计：</label>
<span class="subtotal">0</span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<p>
<input type="checkbox" name="ckall" value="" class="box" checked="checked"/>
<label>手机：</label>
<input type="button" name="name" value="-" class="reduce" disabled="disabled"/>
<input type="text" name="name" value="0" class="textNum" disabled="disabled"/>
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="unitPrice">3</span><strong>￥ |</strong>
<label>小计：</label>
<span class="subtotal">0</span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<p>
<input type="checkbox" name="ckall" value="" class="box" checked="checked"/>
<label>电脑：</label>
<input type="button" name="name" value="-" class="reduce" disabled="disabled"/>
<input type="text" name="name" value="0" class="textNum" disabled="disabled"/>
<input type="button" name="name" value="+" class="add" />
<label>单价：</label>
<span class="unitPrice">4</span><strong>￥ |</strong>
<label>小计：</label>
<span class="subtotal">0</span><strong>￥</strong>
<input type="button" name="name" value="删除" class="deleteOne" />
</p>
<hr />
<p style="height:30px;width:470px;margin-left:60px;margin:0 auto;">
<input type="button" name="name" value="全选" id="allSelect" />
<input type="button" name="name" value="取消全选" id="notSelect" />
<input type="button" name="name" value="批量删除" id="deleteAll" />
<input type="button" name="name" value="清零" id="zero" />
<input type="text" name="name" value="" id="total" style="width:100px;" />
<strong>.00￥</strong>
</p>
</div>
</div>
</body>
</html>
访问一下看下效果：
http://<您的 CVM IP 地址>/shop/cart.html
编写JQuery脚本
任务时间：时间未知
导入远程库
在 style标签后添加导入远程库代码
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
写入jQuery动态脚本
在远程库后面输入如下代码 参考内容如下
示例代码：/data/cart.js
<script>
//计算总价，编写总价方法
function totalPrice() {
var total = 0;
$(".subtotal").each(function () { //遍历所有小计元素
var all = parseInt($(this).text());
total += all;
})
$("#total").val(total);
};
//减号逻辑
function reduce(){
$(".reduce").click(function () {
var num = $(this).siblings(".textNum").val(); //获取数量框里的数值
num--; //单击“-”减号时，数量递减
$(this).siblings(".textNum").val(num); //把数量变化后的新值放入数量框中
if (num <= 0) {
$(this).prop("disabled", true); //当输入框内数值为0时，使“-”减号处于不可用状态。
};
var unitPrice = $(this).siblings(".unitPrice").text(); //获取单价
var subtotal = unitPrice * num; //用单价乘以数量计算得到单个小计的值
$(this).siblings(".subtotal").text(subtotal); //把得到的小计值放入数量框中显示
totalPrice();//调用“总价”方法，使每点击减号，数量变化时，总价跟着变化
})
}
//加号逻辑
function add(){
$(".add").click(function () {
var num = $(this).siblings(".textNum").val();
num++;
$(this).siblings(".textNum").val(num);
if (num > 0) {
$(this).siblings(".reduce").prop("disabled", false); //判断当输入框内数值大于0，使“-”减号处于解封可用状态。
};
var unitPrice = $(this).siblings(".unitPrice").text();
var subtotal = unitPrice * num;
$(this).siblings(".subtotal").text(subtotal);
totalPrice(); //调用“总价”方法，使每点击加号，数量变化时，总价跟着变化
})
}
//单行删除商品
function deleteOne(){
$(".deleteOne").click(function () {
$(this).parent().remove();
totalPrice();
})
}
//全部删除商品
function deleteAll(){
$("#deleteAll").click(function () {
$(".box:checked").parent().remove(); //把被选中的复选框所在的区域删除
totalPrice();
})
}
//全选
function allSelect(){
$("#allSelect").click(function () {
$(".box").prop("checked", true);
totalPrice();
})
}
//取消全选
function notSelect(){
$("#notSelect").click(function () {
$(".box").prop("checked", false);
$(".textNum").val(0);
$(".subtotal").text(0);
$("#total").val(0);
});
}
//全部清零
function zero(){
$("#zero").click(function () {
$(".textNum").val(0);
$(".subtotal").text(0);
$("#total").val(0);
});
}
//初始化函数
$(function () {
alert("测试网页");
reduce(); //减号逻辑
add(); //加号逻辑
deleteOne(); //单行删除商品
deleteAll(); //全部删除商品
allSelect(); //全选
notSelect(); //取消全选
zero(); //全部清零
})
</script>
访问一下看下效果：
http://<您的 CVM IP 地址>/shop/cart.html