js 总结累计大全

最新推荐文章于 2023-04-14 18:10:45 发布
最新推荐文章于 2023-04-14 18:10:45 发布
阅读量238 收藏
点赞数
分类专栏： 2017年之前
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QIU1988YANG/article/details/54692207
版权
1选择  select  获取val text   更改其他class值

 

 　　　　　　　　　　<script type="text/javascript">
                        $(function(){
                            $(".select").change(function(){
                                var val = $(this).find("option:selected").val();
                                var text = $(this).find("option:selected").text();
                                $(".blank-name").text(text+"账户：");
                                $(".blank-input").attr("placeholder",text+"账户");
                            });
                        });
                    </script>
                 
                    <select class="select" name="name">
                        <option value="2">农业银行</option>
                        <option value="3">中国银行</option>
                        <option value="4">支付宝</option>
                        <option value="4">微信钱包</option>
                    </select>

 购物车 

地、单选 全选价格计算

// JavaScript Document


var checkedList = {};

function calculate(){
    var total = 0;
    $.each(checkedList,function(id,data){
        console.log(id,data);
        total += checkedList[id].price * checkedList[id].count;
    });

    $("#taotal").html("￥" + total);

}
/*单选*/
$(document).on("change",".onecheck",function(e){
    e.preventDefault();
    var $li = $(this).parents("li");
    var id = $li.attr("data-id");
    if($(this).prop('checked')){
        var count = $li.find(".num").val();
        checkedList[id] = {price:$li.attr("data-price"),count:count};
        $(this).next().addClass("active");
    }else{
        delete checkedList[id];
        $(this).next().removeClass("active");

    }
    var allChecked = true;
    $('.onecheck').each(function(){
        if(!this.checked){
            allChecked = false;
            return false;
        }
        console.log("xx");
    });
    console.log('allchecked',allChecked);
    $('.check-all').prop("checked",allChecked);
    calculate();
});

/*所有选项*/
$(document).on("change",".check-all",function(e){
    e.preventDefault();
    console.log( $(".squaredFour input"));
    $(".onecheck").prop('checked',$(this).prop("checked")).trigger('change');
    if($(this).prop('checked')){
        $(this).next().addClass('active');
    }else{
        $(this).next().removeClass('active');
    }
    console.log('all');
});

/*减商品*/
$(document).on("click",".down",function(e){
    e.preventDefault();
    var $li = $(this).parents("li");
    var $input = $li.find(".num");
    var origin = parseInt($input.val());
    $input.val(origin-1);
    $input.trigger('input');

});

/*加商品*/
$(document).on("click",".up",function(e){
    e.preventDefault();
    var $li = $(this).parents("li");
    var $input = $li.find(".num");
    var origin = parseInt($input.val());
    $input.val(origin + 1);
    $input.trigger('input');
});

/*改变文本输入*/
$(document).on("input",".num",function(e){
    e.preventDefault();
    var $li = $(this).parents("li");
    var id = $li.attr("data-id");

    if( checkedList[id] != undefined){
        var count = $(this).val();
        checkedList[id] = {price:$li.attr("data-price"),count:count};
        calculate();
    }

});



    <script type="text/javascript">
        //
        function upgoods($id){
            var $count =  $.trim($('.num').val());
            var url = ' {{ route('updateshoppingCart')}}';
            var $coun = parseInt($count,10)+1;
            $.get(url, {id: $id,count:$coun}, function (data) {
                if (data.code == 1) {

                }
            }, 'json');
        }

        //
        function downgoods($id){
            var $count =  $.trim($('.num').val());
            var url = ' {{ route('updateshoppingCart')}}';
            var $coun =  parseInt($count,10)-1;
            $.get(url, {id: $id,count:$coun}, function (data) {
                if (data.code == 1) {

                }
            }, 'json');

        }
        //删除购物车
        $(document).on("click",".deletegoods",function(e){
            e.preventDefault();
            var $li = $(this).parents("li");
            var $id = $li.attr("data-id");
            var url = ' {{ route('deleteshoppingCart')}}';
            $.get(url, {id: $id}, function (data) {
                if (data.code == 1) {
                    delete checkedList[$id];
                    calculate();
                    $li.remove();
                }
            }, 'json');

        });

        function empty(obj){
            for(var i in obj ){
                return false;
            }
            return true;
        }
        //提交购物车
        function SubmitshoppingCart() {
            var url = ' {{ route('submitshoppingCart')}}';
            var checked = checkedList;
            if(empty(checked)){
                alert('请选择商品');
           }else{
                $.get(url, {checkbx: checked}, function (data) {
                    if(data.code == 10){
                        location.href="orderdetails?id="+ data.orderid;
                    }else{
                        alert(data.ms);
                    }
                }, 'json');
            }
        }
    </script>










<article class="distribution_center_article">
    <div id="panel-239981" class="active my_shopping">
        <ul class="my_shopping_ul">
            @foreach($cart as $key=>$good)
                <li role="alert" class="alert goods10" data-id="{{$good->_id}}"
                    data-price="{{$good->goods->realPrice()}}" id="delete">
                    <p class="squaredFour">
                        <input type="checkbox" class="onecheck" name="check"/>
                        <a for="squaredFour"> </a>
                    </p>
                    <img src="{{$good->pic}}" alt=""/>

                    <div>
                        <h3>{{$good->goods['goodsname']}}</h3>
          <span>
          <button type="button" class="delete deletegoods" >
              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
          </button>
          </span></div>
        <span>

        <h2>{{--$item->goods->realPrice() ;?>--}}
            <strong> {{\App\Services\Utils::formatYuan($good->goods->realPrice())}}</strong></h2>
        <p class="text-center">
            <button type="button" class=" down " οnclick="downgoods('{{$good->_id}}')" >-</button>
            <input type="number" class="text-center num  deal spinner" value="{{$good->count}}" min="1" max="99" name="value">
            <button type="button" class="up" οnclick="upgoods('{{$good->_id}}')">+</button>
        </p>
        </span>
       </li>
            @endforeach
            <li class="total">
                <p class="squaredFour">
                    <input type="checkbox" class="check-all" id="btn1" value="None"
                           name="check"/>

                    <a for="squaredFour"></a>
                </p>

                <h2>全选</h2>

                <div>
                    <h2>合计:<strong id="taotal">￥0.00</strong></h2>

                    <p>不含运费</p>
                </div>
                <button type="submit" class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm1">
                    结算
                </button>
            </li>
                <div class="modal fade bs-example-modal-sm1 " tabindex="-1" role="dialog"
                     aria-labelledby="mySmallModalLabel" aria-hidden="true">
                    <!--地址弹窗-->
                    <div class="address-window">
                        <div>
                            <div class="modal-header">
                                <button type="button" class="" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">关闭</span></button>
                                <form>
                                    <input type="text" placeholder="深圳"/>
                                    <button type="submit">取消</button>
                                    <span><button type="submit" class="glyphicon glyphicon-search"></button></span>
                                </form>
                            </div>
                            <article class="receiving_address_article address-window_article">
                                <div class="active my_shopping">
                                    <ul id="adressreallfresh" >
                                        @if($address )

                                            @foreach($address as $k=>$v )
                                                <li role="alert" class="alert" id="adressrefresh">
                                                    <div>
                                                        <h3>{{$v->realname}}</h3>
                                                 <span>
                                                    <h2 class="">
                                                        {{$v->mobile}}
                                                    </h2>
                                                  </span>
                                                        <h5>送至：{{$v->province}}{{$v->city}}{{$v->area}} {{$v->address}}</h5>
                                                    </div>
                                                    <div>
                                                        <input type="hidden" name="setadressdefault" id="setadressdefault"
                                                               value="{{ route('addresslist',array('type'=>'setadressdefault'))}}"/>
                                                        <input type="radio" name="sex" value="male"
                                                               @if($v->default=='yes')
                                                               checked="checked"
                                                               @endif
                                                               onclick="setadressdefault('{{$v->_id}}')"><i>默认地址</i>
                                                        <p>
                                                            <img src="img/14_13.png" alt="" class="float-left width-15x"/>
                                                            <i class="float-left margin-l-5">编辑</i>
                                                        </p>
                                                        <input type="hidden" name="deladress" id="deladress"
                                                               value="{{ route('addresslist',array('type'=>'deladress'))}}"/>
                                                        <button type="button" class="delete"
                                                                onclick="deladress('{{$v->_id}}')">
                                                            <img src="img/71_03.png" alt="" aria-hidden="true"
                                                                 class="float-left width-15x"/>
                                                            <i class="float-left margin-l-5">删除</i>
                                                        </button>
                                                    </div>
                                                </li>
                                            @endforeach
                                        @else
                                            <li role="alert" class="alert"><P style="margin: 20px; text-align: center ">
                                                    请添加收货地址信息</P></li>
                                        @endif

                                    </ul>

                                </div>
                                <div class="btn btn-danger" style="float: right; margin:5px; margin-top: 10px;" οnclick="SubmitshoppingCart()"> 提 交
                                </div>
                                <div class="addto">
                                    <button type="button">+ 添加新地址</button>
                                </div>
                            </article>
                        </div>
                        <!--添加-->
                        <div class="increase-window">
                            <div class="preservation">
                                <h4>
                                    <button type="button" class="off" data-dismiss="modal" aria-label="Close"><span
                                                aria-hidden="true" class="glyphicon glyphicon-remove"></span></button>
                                </h4>
                                <form class="ajaxfrom">
                                    <input type="hidden" name="urladdadress" id="urladdadress"
                                           value="{{ route('addresslist',array('type'=>'addadress'))}}">
                                    <label><i>收货人 :</i> <input type="text" name="username" id="username" placeholder="真实姓名"></label>
                                    <br/>
                                    <label><i>联系方式 :</i> <input type="text" name="phone" id="phone" placeholder="必填信息">
                                    </label>
                                    <br/>
                                    <label><i>省份 :</i> <select id="Select1" name="Select1"></select> </label>
                                    <br/>
                                    <label><i>城市 :</i> <select id="Select2" name="Select2"></select> </label>
                                    <br/>
                                    <label><i>地区 : </i> <select id="Select3" name="Select3"></select> </label>
                                    <br/>
                                    <label><i>详细地址 : </i> <input type="text" id="adress" name="adress"
                                                                 placeholder="具体街道门牌号"> </label>
                                    <script type="text/javascript">
                                        addressInit('Select1', 'Select2', 'Select3');
                                    </script>
                                </form>
                                <div>
                                    <button οnclick="addadress()" type="button" class=" btn btn-danger">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </ul>
    </div>
</article>
View Code

 

霸气工作室
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js累加案例
Madage
05-01 2314
累加小案例：    用户输入一个数字n    计算 3/2 + 4/3 + 5/4 ... + (n+1)/n        var n = parseInt(prompt("请输入一个正整数"));  var sum = 0;       // 定义一个累加器（从0开始加）  for(var i = n; i &gt;= 2; i--){ sum += (n + 1) / n;    ...
js计算流量值的方法
11-14 3018
//计算流量值（ flowVlueBytes为流量的bytes字节数） function getFlow(flowVlueBytes){     var flow = "";     //如果赠送流量小于1MB.则显示为KB     if(flowVlueBytes/1024         flow = (Math.round(flowVlueBytes/1024) > 0 ? Ma
js中数组求和有哪些方法
m0_54566205的博客
03-17 2295
总的来说，使用 reduce 方法是最常用的对数组求和的方法，也是最简单和最优雅的写法。需要注意的是，使用 eval 函数存在一些安全性问题，不建议在生产环境中使用。需要注意的是，Math 对象本身并没有 sum 方法，我们需要自己定义。
JS怎么实现数组内的值累加？
weixin_48373171的博客
04-14 3595
怎么实现数组的每一个值进行累加呢？我只想到了三种方法，比较基础，也比较常用的，如果还有其他方法可以传授一下给我，谢谢！ 二、方法二：（使用reduce方法） 三、方法三：（使用forEach方法） 以上是我想到的比较常用且实用的方法，对你有帮助的话记得点个赞，让我们不断学习，不断进步！
JS数组求和的常用方法总结【5种方法】
10-17
同时，还可以结合其他数组操作技巧，如《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》等，进一步提升编程水平。在实践中不断探索和学习，才能更好地应对各种编程挑战。
JavaScript跑酷小游戏html源代码
最新发布
06-25
总结起来，JavaScript跑酷小游戏的开发涉及HTML构建基础结构，CSS实现视觉效果，以及JavaScript编写动态游戏逻辑。通过学习和实践这样的项目，开发者可以深入理解这三个核心技术的协同工作方式，为未来更复杂的Web...
javascript动态获取登录时间和在线时长
11-25
总结起来，这个例子展示了如何利用JavaScript实现动态计算用户在线时长的功能。通过获取和比较登录时间与当前时间，可以实时更新用户的在线状态，并以小时、分钟和秒的形式展示出来。这种方法在许多网站上用于跟踪...
原生js 秒表实现代码
12-09
总结来说，这个原生JavaScript秒表实现展示了如何利用DOM操作、事件处理和递归来模拟计时器功能。虽然存在精度限制，但对于初学者来说，这是一个很好的实践项目，可以帮助理解JavaScript与时间交互的基本概念。
使用js画图之饼图
10-24
总结来说，使用JavaScript绘制饼图涉及计算数据比例、转换为角度、绘制扇形以及可能的添加标签和交互功能。通过理解这些基本原理，你可以创建一个自定义的、可扩展的饼图绘制工具，满足特定的可视化需求。
JS对数组对象的去重，数量累计。
m0_49256439的博客
08-09 750
对数组对象的操作
JavaScript基本知识总结(全)
IT_Mr_guo的博客
05-24 9411
什么是JS JS是JavaScript的简称，这是一门最流行的运行在浏览器的脚本语言。 JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。 JS是一种轻量级的编程语言，可由所有的现代浏览器执行 JS的作用 DOM操作: 增删改查HTML元素 可以直接操作HMTL 动效: 可以通过JS完成各种动效 让网页动起来 交互: 让用户和网页形成交互 (点击、滑动、拖拽等...
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8311
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
js累加函数
hainanwc8的博客
03-15 7806
var arr = [      {id:0,score:"3"},      {id:0,score:"4"},      {id:0,score:"5"}    ]    function getScore(data){      var totle = 0;      for(var i = 0;i&lt;data.length;i++){        totle += Number(da...
JS算法之累加
lindali1115的博客
08-30 4208
最近在学JS算法，性能作为代码好坏的衡量标准之一。有时候使用算法可以计算的更加的速度～简单举个例子比如说累加这件事！ 比如说我们计算1+2+3+4... 1.常规思路是for循环代码如下： function sumUp(n){ let res = 0; for(let i = 0;i<=n;i++){ res += i } return res } 2.直接使用数学公式 (n+1)*(n/2) function sumUp(n){ .
JS常见算法-累加/累积
热门推荐
Judian6974的博客
08-08 1万+
累加：将一系列的数据加到一个变量里面。最后得到累加的结果。 empty var sum = 0; for(var i = 1;i <= 100;i++){ sum += i; } empty var h = 100; var sum = 0; for(var i = 0;i < 10;i++){ h = h / 2; sum += h; } sum =
js自动累加1
qq_44254672的博客
06-10 1758
<!DOCTYPE HTML> <html> <head> <title>自动累加1</title> <mate charset="utf-8" /> <style type="text/css"> *{ padding: 0px; marg...
JS 高级总结
weixin_34128237的博客
07-12 1880
一、查找HTML元素 　　通常，通过 JavaScript，您需要操作 HTML 元素。 　　1、通过 id 找到 HTML 元素 　　2、通过标签名找到 HTML 元素 　　3、通过类名找到 HTML 元素 提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 var x=document.getElementById("intro"); var y=d...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值