位置: 编程技术 - 正文

JavaScript实现仿淘宝商品购买数量的增减效果(js模拟new)

编辑:rootadmin

推荐整理分享JavaScript实现仿淘宝商品购买数量的增减效果(js模拟new),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js 仿真,javascript模拟登录,js实现fizzbuzz,js 仿真,javascript可以模拟动画吗,javascript可以模拟动画吗,js 仿真,js实现v-model,内容如对您有帮助,希望把文章链接给更多的朋友!

近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验。

1.数量一定是数字

2.点击增减按钮的时候要能自动加1或减1

3.用户输入的内容如果是非数字,则不能输入(退格键除外)

4.用户输入的值最小为1

5.输入框离开焦点时要检查取值范围,确保输入框中必须是范围内的数字

基本就是以上几点

效果如下:

以下是Html代码

首先看第一条:

JavaScript实现仿淘宝商品购买数量的增减效果(js模拟new)

输入一定是数字

这很容易想到用keyup事件监测,用正则表达式替换非数字字符

这样就可以保证用户输入的一定是数字了,并且我们中间做了校验,如果使用parseInt转换为整数后值是NaN,就让值为1 ,但是我们会发现一个现象,就是用户如果想清空里面的值输入的时候,发现里面的值总是会变成1

这是不合理的,并且体验也不好,在输入非数字的时候,会先显示那个字符,然后被替换掉。

再观察一下当当网,京东这些网站,当输入非数字时,输入框根本就不会有任何动静,退格后 还能随意输入数字。经研究发现,他们使用了监控键盘的方法,拦截输入。

经过改进后:

这样我们保证了在用户使用取消回车(0),退格(8),左右箭头( )和数字时 正常输入,其他按键就统统失效了。这样就能保证输入的内容是数字了。

但是还有一个问题,用户使用退格键将内容清空后,用户没有输入的时候,值为空

这就要使用keyup和blur事件来弥补了

这样就能保证用户在输入数字的时候的校验。

使用按钮控制就更容易了:

好了,这样就完美解决用户输入了。

当然,这里仅仅说明了js的控制,里面还可以加入其它控制,比如最大限制,库存查询,服务器校验等。这里就不再赘述。

很全面的JavaScript常用功能汇总集合 本文主要总结了JavaScript常用功能总结,如一些常用的额JS对象,基本数据结构,功能函数等,还有一些常用的设计模式。目录:众所周知,JavaScript是动

在JavaScript中call()与apply()区别 如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.

鼠标悬停小图标显示大图标 页面元素为div-table-tr-td,对于td中的图片,鼠标悬停上则显示大图片,鼠标离开则大图片消失:首先需要知道jq创建dom元素语法;$(html标签),例如这里创

标签: js模拟new

本文链接地址:https://www.jiuchutong.com/biancheng/382749.html 转载请保留说明!

上一篇:JavaScript学习笔记整理之引用类型(javascript要怎么学)

下一篇:很全面的JavaScript常用功能汇总集合(很全面的成语)

  • 一般纳税人认定表
  • 不征税收入和免税收入所对应的成本与费用能否税前扣除
  • 代理记账公司账本
  • 增值税起征点的规定只适用于
  • 高新企业如何申报纳税
  • 债务重组损益的计算公式
  • 年化收益率的计算公式
  • 属于制造费用的有
  • 海关进口增值税发票抵扣期限
  • 返聘人员工伤可以申请工伤鉴定吗
  • 个人企业属于什么部门管理
  • 报企业所得税的利润总额怎么填
  • 预收账款开票可以抵扣吗
  • 专票和普票的税率哪个高
  • 民办中小学收费新政策
  • 出口专用发票可抵扣吗
  • 初级备考需要多长时间
  • 注销公司账不平怎么办
  • 预缴企业所得税是含税数还是不含税
  • 跨年的发票可以补开吗
  • bios设置启动顺序(图解说明)
  • deepin启动延时
  • 出差补贴算工资薪金吗
  • mac版chrome浏览器无法上网
  • 母子公司吸收合并优劣势
  • 厂区道路施工步骤
  • win7宽带连接错误651
  • php string
  • 非合理损耗怎么做分录
  • 房地产企业增值税怎么计算
  • 前端男神尤雨溪传奇
  • ts基础
  • 如何向企业账户转钱
  • 金银首饰消费税计税依据
  • servlet工作原理和生命周期
  • php的header函数
  • 商场代收款发票图片
  • thinkphp框架入门
  • 先收票后收货
  • three.js 入门
  • java中通配符作用
  • 来料加工成品如何入库
  • docker_practice
  • 出纳会计和现金会计的区别
  • 银行汇票和银行承兑汇票的区别
  • 预付账款的会计处理
  • 国家税务局监制的票还能用吗
  • 借款单属于外来单据吗
  • 计提法定盈余公积是什么意思
  • 餐饮服务税率是服务类税率还是货物类
  • 发票普票增票
  • sqlserver数据库操作
  • 民办非企业单位是私立还是公立
  • 应交税金应交增值税年底转平吗
  • 未入账分期金额要还吗
  • 增值税专用发票查询系统官方网站
  • 审计报告的分类不包含
  • 让渡资产使用权什么意思
  • 正数折扣发票
  • 应收账款无法收回会计分录
  • 内部使用的收据可以做原始凭证吗
  • 车贷管理费合理吗
  • 库存不够如何结算成本
  • 普通发票做帐有什么用
  • 收据能作为抵减成本吗
  • 旅游饮食服务企业会计核算的特点包括
  • mysql5.7对应的jdbc
  • ubuntu无法解压tar.gz
  • js经典案例代码大全
  • python的threading
  • 批处理修改文件后缀名
  • unity3d移动物体
  • vue.js 开发工具
  • unity 动态生成模型
  • JQuery.validate在ie8下不支持的快速解决方法
  • 如何查政审合不合格
  • 企业取得了哪些成绩
  • 哪些情况要交房租
  • 退回的汽车保险入什么科目
  • 会计开票要填哪些信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设