利用Javascript解決【庫存變更器】

阿新 • • 發佈：2020-12-09

技術標籤：dom元素 javascript

  <style>
        span{
            min-width: 50px;
            display: inline-block;
            text-align: center;
            color: red;
        }
    </style>
<body>
    <p>
        庫存的最小值為0
    </p>
    <div>
        庫存：
        <button data- 
plus="-1000">-1000</button>
        <button data-plus="-100">-100</button>
        <button data-plus="-10">-10</button>
        <button data-plus="-1">-</button>
        <span id = "spanNumber">0</span>
        < 
button data-plus="+1">+</button>
        <button data-plus="+10">+10</button>
        <button data-plus="+100">+100</button>
        <button data-plus="+1000">+1000</button>
    </div>

    <script>
        var span = document. 
getElementById("spanNumber");
        var btns = document.querySelectorAll("button");
        //對button進行遍歷
        for(var i = 0;i<btns.length;i++){
            //每迴圈一次得到一個按鈕
            b=btns[i];
            //點選事件
            b.onclick=function(){
                //拿到審判標籤的文字   span.innerText為字串
                var num = parseInt(span.innerText);
                //+或—某個數  【直接加  === >正數、負數】
                console.log(this.dataset.plus);
                var plus = parseInt(this.dataset.plus);
                //最終結果
                var result = num+plus; 
                console.log(result);
                //最終結果不能為負值
                if(result < 0){
                    result = 0 ;
                }
                span.innerHTML = result;
            }
        }
    </script>
</body>

html

利用Javascript解決【庫存變更器】

技術標籤：dom元素javascript <style> span{ min-width: 50px; display: inline-block; text-align: center;

【springboot__攔截器】Interceptor

LoginHandlerInterceptor package k.component; import org.springframework.web.servlet.HandlerInterceptor;

【JAVA定時器】四種常見定時器的原理和簡單實現

個人學習筆記分享，當前能力有限，請勿貶低，菜鳥互學，大佬繞道如有勘誤，歡迎指出和討論，本文後期也會進行修正和補充

【圖片分割器】Java完成圖片分隔

刷朋友圈，看到很多人發分隔後的9宮格，出現一個大圖挺好看，所以自己用java寫了一個圖片分隔器。

JavaSE-24.1【類載入器】

1 package day15.lesson1; 2 3 /* 4 1 類載入器 5 6 1.1 類載入 7 8（1）類載入的描述 9當程式要使用某個類時，如果該類還未被載入到記憶體中，則系統會通過

git 分支分叉case分析及問題解決【xxx have diverged】

背景新開發的程式碼，合入到遠端master之後，沒有生效。定位到spark服務，在切換分支的時候，遇到branch 分叉；導致依然使用舊程式碼。

雙親委派模型【~類載入器】

雙親委派模型【~類載入器】 1，談論雙親模型前，咱先了解一下什麼是類載入器哈，因為雙親模型源頭與之有關。

python學習篇之【簡易裝飾器】

一、裝飾器簡介 1、什麼是裝飾器　　裝飾器本質就是函式，為其他函式新增附加功能

【極致絲滑】徹底擺脫編輯器外掛，利用postcss靈活可控地轉換px至vw

背景舊的rem適配方案（無論是直接使用rem，還是配合flexiblejs等lib庫進行視口縮放）已經疲態盡顯，且隨著安卓高清屏的不斷出現，同時data-dpr仍有進一步增加的可能性，rem顯得並不是那麼穩固與稱心如意。

Python 裝飾器@，對函式進行功能擴充套件操作示例【開閉原則】

本文例項講述了Python 裝飾器@，對函式進行功能擴充套件操作。分享給大家供大家參考，具體如下：

原生javascript實現類似vue的資料繫結功能示例【觀察者模式】

本文例項講述了原生javascript實現類似vue的資料繫結功能。分享給大家供大家參考，具體如下：

PHP設計模式之迭代器模式Iterator例項分析【物件行為型】

本文例項講述了PHP設計模式之迭代器模式Iterator。分享給大家供大家參考，具體如下：

javascript實現的圖片預覽和上傳功能示例【相容IE 9】

本文例項講述了javascript實現的圖片預覽和上傳功能。分享給大家供大家參考，具體如下：

JavaScript交換變數的常用方法小結【4種方法】

本文例項講述了JavaScript交換變數的常用方法。分享給大家供大家參考，具體如下：

JavaScript設計模式--簡單工廠模式例項分析【XHR工廠案例】

本文例項講述了JavaScript設計模式--簡單工廠模式。分享給大家供大家參考，具體如下：

win10系統dns錯誤如何解決【系統天地】

最近有位win10系統使用者在使用電腦的過程當中，碰到了dns錯誤的情況，使用者不知道如何解決，為此非常苦惱，那麼win10系統dns錯誤如何解決呢?下面為大家分享win10電腦dns錯誤的解決方法。第一步：使用 ipconfig /fl

【治病之旅】Element-UI的resetFields()方法不生效的原因及解決方法

問題描述：先呼叫編輯回顯再呼叫新增this.$ref[\'form\'].resetFields()無法重置表單項,又不想一個欄位一個欄位reset

【DNF 增幅器 JAVA 模擬增幅程式碼】

/** * main方法啟動 * @param args */ public static void main(String[] args) { DNF(20); WSJ(20); } /** * DNF

【學習打卡】JavaScript原型的自我總結與疑惑（一）

　　初學原型是從老師的視訊入門的，根據老師的講解，我理解到的是，建構函式裡面定義複雜物件或者函式的時候，每次new一個新物件就得複製一遍，浪費空間；為了解決這個問題呢，就有了原型。通過引入原型，使得每個物

JavaScript設計模式之命令模式【命令解耦】

在講解命令模式之前我們先來了解一個生活中的命令模式場景：場景1：醫院看病抓藥：