<!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. PAT甲级——A1058 A+B in Hogwarts

    If you are a fan of Harry Potter, you would know the world of magic has its own currency system -- a ...

  2. Python爬虫笔记【一】模拟用户访问之提交表单登入—第二次(7)

    在第一次登入时遇到这个问题,页面验证码与下载下来需要识别的验证码不同的问题,从网上查寻说是叫验证码同步问题.发现是用cookie解决的,那次cookie介绍到通过cookie就可以实现时间戳同步问题, ...

  3. redis键(key)

    redis键: 用于管理redis的键 command key_name > set runoodkey redis OK > del runoodkey 上面的例子中,del是一个命令, ...

  4. react-native连接华为真机

    android studio的设置:下载google USB Driver 手机部分1.找到手机开发者模式 设置->系统->关于手机->版本号(多次点击出现开发者模式) 提示你已在开 ...

  5. NPOI 1.1

    1 .NPOI 版本2.1 2. NPOI 读取execl 3.导入数据(SqlBulkCopy) 示例代码: public class ImportServerData { DataTable dt ...

  6. table使用display:block时会多出一条边框

    在静态页面中添加一个table,然后设置table的显示隐藏,当使用display:block显示table时出现了如下情况,详情请点击链接: http://jsbin.com/pinovorahu/ ...

  7. Android获取App版本号和版本名

    1 //获取版本名 public static String getVersionName(Context context) { return getPackageInfo(context).vers ...

  8. 使用jquery封装一个可以复用的提示框

    首先在html中 <div class="backcap"> <div class="diolag"> <div class=&q ...

  9. HDU3486 RMQ

    /*多么变态的一道题,交了18次*/ #include<cstdio> #include<cstring> #include<cmath> #define max( ...

  10. angular4 路由重用策略 RouterReuseStrategy

    单页面应用现在是主流,随之而来的缺点:页面间切换时不能保存状态 angular4出了一个RouteReuseStrategy路由重用策略可以让组件所有的state和渲染好的html存起来,然后在切回去 ...