JavaScript-购物车+计数器

最新推荐文章于 2024-09-07 13:38:28 发布

kyrie0316

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量305

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/W1060632133/article/details/139511298

版权

计数器

<style>
      .step {
         font-size: 0;
      }

      .step>button {
         width: 17px;
         height: 20px;
         background-color: #F1F1F1;
         border: 1px solid #cbcbcb;
         outline: none;
         text-align: center;
         padding: 0;
         margin: 0;
         color: #232326;
      }

      .step>button:disabled {
         color: #ccc;
         cursor: not-allowed;
      }

      .step>input {
         width: 46px;
         height: 18px;
         outline: none;
         padding: 0;
         margin: 0;
         text-align: center;
         border: 1px solid #cbcbcb;
         border-left: none;
         border-right: none;
      }
</style>

<body>
   <script type="module">
      import SetpNumber from "./js/StepNumber.js"

      var step = new SetpNumber();
      //添加一个侦听事件 侦听数据的变化
      //"change" 这个事件类型 是在js中创建的名字是"change"的事件
      step.addEventListener("change", changeHandler);
      //调用父类中的appendTo方法 创建最外层元素body
      step.appendTo("body");

      function changeHandler(e) {
         console.log(e)
      }
   </script>
</body>

import Component from "./Component.js";
export default class StepNumber extends Component {
   //计数器
   _step = 1;
   constructor() {
      //调用父类的构造方法
      super("div", "step");
      //向创建的div中添加内容
      this.elem.innerHTML = `
      <button class='left'>-</button>
      <input type='text'>
      <button class='right'>+</button>
      `
      this.setStep(this._step);
      //添加input侦听事件
      this.elem.addEventListener("input", e => this.inputHandler(e));
      //添加按钮侦听事件
      this.elem.addEventListener("click", e => this.clickHandler(e));
   }

   //input事件函数
   inputHandler(e) {
      //判断是否是input节点类型
      if (e.target.nodeName !== "INPUT") return;
      //e.target是指input 
      //获取input内的内容 要满足只能输入正整数的条件
      e.target.value = e.target.value.replace(/\D/g, "");
      //调用setStep函数 并且把当前input中的值做为参数
      this.setStep(e.target.value);
      //调用dispatch函数 触发事件
      this.dispatch();
   }

   //按钮点击事件函数
   clickHandler(e) {
      //判断是否是按钮类型
      if (e.target.nodeName !== "BUTTON") return;
      //e.target 指当前点击的按钮
      if (e.target.className == "left") {
         //若点击的是左按钮就让计数器-1
         this.setStep(this._step - 1)
      } else {
         //若点击的是右按钮就让计数器+1
         this.setStep(this._step + 1)
      }
      this.dispatch();
   }

   setStep(value) {
      //因为从上面传入的内容是字符串 所以需要转为数值型
      value = Number(value);
      //this.elem 是创建的div
      //它的第一个孩子是左按钮  第三个孩子是右按钮
      //先设置按钮不被禁用  根据下面的条件判断是否禁用
      this.elem.children[0].disabled = false;
      this.elem.children[2].disabled = false;
      if (value <= 1) {
         //把value设置为1  value不能为负
         value = 1;
         //此时禁用左按钮 让其不能再触发
         this.elem.children[0].disabled = true;
      } else if (value >= 99) {
         //把value设置为99  让value不能超过99
         value = 99;
         //此时禁用右按钮 让其不能再触发
         this.elem.children[2].disabled = true;
      }
      this._step = value;
      //把此时的值显示再input中
      this.elem.children[1].value = this._step;
   }
   dispatch() {
      //创建一个名字为change的事件
      var evt = new Event("change");
      evt.step = this._step;
      //这里的this是实例化的对象
      // console.log(this,'11')
      //把evt事件抛发给 实例化对象让其可以触发该事件
      this.dispatchEvent(evt);
   }
}