一、训练要点：

1、使用close（）方法关闭窗口；

2、使用confirm（）方法进行信息确认；

3、使用alert（）方法提示信息。

二、题目需求说明：

购物车页面如图1-1所示：

图1-1 购物车页面

(1)单击“关闭”按钮时，关闭当前页面。

(2)单击商品右侧的“移入收藏”链接，弹出提示信息“移入收藏后，将不在购物车显示，是否继续操作?”，如图1-2所示;单击“确定”按钮，弹出“移入收藏成功!”提示框，如图1-3所示。

图1-2 确认收藏图1-3 收藏成功

(3)单击商品右侧的“删除”链接，弹出提示信息“您确定要删除商品吗?”，如图1-4所示;单击“确定”按钮，弹出“删除成功!”提示框，如图1-5所示。

图1-4 确认删除图1-5 删除成功

(4)单击“结算”按钮，弹出结算信息页面，如图1-6所示: 单击“确定”按钮，弹出订单提交成功提示页面，如图1-7所示。

图1-6 确认结算信息图1-7 提交订单成功

三、实现思路及关键代码

(1)通过close( )关闭当前页面。

function close_plan(){
    window.close();
}

(2)使用confirm( )方法确认提示信息，使用“n”换行显示。

function collection(){
    var flag=confirm("移入收藏后，将不在购物车显示，是否继续操作?");

(3)使用alert( )方法弹出提示信息。

 if(flag==true){
        alert("删除成功!");
    }

(4)使用onclick事件调用函数。

<div class="cartList">
        <ul>
            <li onclick="collection();">移入收藏</li>
            <li onclick="del();">删除</li>
            <li onclick="collection();">移入收藏</li>
            <li onclick="del();">删除</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ul>
    </div>

四、完整代码实现：

HTML页面代码：shopping.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>制作简易的购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li onclick="collection();">移入收藏</li>
            <li onclick="del();">删除</li>
            <li onclick="collection();">移入收藏</li>
            <li onclick="del();">删除</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="js/shopping.js"></script>
</body>
</html>

js实现代码：shopping.js:

/**
 * Created by zongjuan.wang on 2016/6/1.
 */

/*关闭窗口*/
function close_plan(){
    window.close();
}
function collection(){
    var flag=confirm("移入收藏后，将不在购物车显示，是否继续操作?");
    if(flag==true){
        alert("移入收藏成功!");
    }
}
function del(){
    var flag=confirm("您确定要删除商品吗?");
    if(flag==true){
        alert("删除成功!");
    }
}
function accounts(){
    var flag=confirm("您本次购买的商品信息如下：\n\n商品名称：白岩松：白说、岛上书店；\n商品数量：2件；\n商品总计：46.00；\n运费：0元；\n\n请确认以上信息是否有误！！！");
    if(flag){
        alert("您的订单已提交");
    }
}

css代码：

body,ul,li,div,p,h1,h2{margin: 0;padding: 0;overflow: hidden;}
ul,li{list-style: none;}
.content{width: 810px; margin: 0 auto;}
.logo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.cartList{
    background: url("../images/shoppingBg.jpg") no-repeat;
    height: 414px;
    overflow: hidden;
    background-size:100%; 
}
.cartList ul{
    float: right;
    width: 100px;
    margin-top: 80px;
}
.cartList ul li{
    font-family: "微软雅黑";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    cursor: pointer;
}
.cartList ul li:nth-of-type(3){margin-top: 48px;}
.cartList ul li:nth-of-type(5){margin-top: 50px;}
.cartList span{display: inline-block;
    float: right;
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    margin-top: 5px;
    margin-right: 15px;
    cursor: pointer;
    font-weight: bold;}

最后，此页面实现所需要用到的图片：logo.jpg与shoppingBg.jpg可在此处下载：https://download.csdn/download/weixin_58330979/85081049https://download.csdn/download/weixin_58330979/85081049

更多推荐

[JavaScript实训] -- 制作简易的购物车页面