創建腳本時，您經常會發現有一些用戶“事件”，例如用戶將鼠標移到某個元素上或單擊要讓腳本作出反應的特定元素。你這樣做的方式是通過使用事件處理程序。

在本教程中，我們將學習如何讓腳本對使用布爾值的單個元素上的兩個不同的函數進行反應。

布爾值是1（True）或0（False），看看如何在javascript中聲明布爾值，參見下面的代碼段

var bool1 = true;

var bool2 = false;

現在在本教程中，我們將制作一個可以使用單個按鈕切換的滑動div。

現在，讓我們來構建我們簡單的滑塊系統，使一個新的文件slider.html并鍵入下面的代碼到你的HTML文件。

slider.html

slider

click me

讓我們以上面的HTML代碼的形式創建一個新的文件style.css并添加以下代碼（更好地嘗試鍵入下面的代碼，而不是進行復制和粘貼）

style.css

#slider{width:200px;height:200px;background:red;margin:auto;font-family:verdana;color:white;transition:0.2s;}

#button{width:90px;padding:10px;color:green;border:5px solid green;margin:10px auto auto auto;font-family:verdana;text-align:center;cursor:pointer;}

現在是一段時間了，我們將添加我們的JavaScript代碼，這將執行上述的滑動操作div

script.js

var button = document.getElementById("button");

var slider = document.getElementById("slider");

var click = false;

button.onclick = function(){

if(click==false){

slider.style.height = 0;

click = true;

}else{

slider.style.height = 200+"px";

click = false;}

}

上面的腳本使用布爾選擇一個單獨的動作，這個動作是在true和false的基礎上完成的。

請參閱上述代碼

謝謝你的閱讀

了解更多資訊請關注我的微信公眾號：芒果web；或者微信搜索javascriptes6關注我們

將您的查詢和反饋發送到微信公眾號或在我們的QQ群634109637群交流。您也可以在下面評論您的問題。

另外，別忘了訂閱我們的簡書。

如果你喜歡這篇文章，那么請分享一下，幫助我們成長。