當你随着對前端學習的深入和做更多的項目時，會發現原生JS中開關邏輯是非常重要的.
注意:在運作的時候去掉注釋，下面的代碼僅保留第一種方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="img" src="img/pic_bulboff.gif" alt=""/>
</body>
<script type="text/javascript">
var imgObj = document.getElementById("img");
//第一種方式：
// var count = 0;//記錄點選的次數
// imgObj.onclick = function (){
// count++;
// if (count % 2 != 0) {
// //奇數 --- 開
// imgObj.src = "img/pic_bulbon.gif";
// } else{
// //偶數 -- 關
// imgObj.src = "img/pic_bulboff.gif";
// }
// }
//第二種方式：
// console.log(imgObj.src);
// imgObj.onclick = function (){
// //如果關，則打開
// //注意：此方法最需要注意的是沒有報錯，但是也沒有結果。下面的絕對路徑是通過檢查和調試的方式得到的，最容易想到的是使用相對路徑，但是在計算機裡面不能用相對路徑
// if (imgObj.src == "http://127.0.0.1:8020/H0202JS%E5%9F%BA%E7%A1%8003/img/pic_bulboff.gif") {
// console.log("開");
// imgObj.src = "img/pic_bulbon.gif";//開
// } else{
// console.log("關");
// imgObj.src = "img/pic_bulboff.gif";//關
// }
//
// }
//第三種方式：最正常的邏輯思路，常用
// 假設 true 燈亮 false 燈滅
// var onOff = false;
// imgObj.onclick = function (){
// if (onOff == false) {
// imgObj.src = "img/pic_bulbon.gif";//開
// onOff = true;//改變狀态
// } else{
// imgObj.src = "img/pic_bulboff.gif";//關
// onOff = false;//改變狀态
// }
//
//
// }
//第四種方式： 假設 true 燈亮 false 燈滅
// var isT = false;
// imgObj.onclick = function (){
// imgObj.src = isT == false ? "img/pic_bulbon.gif" : "img/pic_bulboff.gif";
// isT = !isT;//每次對結果取反，改變狀态
// }
//
</script>
</html> ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)