三、信号量

多个函数同时改变一个变量的值，这个变量称为信号量。（全局变量）

一般信号量不会无限大，或者无限小，需要进行信号量边界的验证。

3.1 方法一：先验证（工作中不常用）

<div class="box" id="box">盒子</div>
<input type="button" id="btn" value="点击我盒子变长">

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        margin-bottom: 20px;
    }
</style>

<script>
    // box宽度不超过400px时，点击btn盒子变长
    // 将盒子宽度提取成信号量，数据类型是Number，便于数学计算
    var nowWidth = 200;
    // 获取元素
    var oBox = document.getElementById("box");
    var oBtn = document.getElementById("btn");
    // 事件绑定
    oBtn.onclick = function(){
        // 信号量改变 点击一次增加20
        // 方法一：先进行验证，信号量不超过400，才进行信号量改变
        if(nowWidth < 400){
            nowWidth += 20;
        }else{
            nowWidth = 400;
        }
        console.log(nowWidth);
        // 体现在元素身上
        oBox.style.width = nowWidth + "px";
    };
</script>

3.2 方法二：信号量后验证方式（工作中常用）

// 事件绑定
oBtn.onclick = function(){
    // 信号量改变 点击一次增加20
    nowWidth += 20;
    // 信号量后验证方式 书写一个不满足的条件
    if(nowWidth >= 400){
        nowWidth = 400;
    }
    console.log(nowWidth);
    // 体现在元素身上
    oBox.style.width = nowWidth + "px";
};

3.3 简易轮播图

<input type="button" id="btn1" value="上一张">
<img src="images/lunbo/1.jpg" alt="" id="pic">
<input type="button" id="btn2" value="下一张">

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    img {
        width: 220px;
    }
</style>

<script>
    // 获取元素
    var oPic = document.getElementById("pic");
    var oBtn1 = document.getElementById("btn1");
    var oBtn2 = document.getElementById("btn2");
    // 信号量，显示图片的数字
    var idx = 1;
    // 点击右按钮，信号量改变，体现在图片上
    oBtn2.onclick = function(){
        // 信号量改变 点击一次增加1
        idx ++;
        // 信号量后验证方式 书写一个不满足的条件
        if(idx > 5){
            idx = 1;
        }
        console.log(idx);
        // 体现在元素身上
        oPic.src = "images/lunbo/" + idx + ".jpg";
    };
    // 点击左按钮，信号量改变，后验证，体现在图片上
    oBtn1.onclick = function () {
        idx --;
        if (idx < 1) {
            idx = 5;
        }
        console.log(idx);
        oPic.src = "images/lunbo/" + idx + ".jpg";
    };
</script>