js第七节-运算符,流程控制
一、运算符,流程控制概念介绍
现在正式来讲运算符和流程控制。什么运算符和流程控制呢?其实,在我们前面做的一些小案例当中,已经无形当中使用了她们,只是我们没有去详细的去讲解它。
1、有哪些运算符呢?
+ - * / % ++ -- === == !== !=
// && 与、|| 或、! 否
2、有哪些流程控制呢?
①
if(2 > 3){ alert(false) }else{ alert(true) }------>(三目运算符)2 > 3 ? alert(false) : alert(true);
②
if(a == 1){alert(1);}else if(a ==2){alert(2);}else{alert('找不到数')} ------> switch(a){case 1 : alert(1);break;case 2 : alert(2);break;....default :alert('找不到数');
}
③
while(i < 4){alert(1); i++;}
④
do{alert(1); i++;}while(i <= 4);
⑤
for(;;){}
具体流程控制怎么用,希望大家能自己上网查资料学习,我只是列举经常用的有哪些流程控制。
3、运算符的优先级
这个也不详细说,查看运算符优先级表就行,实在不行就给运算符加括号进行比较就行。
二、练习分析
1、百度文库评分
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度文库评分</title>
<script>
window.onload = function(){
//存储不同图片的背景
var arr = ['img/5.gif','img/5.gif','img/3.gif','img/3.gif','img/3.gif'];
//存储不同图片背景的颜色
var arr1 = ['极差','较差','还行','推荐','力荐'];
var aUl = document.getElementsByTagName('ul')[0];
var aLi = aUl.getElementsByTagName('li');
var oPic = aLi[2].getElementsByTagName('img');
var adv = aLi[3].getElementsByTagName('h5')[0];
//var aAt = aLi[4].getElementsByTagName('img')[0];
for(var i = 0;i < oPic.length;i++){
oPic[i].index = i;
oPic[i].onOff = true;
oPic[i].onmouseover = function(){
aLi[4].style.display = 'none';
aLi[3].style.display = 'block';
};
oPic[i].onmouseout = function(){
aLi[4].style.display = 'block';
aLi[3].style.display = 'none';
};
oPic[i].onclick = function(){
if(oPic[this.index].onOff){
/*if(this.index < 2){
oPic[this.index].src = arr[this.index];
adv.innerHTML = arr1[this.index];
oPic[this.index].onOff = false;
}else{*/
for(var i = 0;i <= this.index;i++){
oPic[i].src = arr[this.index];
adv.innerHTML = arr1[i];
oPic[i].onOff = false;
}
/*}*/
}else{
if(this.index > 2){
for(var i = this.index;i < oPic.length;i++){
oPic[i].src = "img/2.gif" ;
adv.innerHTML = arr1[this.index - 1];
oPic[i].onOff = true;
}
/* }else if(this.index < 2){
//for(var i = 0;i <= this.index;i++){
oPic[this.index].src = "img/2.gif" ;
adv.innerHTML = arr1[this.index ];
oPic[this.index].onOff = true;
//}*/
}else{
for(var i = this.index;i < oPic.length;i++){
oPic[i].src = "img/2.gif" ;
adv.innerHTML = arr1[this.index - 1];
if(this.index == 0){
adv.innerHTML = '';
}
oPic[i].onOff = true;
}
for(var i = 0;i < this.index;i++){
oPic[i].src = "img/5.gif" ;
}
}
}
};
}
};
</script>
<style>
body,ul,h3,h4,h5{margin:0;padding:0;}
div{width:550px;background:#fff;margin:30px auto;border:1px solid #c0c0c0;}
li{list-style:none;float:left;height:42px;padding:0 5px 5px 0;padding-top:10px;}
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
h4{color:#34343c;line-height:42px;}
h5{color:#f6b87f;line-height:42px;}
.logo{padding-top:20px;}
.pic{padding-top:20px;cursor:pointer;}
.pic img{padding-left:5px;}
.adv{display:none;}
.attention{}
</style>
</head>
<body>
<div class="clear">
<ul>
<li class="logo"><img src="img/4.gif"</li>
<li><h4>总体评价:</h4></li>
<li class="pic"><img src="img/2.gif" /><img src="img/2.gif" /><img src="img/2.gif" /><img src="img/2.gif" /><img src="img/2.gif" /></li>
<li class="adv"><h5></h5></li>
<li class="attention"><img src="img/1.gif" /></li>
</ul>
</div>
</body>
</html>
2、百度音乐--全选操作
在分析这个题之前,我们先扯一下html和css的知识,当我们在一行当中输入好几个行内元素的时候,我们发现这个行内的格局会发生很大的变化,怎么调节也对不齐这些行内元素的标签。比如:
<li class="lastLi clear"><input type="checkbox" id="lastInput"/><span class="span2">全选</span><a href="#"><img src="img/9.gif" /></a><a href="#"><img src="img/10.gif" /></a><a href="#"><img src="img/11.gif" /></a></li>
上面这行代码,如果不给任何的样式的话,我们会遇到一些麻烦,这些元素都不对齐,而且通过设置display:inline-block这个的话,我们可能会影响到其他的元素布局,这个时候,我个人建议,用浮动来做,给上面的每个元素增加浮动之后,在去调节这些元素的宽高的话,就能够达到我们想要的结果。
注意:在ie678中可能浮动浮出界了,可能是你的元素长度超过设定的长度了,那为什么火狐没有超呢?这个时候可能是img边框的大小没有清楚(border:none;),在火狐中图像的边框是自动清除的。
源码:(用到了运算符的++ %,for, if,自定义属性,数组等)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度音乐-全选操作</title>
<script>
window.onload = function(){
var aDiv = document.getElementById('music');
var aLi = aDiv.getElementsByTagName('li');
//var aLastLi = document.getElementById('lastLi');
var aImg = aDiv.getElementsByTagName('img');
var aLastInput = aLi[6].getElementsByTagName('input')[0];
var arr = ['img/6.gif','img/7.gif','img/8.gif'];
var arr1 = ['img/9.gif','img/10.gif','img/11.gif'];
var num = 0;
for(var i = 0;i < aLi.length - 1;i++){
aLi[i].index = i;
if(i % 2 == 0){
aLi[i].style.background = '#f7ffff';
}
aLi[i].onmouseover = function(){
aLi[this.index].style.background = "#efefef";
};
aLi[i].onmouseout = function(){
if(aLi[this.index].getElementsByTagName('input')[0].checked){
aLi[this.index].style.background = "#efefef";
}else{
if(this.index % 2 == 0){
aLi[this.index].style.background = '#f7ffff';
}else{
aLi[this.index].style.background = '#fff';
}
}
};
aLi[i].getElementsByTagName('input')[0].onclick = function(){
num = 0;
for(var i = 0;i < aLi.length - 1;i++){
if(aLi[i].getElementsByTagName('input')[0].checked){
num++;
}
if(num == aLi.length - 1){
aLastInput.checked = true;
}else{
aLastInput.checked = false;
}
}
};
}
aLastInput.onclick = function(){
if(aLastInput.checked){
for(var i = 0;i < aImg.length;i++){
aImg[i].src = arr[i];
}
for(var i = 0;i < aLi.length - 1;i++){
aLi[i].getElementsByTagName('input')[0].checked = true;
aLi[i].style.background = "#efefef";
}
}else{
for(var i = 0;i < aImg.length;i++){
aImg[i].src = arr1[i];
}
for(var i = 0;i < aLi.length - 1;i++){
aLi[i].getElementsByTagName('input')[0].checked = false;
if(i % 2 == 0){
aLi[i].style.background = '#f7ffff';
}else{
aLi[i].style.background = '#fff';
}
}
}
};
};
</script>
<style>
body,ul{margin:0;padding:0;font-size:14px;}
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
#music{width:310px;border:1px solid #000;margin:30px auto;background:#ffffff;}
li{list-style:none;padding:10px;}
.lastLi{border-top:1px solid #c0c0c0;padding:5px 10px 0 10px;;}
input{margin-right:10px;}
.span1{margin:0 36px 0 36px;}
.lastLi a{float:left;}
#lastInput{float:left;height:20px;}
.span2{float:left;height:25px;line-height:25px;}
.lastLi img{padding:0 6px 0 6px;border:none;}
</style>
</head>
<body>
<div id="music">
<ul>
<li><input type="checkbox" />私奔 <span class="span1"></span>梁博</li>
<li><input type="checkbox" />北京北京 <span class="span1"></span>梁博,黄勇</li>
<li><input type="checkbox" />我爱你中国 <span class="span1"></span>梁博</li>
<li><input type="checkbox" />花火 <span class="span1"></span>梁博</li>
<li><input type="checkbox" />回来 <span class="span1"></span>梁博</li>
<li><input type="checkbox" />爱要有你才完美<span class="span1"></span>梁博,那英</li>
<li class="lastLi clear" id="lastLi"><input type="checkbox" id="lastInput"/><span class="span2">全选</span><a href="#"><img src="img/9.gif" /></a><a href="#"><img src="img/10.gif" /></a><a href="#"><img src="img/11.gif" /></a></li>
</ul>
</div>
</body>
</html>
下一节我们讲讲函数返回值,定时器基础这一块的内容。谢谢大家。