<!DOCTYPE html>

 <head>

     <meta charset="utf-8" />

     <title>无标题文档</title>

 <style>

 *{

     margin: 0;

     padding: 0;

 }

 h1{

     text-align: center;

 }

 .box {

     width: 75px;

     height: 48px;

     position: relative;

     line-height: 22px;

     text-align: center;

     display: block;

     vertical-align: middle;

     margin: 100px auto;

 }

 .txt{

     width: 50px;

     height: 45px;

     line-height: 45px;

     text-align: center;

     border: 1px solid #ddd;

     padding: 0;

     float: left;

 }

 .control{

     float: left;

 }

 .btn {

     width: 22px;

     line-height: 22px;

     background-color: #eee;

     border: 1px solid #ddd;

     text-decoration: none;

     color:#333;

     display: block;

     margin-left: -1px;

     margin-bottom: -1px;

 }

 </style>

 </head>

 <body>

     <h1>电商购买数量加减效果</h1>

 <div class="box">

     <input type="text" value="1" class="txt" id="txt">

     <div class="control">

         <a class="btn" href="javascript:;" id="btn1">＋</a>

         <a class="btn" href="javascript:;" id="btn2">－</a>

     </div>

 </div>

 </body>

 </html>

 <script type="text/javascript">

     // 功能需求：

     // 1.当点击加号按钮时，购物车的数字会增加

     // 2.当点击减号按钮时，购物车的数字会减少

     //  作业注意：

     //      1)数据类型检测与数据类型转换

     //      2)数字减少的时候不能少于0

     var txt = document.getElementById('txt'),

         btn1 = document.getElementById('btn1'),

         btn2 = document.getElementById('btn2');

 //  加号按钮添加事件

     btn1.onclick = function () {

 //        console.log(typeof txt.value);

 //        txt.value++;

 //      库存200

         if( txt.value < 200){

             txt.value = parseInt(txt.value) + 1;

         }else {

             txt.value = 200;

         }

 //      点击加号就把鼠标指针换成小手状态

         btn2.style.cursor = "pointer";

     }

     btn2.style.cursor = "not-allowed";

     btn2.onclick = function () {

 //      最小值应该是1

         if(txt.value > 1){

             txt.value = parseInt(txt.value) - 1;

         }

 //      如果值等于1的时候，把鼠标指针换成不允许点击的样式

         if(txt.value == 1 ){

             btn2.style.cursor = "not-allowed";

         }

     }

 </script>

主要要考虑：

(1).在+ 、- 时候出现的数量低于1或者高于库存量

(2).在减到1的时候，- 号的按钮会被设置成不能点击:

  btn2.style.cursor = "not-allowed";

JavaScript--天猫数量输入框的更多相关文章

  1. javascript脚本设置输入框只读的问题

    今天在开发中准备通过javascript设置input框只读属性的时候,用document.getElementById('input').readonly='readonly';结果发现这样设置无效 ...

  2. javascript 设置input 输入框里面的内容

    比如百度首页的输入框  id为kw 用javascript:document.getElementById('kw').value="杀手 博客园";用jQuery:$(" ...

  3. JavaScript：非输入框禁用退格键

    在js文件或<javascript>标签中加入如下代码: /** *非输入框禁用退格键 */ function banBackspace(e) { var ev = e || window ...

  4. javaScript实现修改输入框之后标红

    <html> <title>实现标红</title> <script type="text/javascript">  functi ...

  5. Javascript 控制 让输入框不能输入 数字

    监听keypress事件.判断如果是数字的话阻止浏览器冒泡 <input type="text" id="test"> <script typ ...

  6. JavaScript实现input输入框限制输入值的功能

    限制只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.val ...

  7. Javascript设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  8. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  9. 3、JavaScript

    1.    JavaScript简介 1.1. JavaScript由来 Netscape 发明了 JavaScript JavaScript由Netscape 在1995年发明.早期的主要目的是处理 ...

随机推荐

  1. 13 个最佳 JavaScript 数据网格库

    13 个最佳 JavaScript 数据网格库   转自:开源中国 www.oschina.net/translate/best-javascript-data-grid-libraries Java ...

  2. ms12-020复现-xp蓝屏

    漏洞名:MS12-020(全称:Microsoft windows远程桌面协议RDP远程代码执行漏洞) 介绍:RDP协议是一个多通道的协议,让用户连上提供微软终端机服务的电脑. windows在处理某 ...

  3. nfsv3 vs nfsv4

    https://www.quora.com/What-is-the-difference-between-NFSv3-and-NFSv4

  4. Hadoop集群中有哪些节点类型

  5. php版本选择

    对应环境,选择对应的php包 apache环境:VC6.TS(thread safe) IIS环境:VC9.NTS(non thread safe)

  6. js 实现继承

    我们现在要做的一件事情是像其他语言的面向对象一下实现继承多态 具体要求如下: 一个 Father 构造函数,一个 Child 构造函数,其中改写 Father中的部分参数, new Child() 表 ...

  7. 详解PPP模式下的产业投资基金运作【基金管理】

       详解PPP模式下的产业投资基金运作[基金管理]     点击标题下「搏实资本」可快速关注 搏实资本 研究型的投资机构,实操型的专家团队 ﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌﹌ 一.产业投资基金概述 ...

  8. 2019.9.19 csp-s模拟测试47 反思总结

    思路接近正解?都想到了?这都是借口呀. 没有用的,往前走吧. T1:Emotional Flutter 我的做法和题解不太一样,我把s放在最后考虑了. 因为出发以后步幅是一样的,所以每一个黑条可以ba ...

  9. dedecms list标签调用附加表字段--绝对成功

    使用list标签调用附加表字段的时候会忽略一个地方,明明附加字段名已经添加进去了就是调用不出来 经过在网上查询了资料,说的天花乱坠,也都实践过一些,但是就是不成功鞋面介绍一下犯的低级错误在哪里 {de ...

  10. [翻译] MaxMind DB 文件格式规范

    MaxMind DB 文件格式规范来源:http://maxmind.github.io/MaxMind-DB/翻译:御风(TX:965551582)2017-03-23 -------------- ...