js实现购物车加减以及价格计算功能

本文实例为大家分享了js实现购物车加减以及价格计算的具体代码,供大家参考,具体内容如下

需求说明:

1、单击“半闭”按钮时,关闭当前页面购物车页面
2、单击“移入收藏”弹出收藏提示
3、单击“删除”弹出确认删除提示
4、单击“结算”按钮,弹出结算信息页面窗口
5、自动计算商品总计
6、单击“删除”按钮,使用parentNode访问当前节点的父亲节点等,使用removeChild( )删除当前商品

效果图:

代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <style type="text/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("../image/02.jpg") no-repeat;*/
    /*height: 414px;*/
    overflow: hidden;
}
.cartList ul{
    display: flex;
    justify-content: space-between;
    /*float: right;*/
    /*width: 450px;*/
}
.cartList ul:nth-of-type(1){
    display: flex;
    margin-top: 125px;
}
.cartList ul:nth-of-type(2){
    margin: 20px 0;
}
.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: 40px;
}
.cartList ol li{
    float: left;
}
.cartList ol li:nth-of-type(1){
    color: #ff0000;
    width: 80px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
.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;}

    </style>
</head>

<!--onload,在加载时计算好原始金额-->
<body onload="total()">

<div class="content">
    <div class="logo">
        <span onclick="javascript:if (confirm('确认要关闭吗'))window.close() ">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>商品信息</li>
            <li>商品图片</li>
            <li>单价(元)</li>
            <li>数量</li>
            <li>金额(元)</li>
            <li>操作</li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center" id="first">
            <li>《平凡的世界》</li>
            <li><img src="./img/1.png" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
            <li id="price0">¥21.90</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>《昆虫记》</li>
            <li><img src="./img/2.png" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
            <li id="price1">¥24.00</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&nbsp;</li>
            <li><span>结算</span></li>
        </ol>
    </div>
</div>
</body>
</html>

<script>
    //减法
    function minus(index) {
        //获取当前数量的值
        var amounts=document.getElementsByName("amount");

        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value); //数量加1

        if (count<=1){
            alert("不能再减了,快没了!!");
        } else {
            //得到第一个amount的元素的value属性的值
            var count=parseInt(amounts[index].value)-1; //数量加1

            //重新把count的值绑定在数量文本框里
            amounts[index].value=count;
            var prices=document.getElementsByName("price");
            var price=parseFloat(prices[index].value);
            //乘以Math.pow(10,2)的原因为避免失真
            var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);

            document.getElementById("price"+index).innerHTML="¥:"+totalMoney;
        }

        total();

    }

    //加法
    function plus(index) {

        //获取当前数量的值
        var amounts=document.getElementsByName("amount");

        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value)+1; //数量加1

        //重新把count的值绑定在数量文本框里
        amounts[index].value=count;

        //当前操作端口的价格也要重新计算
        //得到当前端口的单价
        var prices=document.getElementsByName("price");
        var price=parseFloat(prices[index].value);
        //乘以Math.pow(10,2)的原因为避免失真
        var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);

        //把当前价格显示在文本中
        document.getElementById("price"+index).innerHTML="¥:"+totalMoney;

        total();
    }

    //求总金额

    function total() {

        //得到所有的数量
        var counts=document.getElementsByName("amount");

        //得到所有的单价
        var prices=document.getElementsByName("price");

        var sumMoney=0;

        for (var i=0;i<counts.length;i++){

            //乘以Math.pow(10,2)的原因为避免失真
            sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }

        //把总金额显示再指定的元素中
        document.getElementById("totalPrice").innerHTML="¥:"+sumMoney;

    }

    //加入收藏
    function save() {
        if (confirm("确认要收藏吗?")){
            alert("收藏成功!");
        }

    }
    //删除
    function delete1() {
        if (confirm("确认要删除吗?")) {
            var del=document.getElementById("first");
            del.parentNode.removeChild(del);
            alert("删除成功!!");
        }
    }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于JavaScript实现添加到购物车效果附源码下载

    我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构

  • vue.js购物车添加商品组件的方法

    现实向购物车添加商品组件 代码 <template> <div class="cartcontrol"> <!--商品减一区域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品数

  • JS实现简单加减购物车效果

    本文实例为大家分享了JS实现简单加减购物车的具体代码,供大家参考,具体内容如下 1.书写input输入框作为加减实现的效果. 2.加减按钮用button按钮来实现 3.利用js控制i的值作为输入框中的值. 实现的效果: 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{

  • js实现购物车加减和价格运算

    本文实例为大家分享了js实现购物车加减和价格运算的具体代码,供大家参考,具体内容如下 主要实现功能:购物车的加减,单件商品价格的运算,总价格的运算.价格保留两位小数. <div class="content"> <div class="logo"> <img src="images/dd_logo.jpg"><span onclick="guan()">关闭</span&g

  • js实现购物车商品数量加减

    本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下 Html <link rel='stylesheet' type='text/css' media='screen' href='../css/bootstrap.min.css'> <script src="../js/jquery-1.12.4.js"></script> <div style="width: 300px;margin: 30px

  • js实现购物车加减以及价格计算功能

    本文实例为大家分享了js实现购物车加减以及价格计算的具体代码,供大家参考,具体内容如下 需求说明: 1.单击"半闭"按钮时,关闭当前页面购物车页面 2.单击"移入收藏"弹出收藏提示 3.单击"删除"弹出确认删除提示 4.单击"结算"按钮,弹出结算信息页面窗口 5.自动计算商品总计 6.单击"删除"按钮,使用parentNode访问当前节点的父亲节点等,使用removeChild( )删除当前商品 效果图:

  • Android 购物车加减功能的实现代码

    Android 实现购物车加减功能,效果图如下所示: public class adderView extends LinearLayout implements View.OnClickListener, TextWatcher { private int amount = 0; //购买数量 private int goods_storage = Integer.MAX_VALUE; //商品库存 private OnAmountChangeListener mListener; priva

  • vue实现购物车加减

    本文实例为大家分享了vue实现购物车加减的具体代码,供大家参考,具体内容如下 通常我们会在模板中绑定表达式,模板是用来描述视图结构的.如果模板中的表达式存在过多的逻辑,模板会变得臃肿不堪,维护变得非常困难.因此,为了简化逻辑,当某个属性的值依赖于其他属性的值时,我们可以使用计算属性. 那么什么是计算属性呢? 计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新. 实现的效果图如下: 我是使用了bootstrap跟Vue去完成这个效果的. 首先导入包

  • Android组合式自定义控件实现购物车加减商品操作

    本文实例为大家分享了Android实现购物车加减商品操作的具体代码,供大家参考,具体内容如下 MainActivity.java public class MainActivity extends AppCompatActivity { private Addand mAddand; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setConte

  • Vue.js实现无限加载与分页功能开发

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >

  • Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能

    实现效果 UI组件依然是使用 Quasar Framework. 先来看一下效果: 加减.gif input type="number" 去掉上下小箭头 去掉上下小箭头,主要是css: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; } 实现

  • js实现仿购物车加减效果

    效果图:  代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt

  • JS实现日期加减的方法

    效果:成型日期-龄期=要求试验日期! 事件: 当改变成型日期文本框后触发事件!当改变龄期文本框后触发事件!代码:(说明:成型日期ID: tbcxrq     龄期ID: tblq      要求试验日期ID: tbyqsyrq) 复制代码 代码如下: <script type="text/javascript"> $(function() {            $("#<%=tbcxrq.ClientID %>").change(func

随机推荐