js第七节-运算符，流程控制

来源：互联网发布：店铺缴费软件编辑：程序博客网时间：2024/06/02 05:33

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>

     下一节我们讲讲函数返回值，定时器基础这一块的内容。谢谢大家。

1 0