：

一、训练要点：

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

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

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

二、题目需求说明：

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

图1-1 购物车页面

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

(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”换行显示。

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

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

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

四、完整代码实现：

HTML页面代码：shopping.html：

js实现代码：shopping.js:

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可在此处下载：