js的判斷知識
1、js中判斷的幾種類型
1) if( 判斷條件 ){
條件成立時，執行裏面的語句
條件不成立時，不執行
}
2)if( 判斷條件 ){
條件成立時，執行裏面的語句
} else{
條件不成立時，執行此語句
}
3)if( 判斷條件 ){
條件成立時，執行裏面的語句
} else if{
條件成立時，執行裏面的語句
}else if{
條件成立時，執行裏面的語句
} .....
else{
條件都不成立時，執行裏面的語句
}
2、js中判斷的注意事項
1) js中所有的相對路徑都不能拿來做判斷，絕對路徑可以用來做判斷
2)js中所有的顏色值都不能用來做判斷
3)js中innerHTML不能用來做判斷
3、在js中圖片的相對路徑不能用來做判斷，以下便介紹兩種是圖片實現點擊切換的方法
1) 利用布爾值 布爾值只有兩種值 true爲真，false爲假
舉例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的簡單練習</title>
<script>
window.onload = function(){
var oImg = document.getElementById('img1');
var onOff = true; //此處相當於設置了一個開關，通過設置布爾值，進而通過改變布爾值來完成if的判斷！
oImg.onclick = function(){
if( onOff ){
oImg.src = 'imgs/z.2.jpg';
onOff = false;
} else{
oImg.src = 'imgs/z.1.jpg';
onOff = true;
};
};
};
</script>
</head>
<body>
<h1>js的簡單效果的實現</h1>
<img src="imgs/z.1.jpg" id="img1" alt="" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js的簡單練習</title>
<script>
window.onload = function(){
var oImg = document.getElementById('img1');
var onOff = true; //此處相當於設置了一個開關，通過設置布爾值，進而通過改變布爾值來完成if的判斷！
oImg.onclick = function(){
if( onOff ){
oImg.src = 'imgs/z.2.jpg';
onOff = false;
} else{
oImg.src = 'imgs/z.1.jpg';
onOff = true;
};
};
};
</script>
</head>
<body>
<h1>js的簡單效果的實現</h1>
<img src="imgs/z.1.jpg" id="img1" alt="" />
</body>
</html>
通過此方法，雖然可以實現圖片的點擊切換，但是它的缺點是隻能實現兩張圖片的點擊切換，不能實現多張圖片的點擊切換。
2) 可以利用數組，實現多張圖片的點擊切換
array 數組，相當於一個倉庫，可以在裏面存放很多的值
array.length 數組的長度
數組的編號是從0開始，數組的第一位是0，最後一位是array.length-1；
舉例的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的簡單練習</title>
<style>
h1{ height:30px; width:400px; border:2px solid pink; font-size:20px; text-align:center; text-align:center; margin:40px auto 20px;}
#content{ height:400px; width:400px; background:#ccc; border:10px solid pink; margin:0 auto; position:relative;}
#content a{ height:40px; width:40px; background:#000; border:5px solid #fff; color:#fff; font-size:30px; text- align:center; text-decoration:none; line-height:40px; color:#fff; position:absolute; top:175px; opacity:0.4;}
#content a:hover{ opacity:0.9;}
#prev{ left:10px;}
#next{ right:10px;}
#text,#span1{ height:30px; width:400px; background:yellow;
font-size:18px; text-align:center; line-height:30px;
position:absolute; left:0; margin:0;}
#text{ top:0;}
#span1{ bottom:0;}
#img1{ height:400px; width:400px;}
</style>
<script>
window.onload = function(){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oText = document.getElementById('text');
var oSpan = document.getElementById('span1');
var oImg = document.getElementById('img1');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊','愛心世界','美麗花環'];
var num = 0;
//初始化
function fnTab(){
oText.innerHTML = num+1+'/'+arrUrl.length;
oImg.src = arrUrl[num];
oSpan.innerHTML = arrText[num];
}
fnTab();
oPrev.onclick = function(){
num--;
if(num==-1){
num = arrUrl.length-1;
}
fnTab();
}
oNext.onclick = function(){
num++;
if(num==arrUrl.length){
num = 0;
}
fnTab();
}
}
</script>
</head>
<body>
<h1>js的圖片切換效果</h1>
<div id="content">
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
<p id="text">圖片的數量正在計算...</p>
<span id="span1">圖片的文字正在加載...</span>
<img id="img1" alt="" />
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js的簡單練習</title>
<style>
h1{ height:30px; width:400px; border:2px solid pink; font-size:20px; text-align:center; text-align:center; margin:40px auto 20px;}
#content{ height:400px; width:400px; background:#ccc; border:10px solid pink; margin:0 auto; position:relative;}
#content a{ height:40px; width:40px; background:#000; border:5px solid #fff; color:#fff; font-size:30px; text- align:center; text-decoration:none; line-height:40px; color:#fff; position:absolute; top:175px; opacity:0.4;}
#content a:hover{ opacity:0.9;}
#prev{ left:10px;}
#next{ right:10px;}
#text,#span1{ height:30px; width:400px; background:yellow;
font-size:18px; text-align:center; line-height:30px;
position:absolute; left:0; margin:0;}
#text{ top:0;}
#span1{ bottom:0;}
#img1{ height:400px; width:400px;}
</style>
<script>
window.onload = function(){
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var oText = document.getElementById('text');
var oSpan = document.getElementById('span1');
var oImg = document.getElementById('img1');
var arrUrl = ['imgs/z.1.jpg','imgs/z.2.jpg','imgs/z.3.jpg','imgs/z.4.jpg'];
var arrText = ['眺望遠方','在海邊','愛心世界','美麗花環'];
var num = 0;
//初始化
function fnTab(){
oText.innerHTML = num+1+'/'+arrUrl.length;
oImg.src = arrUrl[num];
oSpan.innerHTML = arrText[num];
}
fnTab();
oPrev.onclick = function(){
num--;
if(num==-1){
num = arrUrl.length-1;
}
fnTab();
}
oNext.onclick = function(){
num++;
if(num==arrUrl.length){
num = 0;
}
fnTab();
}
}
</script>
</head>
<body>
<h1>js的圖片切換效果</h1>
<div id="content">
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
<p id="text">圖片的數量正在計算...</p>
<span id="span1">圖片的文字正在加載...</span>
<img id="img1" alt="" />
</div>
</body>
</html>
在js的判斷使用中，要注意判斷的條件，有些判斷無法進行，可以通過轉變成其它的方法進行實現！