JavaScript 條件語句 if else switch

時間 2019-11-17

標籤 javascript 條件語句 switch 欄目 JavaScript 简体版

原文原文鏈接

僅供學習，轉載請註明出處javascript

條件語句

經過條件來控制程序的走向，就須要用到條件語句。css

運算符

一、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)html

二、賦值運算符：=、 +=、 -=、 *=、 /=、 %=java

三、條件運算符：==、===、>、>=、<、<=、!=、&&(並且)、||(或者)、!(否)bash

if else

使用 -=寫一個減法功能，同時須要判斷輸入每一個文本框的數值大小。性能

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">

		window.onload = function(){
			
			var oInput1 = document.getElementById('num1');
			var oInput2 = document.getElementById('num2');
			var oBtn1 = document.getElementById('sub');
			var oSpan = document.getElementById('result');

			oBtn1.onclick = function(){

				console.log(oInput1.value);
				console.log(oInput2.value);

				var num1 = parseInt(oInput1.value);
				var num2 = parseInt(oInput2.value);
				
				if (num1 >= num2) {
					num1 -= num2
					oSpan.innerHTML = num1;
				}else{
					oSpan.innerHTML = "輸入的num1小於num2，沒法計算";
				}
				
			}

		}

	</script>
</head>
<body>
	<input type="text" name="" id="num1">
	<input type="text" name="" id="num2">
	<input type="button" name="" value="-=" id="sub">
	<div>結果：<span id="result"></span></div>
</body>
</html>
複製代碼

理解練習

製做單個按鈕點擊切換元素的顯示和隱藏效果。學習

實現方式：主要經過判斷元素的display的值，若是是block則是塊元素，當時就是顯示。若是是none，則元素會隱藏。ui

那麼下面使用if else來實現一下。spa

能夠看到，當點擊切換按鈕的時候，div的樣式設置爲display:none的時候就隱藏了。3d

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			var oBtn = document.getElementById("btn1");
			var oDiv = document.getElementById("div1");

			oBtn.onclick = function(){

				if (oDiv.style.display == "none") {
					oDiv.style.display = "block";
				}else{
					oDiv.style.display = "none";
				}

			}
			
		}
	</script>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background: gold;
			transform: rotateZ(0deg);
			transition: all 1s ease ;
		}

		div:hover{
			transform:  rotateZ(45deg) perspective(800px);
		}
	</style>
</head>
<body>
	<input type="button" name="" value="切換" id="btn1">
	<div id="div1"></div>
</body>
</html>
複製代碼

多重if else語句

var iNow = 1;
if(iNow==1)
{
    ... ;
}
else if(iNow==2)
{
    ... ;
}
else
{
    ... ;
}
複製代碼

switch語句

多重if else語句能夠換成性能更高的switch語句

var iNow = 1;

switch (iNow){
    case 1:
        ...;
        break;
    case 2:
        ...;
        break;    
    default:
        ...;
}
複製代碼

理解練習

編寫一個經過switch方法變換body顏色的示例，以下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">

		window.onload = function(){
			var oBody = document.getElementsByTagName('body')[0];

			var flag = 2;

			switch(flag){
				case 1:
					oBody.style.background = "gold";
					break;
				case 2:
					oBody.style.background = "cyan";
					break;
				default:
					oBody.style.background = "pink";
			}

		}
	</script>
</head>
<body>
</body>
</html>
複製代碼