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的判断使用中，要注意判断的条件，有些判断无法进行，可以通过转变成其它的方法进行实现！
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
