js实现上传图片预览,购物车加减

js效果(一):上传的图片预览


$("#path").change(function(){
  var objUrl = getObjectURL(this.files[0]) ;
  console.log("objUrl = "+objUrl) ;
  if (objUrl) {
    $("#img0").attr("src", objUrl) ;
  }
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
  var url = null ; 
  if (window.createObjectURL!=undefined) { // basic
    url = window.createObjectURL(file) ;
  } else if (window.URL!=undefined) { // mozilla(firefox)
    url = window.URL.createObjectURL(file) ;
  } else if (window.webkitURL!=undefined) { // webkit or chrome
    url = window.webkitURL.createObjectURL(file) ;
  }
  return url ;
}

<img src="images/head_int_03.gif" id="img0">
<input type="file" id="path"  name="path" style="display:none" οnchange="upfile.value=this.value" multiple="multiple">

checkbox实现全选功能:

function selectall() 
{ 
   var a = document.getElementsByTagName("input"); 
   for (var i=0; i<a.length; i++) 
      if (a[i].type == "checkbox") a[i].checked =!a[i].checked; 
  } 

实现购物车加减功能:

$.fn.iVaryVal=function(iSet,CallBack){
  /*
   * Minus:点击元素--减小
   * Add:点击元素--增加
   * Input:表单元素
   * Min:表单的最小值,非负整数
   * Max:表单的最大值,正整数
   */
  iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet);
  var C=null,O=null;
  //插件返回值
  var $CB={};
  //增加
  iSet.Add.each(function(i){
    $(this).click(function(){
      O=parseInt(iSet.Input.eq(i).val());
      (O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
      //输出当前改变后的值
      $CB.val=iSet.Input.eq(i).val();
      $CB.index=i;
      //回调函数
      if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
    });
  });
  //减少
  iSet.Minus.each(function(i){
    $(this).click(function(){
      O=parseInt(iSet.Input.eq(i).val());
      O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
      $CB.val=iSet.Input.eq(i).val();
      $CB.index=i;
      //回调函数
      if (typeof CallBack == 'function') {
        CallBack($CB.val,$CB.index);
        }
    });
  });
  //手动
  iSet.Input.bind({
    'click':function(){
      O=parseInt($(this).val());
      $(this).select();
    },
    'keyup':function(e){
      if($(this).val()!=''){
        C=parseInt($(this).val());
        //非负整数判断
        if(/^[1-9]\d*|0$/.test(C)){
          $(this).val(C);
          O=C;
        }else{
          $(this).val(O);
        }
      }
      //输出当前改变后的值
      $CB.val=$(this).val();
      $CB.index=iSet.Input.index(this);
      //回调函数
      if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
    },
    'blur':function(){
      $(this).trigger('keyup');
      if($(this).val()==''){
        $(this).val(O);
      }
      //判断输入值是否超出最大最小值
      if(iSet.Max){
        if(O>iSet.Max){
          $(this).val(iSet.Max);
        }
      }
      if(O<iSet.Min){
        $(this).val(iSet.Min);
      }
      //输出当前改变后的值
      $CB.val=$(this).val();
      $CB.index=iSet.Input.index(this);
      //回调函数
      if (typeof CallBack == 'function') {
                CallBack($CB.val,$CB.index);
            }
    }
  });
}
//调用
$( function() {
  
  $('.i_box').iVaryVal({},function(value,index){
  });
  
});


购物车加减功能2:

<script>
        $(function(){
            $(".add").click(function(){
                var t = $(this).parent().find(".text_box");
                t.val(parseInt(t.val())+1)
                setTotal();
            })
            $(".min").click(function(){
                var t = $(this).parent().find(".text_box")
                t.val(parseInt(t.val())-1)
                setTotal();
            })
            function setTotal(){
                $("#total").html((parseInt(t.val())*3.95).toFixed(2));
            }
            setTotal();
        })
    </script>

HTML:
<a href="javascript:;" class="J_minus"><div class="fl cir_btn border_2">-</div></a>
<input id="text_box" name="" type="text" value="1" class="J_input fl"/>
<a href="javascript:;" class="J_add"><div class="fl cir_btn border_2">+</div></a>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值