仿淘宝购物车数字文本加和减时数字上翻和下翻功能

最新推荐文章于 2019-08-08 11:33:34 发布
最新推荐文章于 2019-08-08 11:33:34 发布
阅读量293 收藏
点赞数
分类专栏： jquery javascript 文章标签： jquery 仿淘宝购物车 文本框数字特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanfang5188/article/details/95741436
版权

首先加载jQuery.js插件。
js 文件网上可以下载

然后，一个页面加入购物车里两个商品的文本框

 <table width="100%" border="0" class="tb_c lh20">
 <tr>
 <td>
<input type="text"  maxlength="3" id="goods1" goodsID="1"  value="1" shopCartID="7507"  price="50" class="sdddq"  onkeyup="this.value=this.value.replace(/\D/g,'')"> 
</td>
</tr>
 <tr>
 <td>
<input type="text"  maxlength="3" id="goods2"  goodsID="2"  value="1" shopCartID="7508" price="60"  class="sdddq"  onkeyup="this.value=this.value.replace(/\D/g,'')"> 
</td>
</tr>
</table>

然后文本框的样式
.sdddq {
font-family: “宋体”;
font-size: 12px;
height: 20px;
line-height:20px;
width: 70px;
text-align:center;
padding-bottom:4px;
}

然后在购物车页面里的初始化,就是生成 一个带加和减小按钮的div覆盖在文本框上

<script type="text/javascript">
$(document).ready(function () {
    $(".tb_c  .sdddq").each(function () {
        var id = "#" + $(this).attr("id");//文本框ID
        var shopCartID = $(this).attr("shopCartID");//购物车ID
        var goodsID = $(this).attr("goodsID");//商品ID
        var price = $(this).attr("price");//商品价格
        //var addressState;
        //alert(shopCartID);
        //alert(value);
        inputp.addNew($(id), 1, goodsID, shopCartID, price);
    });
</script>

最重要的一个js文件

var inputp={
		indexInput:0,
		
		addNew:function(obj,stepNum,goodsID,shopCartID,price){
		//alert(obj);
			this.initNew(obj,stepNum,goodsID,shopCartID,price);
			this.indexInput++;
		},
		getDigit:function(val,num){
			var digitNum=0;
			if(num.toString().split(".")[1]){
				digitNum=num.toString().split(".")[1].length;
			}
			 
			if(digitNum>0){
		 		val=val.toFixed(digitNum);
			}
			return val;
			
		},
		initNew:function(obj,stepNum,goodsID,shopCartID,price){
			var iptID="#"+obj.attr("id");
			 //obj=$(iptID);
			
			
			var width=obj.width();
			var height=obj.height();
			var height1=height;

			var _root = this;
		 	width+=3;
			//height+=0; 
			 
			obj.css("border-style","none");
			obj.css("border-width","0px");
		   
			obj.css("width",width-height1*2-2);
			//obj.css("height",height+3+"px");
			obj.css("text-align","center");
			obj.css("outline","none");
			obj.css("vertical-align","middle");
			obj.css("line-height",height+"px");
			
			
			obj.wrap("<div id='"+obj.attr('id')+"T' style='position:relative;overflow:hidden;width:"+width+"px;height:"+height+"px;border: 1px solid #CCC;line-height:20px;'></div>");
			
			obj.before("<div id='"+obj.attr('id')+"l'  onselectstart='return false;' style='-moz-user-select:none;cursor:pointer;text-align:center;width:"+height1+"px;height:"+height1+"px;line-height:"+height1+"px;border-right-width: 1px;border-right-style: solid;border-right-color: #CCC;float:left'>-</div>");
			//obj.after(" <div id='"+obj.attr('id')+"r'  onselectstart='return false;' style='-moz-user-select:none;cursor:pointer;text-align:center;width:"+height1+"px;height:"+height1+"px;line-height:"+height1+"px;border-left-width: 1px;border-left-style: solid;border-left-color: #CCC;float:right'>+</div>");
			obj.before("<div id='"+obj.attr('id')+"r'  onselectstart='return false;' style='-moz-user-select:none;cursor:pointer;text-align:center;width:"+height1+"px;height:"+height1+"px;line-height:"+height1+"px;border-left-width: 1px;border-left-style: solid;border-left-color: #CCC;float:right'>+</div>");
			
			if(obj.val()<=1){
				var jianid="#"+obj.attr('id')+"l";
				$(jianid).text("");
				$(jianid).css("cursor","default");
			}
			
		    if(obj.val()>=200)
			{   
			    var jiaid="#"+obj.attr('id')+"r";
				$(jiaid).text("");
				$(jiaid).css("cursor","default");
			
			}
			
			$("#"+obj.attr('id')+"l").click(function(){
				
				_root.leftDo(obj,stepNum,goodsID,shopCartID,price);
			});
			$("#"+obj.attr('id')+"r").click(function(){
				_root.rightDos(obj,stepNum,goodsID,shopCartID,price);
			});
			
			
		},
		leftDo:function(obj,stepNum,goodsID,shopCartID,price){
			var val=this.formatNum(obj.val());
			val=Math.abs(val);
			val-=stepNum;
			
			val=this.getDigit(val,stepNum);
			 //alert(val);
			if(val<1){
				val=1;
				obj.val(1);
				var jianid="#"+obj.attr('id')+"l";
				$(jianid).text("");
				$(jianid).css("cursor","default");
				
			}else{
			    //$(jianid).text("-");
			    //alert(val);
			    var jianid="#"+obj.attr('id')+"r";
				$(jianid).text("+");
				$(jianid).css("cursor","pointer");
				if(val==1)
				{
				var jianid="#"+obj.attr('id')+"l";
				$(jianid).text("");
				$(jianid).css("cursor","default");
				}
				this.moveDo(obj,val,true,stepNum);
				 var method="updateGoodsSum";
                 gaijia(method,shopCartID,goodsID,val); 
				
			};
			
			var zj=price*(val);
             $('#xj_'+goodsID).text("¥"+zj);
			
			
		},
		rightDos:function(obj,stepNum,goodsID,shopCartID,price){
			
			var val=this.formatNum(obj.val());
			val=Math.abs(val);
			val+=stepNum;
			val=this.getDigit(val,stepNum);
			
			//alert(val);	
			
			 if(val>200)
             {
                val=200;
                obj.val(200);
                //alert(obj.val());
                var jiaid="#"+obj.attr('id')+"r";
				$(jiaid).text("");
				$(jiaid).css("cursor","default");
                 
             }else
             {
                 //n_b=n_b+1;
                var jianid="#"+obj.attr('id')+"l";
				$(jianid).text("-");
				$(jianid).css("cursor","pointer");
                
                  if(val==200)
                 {
                    var jiaid="#"+obj.attr('id')+"r";
				    $(jiaid).text("");
                     $(jiaid).css("cursor","default");
                 }
                 this.moveDo(obj,val,false,stepNum);
                 var method="updateGoodsSum";
                 gaijia(method,shopCartID,goodsID,val); 
                
                 
             }
             
             var zj=price*(val);
             $('#xj_'+goodsID).text("¥"+zj);
			 
		},
		moveDo:function(obj,num,isup,stepNum){
			var startTop=0;
			var endTop=0;
			if(stepNum>=1){
				if(num.toString().split(".")[1]){
					 num=num.toString().split(".")[0];
					 
					 obj.val(num);
				}
			}
			
			
			var num1=num;
			var lens1=num.toString().length;
			var divwidth=parseFloat(obj.css("font-size"))/2;
		 	if(isup){
				//obj.val(num1);
				var isDecimal=false;
			 	for(i=lens1-1;i>=0;i--){
					var s=num.toString();
					var s1=s.substr(i,1);
					var s1num=parseFloat(s1);
					if(s1num!=9||isNaN(s1num)){
						if(isNaN(s1num)){
							//num=parseFloat(s.substr(i-1,lens1-i));
//							num++;
//							num=this.getDigit(num,stepNum);
                            //isDecimal=true;
						}else{
							num=parseFloat(s.substr(i,lens1-i));
							num++;
							break;
						}
						
					}
				}
				//num=this.getDigit(num,stepNum)
				startTop=-20;
				endTop=0;
			}else{
				var isDecimal=false;
			 	for(i=lens1-1;i>=0;i--){
					var s=num.toString();
					var s1=s.substr(i,1);
					var s1num=parseFloat(s1);
				 	if(s1num!=0||isNaN(s1num)){
						
						if(isNaN(s1num)){
							//num=parseFloat(s.substr(i-1,lens1-i));
//							num=this.getDigit(num,stepNum);
							isDecimal=true;
						}else{
							num=parseFloat(s.substr(i,lens1-i));
							break;
						}
					}
				}
				if(isDecimal){
					num=this.getDigit(num,stepNum);
				}
				startTop=20;
				endTop=0;
			}
		 
			
			if($("#"+obj.attr('id')+"Num").length <1){
				//background-color:#fff;
				var numstr=num.toString();
				var widths=divwidth*numstr.length;
				var stri="<div id='"+obj.attr('id')+"sy' style='position:relative;width:0px;height:0px'><div id='"+obj.attr('id')+"Num' style='width:"+widths+"px;z-index:100;position:absolute;height:"+obj.height()+"px;top:"+startTop+"px; line-height:"+obj.height()+"px;font-family: "+obj.css("font-family")+";font-size:"+obj.css("font-size")+";'>";
				for(i=0;i<numstr.length;i++){
					var nums=numstr.substr(i,1);
					if(nums=="."){
						stri+="<div style='float:left;width:"+divwidth+"px;'>&nbsp;";
					}else{
						stri+="<div style='float:left;width:"+divwidth+"px;background-color:#fff'>";
						stri+=nums;
					}
					stri+="</div>";
				}
				stri+="</div></div>";
				 
				$("#"+obj.attr('id')+"T").prepend(stri);
			 	var leftOff=0;
				if(num1.toString().length-num.toString().length>0){
					leftOff=(divwidth*(num1.toString().length-num.toString().length))/2;
				}
				var pz=0;
				if(/msie/.test(navigator.userAgent.toLowerCase())){
					pz=0; 
				}
     			if(/firefox/.test(navigator.userAgent.toLowerCase())){
					pz=-0.6; 
				}
				if(/webkit/.test(navigator.userAgent.toLowerCase())){
					 
				}    
			 	if(/opera/.test(navigator.userAgent.toLowerCase())){
					//pz=1;
				} 
				var leftpx=(obj.width()/2)+obj.height()-($("#"+obj.attr('id')+"Num").width()/2)+1+leftOff+pz;
			 	$("#"+obj.attr('id')+"Num").css("left",leftpx);
				$("#"+obj.attr('id')+"Num").animate({ 
					top:endTop+'px'
					//,opacity:0.4
				},  
				300,  
				function(){  
					$("#"+obj.attr('id')+"sy").remove();
					if(isup){
					     obj.val(num1);   
					}else{
						obj.val(num1);
					}
				});  
			}		
		}
		,
		
		formatNum:function(val){
			var val=parseFloat(val);
			if(isNaN(val)){ 
				val=0;
			}
			return val;	
		}
		
	};

以上代码即可完成加入购物车数字上翻下翻效果，是不是很棒啊！如果不懂的地方可以评论。
演示网站是我做的，如果有不懂的地方可以v我，shisezhe0

演示网址https://www.shisezhe.com/shoppingCart.html
说明：如果直接点上面的网址会因为购物车里没有商品而跳出，请到商品页添加几个商品就可以了

yuanfang5188
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 数字向上翻效果,Vue.js实现大屏数字滚动翻转效果
weixin_35085438的博客
06-04 1931
大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果：整体思路：在实现此效果之前，我们先来捋一下思路，用思维导图来设计一下我们的实现步骤，如下：你可以审查元素，下载数字背景图片，复制图片地址，或者使用其他背景图片、背景颜色有了以上的设计流程，我们先来简单实现一下：// CSS代码.box-item {po...
Selenium实现将淘宝商品加入购物车
zcl19971129的博客
10-20 294
代码 from selenium import webdriver import time driver=webdriver.Firefox() # 隐式等待 driver.implicitly_wait(10) # 打开百度 driver.get('http://www.baidu.com') # 定位搜索框，输入内容 shuru=driver.find_element_by_id('kw') shuru.send_keys('淘宝官网') #截图 driver.get_screenshot_a
仿购物车加减数字
weixin_30616969的博客
11-01 171
html代码： <div class="gw_num"> <em class="jian">-</em> <input type="text" value="1" class="num"/> <em class="add">+</em> </div> css样式： .gw_num{borde...
jQuery实现购物车数字加减效果
06-25
经常会写到购物车这块，而购物车很多就有加减这个效果（可以将HTML代码复制多个，同时支持），小小的总结了一下
js——input框实现淘宝一样的点击后商品数量的增加和减少
u014796999的博客
10-23 1万+
//商品数量的增加                 function number(){                 var Input0=document.getElementById('input0');                 var Input1=document.getElementById('input1');                 var Input2=
商城购物车模块-自定义数字加减控件
cjm2484836553的博客
11-06 3461
可实现： 1.加减功能 2.点击背景变色 3.有最大值和最小值限制效果如下： 源码下载地址：https://github.com/junmei520/JMAddSubView现如今，无论什么软件都避免不了陷入”盈利“的爱河。这也是人之常情，唯有资金全备，才会有下文可谈。于是乎，我也开始学习做与商城有关的项目啦。我发现在商城购物车模块，这种简单的加减功能，如若直接零散地写在代码中，还要对它进行
Android实现仿淘宝购物车增加和减少商品数量功能demo示例
01-04
本文实例讲述了Android实现仿淘宝购物车增加和减少商品数量功能。分享给大家供大家参考，具体如下： 在前面一篇《Android实现的仿淘宝购物车demo示例》中，小编简单的介绍了如何使用listview来实现购物车，但是仅仅...
Android 购物车加减功能的实现代码
08-19
Android 购物车加减功能的实现代码 Android 购物车加减功能是指在 Android 应用程序中实现购物车中商品数量的加减操作。这种功能对于电子商务应用程序非常重要，因为它可以让用户方便地购买商品。この文章将详细...
数字变化时的滚动效果（VUE）
sinat_29740819的博客
10-20 1万+
需求：数字变化时，让数字有个滚动效果 语言：vue ------------------HTML------------------ &lt;div id="demo"&gt; &lt;div class="nwwest-roll" id="nwwest-roll"&gt; &lt;ul id="roll-ul" class="roll-ul"&a
淘宝购物车js代码
weixin_44389021的博客
01-22 4395
function my$(id){ return document.getElementById(id); } function myName(className) { return document.getElementsByClassName(className) } var cheAll=my$("j_cbAll"); var check=myName("xuan") ...
仿淘宝购物车demo 增加和减少商品数量
gfjjggg的博客
11-05 2596
仿淘宝购物车demo 增加和减少商品数量
购物车数字加减按钮
热门推荐
calangan的博客
05-10 2万+
购物车数字加减按钮
vue实现一个数字滚动效果
乐夫天命兮的博客
08-08 9168
<template> <div class="num-block"> <div class="num-block_show"> <div class="num-block_numbers" :class="{'ellipsis': !isNum(item)}" v-for="(item, key) in nu...
购物车加减的简单实现
qingxuan521721的博客
11-22 2983
简单实现购物车加减      效果图                首先在values文件下创建一个attrs样式   attrs样式     布局 activity——main <RelativeLayout xmlns:android="http://schema
Js实现淘宝购物车类似功能(DOM综合应用)
Carrywill的博客
02-18 1万+
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 具体效果有：1.可以全选，全不选商品。2.选中的商品，点击下面“删除所选”按钮可以批量删除3.每个商品，可以在该商品信息栏最后的“删除”按钮删除该商品4.每个商品，可以在该商品信息栏增加或减少商品的数量，改变后该商品的小计价格及最后的商品总价自动发生变化。阅读提示：html是网上练习的模板，css部分也没有什么好说...
利用 jQuery 来创建一个淘宝购物车小组件
你华还是你华
03-27 1073
我爱撸码，撸码使我感到快乐！ 大家好，我是Counter 利用了jQuery完成了淘宝购物车小组件，当然能不能用原生js来完成，当然可以，不过今天就是想用jQuery来写，任性一回，HTML代码不多才4行，CSS样式也不多，主要是功能，你要是能在里面输入除了0~20的整数，算我输，嘿嘿。主要需求就是购物车里的商品可以是0到20件，少了不行，多了装不下，就是这样。(记得如果有bug就留言我哦，我快马...
仿淘宝购物车demo---增加和减少商品数量
qq_43682716的博客
02-09 1016
仿淘宝购物车demo---增加和减少商品数量
购物车中数量增加与减少 根据数量改变总体价格 限制输入框输入其他非数字
Debug_zhang的博客
06-10 2809
$(".increment").click(function () { var t = $(this).parent().find('input[class*=itxt]'); t.val(parseInt(t.val())+1); getTotalPrice(); }) $(".decrement").click(function () { var t
写手机淘宝购物车功能介绍和测试要点
最新发布
07-13
手机淘宝购物车是淘宝App中的一个重要功能，它允许用户将想要购买的商品添加到购物车中，方便用户统一管理和结算购物车中的商品。下面是手机淘宝购物车功能的介绍和测试要点： 功能介绍： 1. 添加商品：用户可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值