JavaScript兜兜网页练习

最新推荐文章于 2022-05-12 21:58:23 发布

Sahar-冷颜

最新推荐文章于 2022-05-12 21:58:23 发布

阅读量837

点赞数 2

分类专栏： JavaScript 文章标签：练习

本文链接：https://blog.csdn.net/yingzheada/article/details/80950058

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

大家有想做一下这个小练习的,可以吧网页样式和CSS样式复制下来,还有图片,就可以自己尝试着做了

首先是兜兜网页的图片素材

然后是兜兜网页的样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <script>
    </script>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />

</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg" ><span οnclick="gb()">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li id="jg0">¥21.90</li>
            <li><input type="button" name="minus" value="-"  οnclick="jian(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+"  οnclick="ja(0)"></li>
            <li id="price0">¥21.90</li>
            <li><p οnclick="sc()">移入收藏</p><p οnclick="de()">删除</p></li>
        </ul>
        <ul>
            <li id="jg1">¥24.00</li>
            <li><input type="button" name="minus" value="-"  οnclick="jian(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" οnclick="ja(1)"></li>
            <li id="price1">¥24.00</li>
            <li><p οnclick="sc()">移入收藏</p><p οnclick="de()">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice"> </li>
            <li><span οnclick="js()">结 算</span></li>
        </ol>
    </div>
</div>
</body>
</html>

兜兜网页的CSS样式

body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto;  font-family: "微软雅黑";}
.logo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    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;
}
.cartList ul{
    float: right;
    width: 450px;
}
.cartList ul:nth-of-type(1){
    margin-top: 125px;
}
.cartList ul:nth-of-type(2){
    margin-top:70px;
}
.cartList ul li{
    font-family: "微软雅黑";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    float: left;
}
.cartList ul li input[name="price"]{
    border: none;
    background: transparent;
    width: 45px;
    text-align: center;
}
.cartList ul li input[name="amount"]{
    width: 45px;
    text-align: center;
    border: 1px solid #999999;
    border-left: none;
    border-right: none;
    height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
    height: 25px;
    border: 1px #999999 solid;
    width: 25px;
    text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
    float: right;
    clear: both;
    margin-top: 60px;
}
.cartList ol li{
    float: left;
}
.cartList ol li:nth-of-type(1){
    color: #ff0000;
    width: 120px;
}
.cartList ol li 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;}

下面就是今天的重点了,可以实现收藏,结算,加减,价格实时变化等功能

<script>
    //关闭
    function gb(){
        close();
    }
    //移入收藏
    function sc(){
        var s=confirm("移入收藏后,将不再购物车展示,是否继续操作?");
        if(s){
            alert("移入收藏成功!");
        }else{
            alert("你已取消收藏!!");
        }
    }
    //删除
    function de(){
        var s=confirm("确认删除此条信息吗?");
        if(s){
            alert("删除成功!");
        }else{
            alert("你已取消删除!!");
        }
    }

    //结算
    function js(){
        //获取两本书的数量并转成数值类型
        var z=parseInt(document.getElementsByName("amount")[0].value);
        var w=parseInt(document.getElementsByName("amount")[1].value);
        //获取两本书的价格
        var d=document.getElementById("price0").innerHTML;
        var x=document.getElementById("totalPrice").innerHTML;
        //输出信息
         var s=confirm("你本次购买的商品信息如下:\n\n商品名称:白岩松:白说,岛上书店;\n商品数量:"+(z+w)+"件\n商品总计:"+x+";\n运费:0元;\n\n请确认以上信息是否有误" );
        //判断
         if(s){
            alert("你的订单已提交!");
        }else{
             alert("你已取消结算!!");
       }
    }
    //加 n代表哪本书
    function ja(n){
        //获取加后的价格
        var s=parseInt(document.getElementsByName("amount")[n].value)+1;
        //赋值
        document.getElementsByName("amount")[n].value=s;
        //调价格函数
        jg(n,s);
    }
    //减 n代表哪本书
    function jian(n){
        //获取减后的价格
        var s=parseInt(document.getElementsByName("amount")[n].value)-1;
        //判断
        if(s<0){
            alert("不能再减了");
        }else{
            //赋值
            document.getElementsByName("amount")[n].value=s;
        }
        //调价格函数
        jg(n,s);
    }
    //价格 n代表哪本书 s代表数量
    function jg(n,s){
        //判断是那本书
        if(n==0){
            //书的价格
            var jg=21.90;
            //加或减之后本书的总价格 保留小数点后两位数
            document.getElementById("price0").innerHTML="¥"+(jg*s).toFixed(2);
        }else{
            //书的价格
            var jg=24.00;
            //加或减之后本书的总价格 保留小数点后两位数
            document.getElementById("price1").innerHTML="¥"+(jg*s).toFixed(2);
        }
        //获取两本书的价格
        var d=document.getElementById("price0").innerHTML;
        var c=document.getElementById("price1").innerHTML;
        //转成数值类型
        d=parseInt(d.substring(1));
        c=parseInt(c.substring(1));
        //相加之后赋值 保留小数点后两位数
        var x=document.getElementById("totalPrice").innerHTML=(d+c).toFixed(2);
    }

</script>

认真看的大概都能看出在网页样式代码里有一对<script>标签里面什么都没有

没错,上面这些功能就是放到里面去的,多了一对<script>标签,想拷贝的朋友别忘了去掉