JavaScript for循环的使用

    }

    console.log('1到100偶数和为：'+add)

    console.log('1到100中7的倍数和为：'+seven)

    console.log('1到100奇数和为：'+subtract)

</script>

2.使用场景  

for循环的使用基本上在知晓循环次数上面进行的，如果不知道需要进行循环多少次最好使用while循环，  

如我们进行九九乘法表的后台打印，使用for循环可以是我们大大降低代码量；  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531155451699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center)



代码块：

<script>

    var s = ''  //先定义一个空的变量s

    //第一次for循环将打印我们列上面的乘法表 如1*1 = 1 ，1*2 = 2等

    for (a = 1; a <= 9; a++) {

    /*第二个for循环打印我们行上面的乘法表 如 2*2 =4 ， 3*3 = 9等 

    这里需要注意的是第二次for循环中的循环条件是 第一个for循环中小于等于a这个变量的值*/

        for (b = 1; b <= a; b++) {

            c = a * b

            s += b + '*' + a + '=' + c + '\t'

            

        }



   //第一个for循环每次完成后，在后面添加一个换行符，不然样式会变样

       s += '\n'   

    }

    console.log(s)       

</script>

3.实际应用（如淘宝产品页的详情切换，新浪的头部标签页等）  

下面是淘宝的详情页的截图，看到这里应该 都明白是什么  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531160524418.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531160524385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531160524387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center)  

实现一个简单的使用for循环完成页面切换：  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210531160930308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center)  

点击不同的模块，显示相应的子模块

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

    *{

        padding: 0;

        margin: 0;

        list-style: none;

    }

    .tab{

        width: 978px;

        margin: 100px auto;

    }

    .tab_list{

        height: 40px;

        border: 1px solid #cccccc;

        background-color: #f1f1f1;

    }

    .tab_list li{

        float: left;

        height: 39px;

        line-height: 39px;

        padding: 0 20px;

        text-align: center;

        cursor: pointer;

    }

    .tab_list .current{

        background: #c81623;

        color: #fff;



    }

    .item_info{

        padding: 20px 0 0 20px;

    }

    .item{

        display: none;

    }

    

</style>

<div class="tab">

    <div class="tab_list">

        <ul>

            <li class="current">商品介绍</li>

            <li>规格与包装</li>

            <li>售后保障</li>

            <li>商品评价（5000）</li>

            <li>手机社区</li>

        </ul>

    </div>

    <div class="tab_con">

        <div class="item" style="display:block">

            商品介绍模块

        </div>

        <div class="item">

            规格与包装模块内容

        </div>

        <div class="item">

            售后保障模块

        </div>

        <div class="item">

            商品评价模块

        </div>

        <div class="item">

            手机社区模块内容

        </div>

    </div>

</div>

<script>

    var tab_list = document.querySelector('.tab_list');

    var lis = tab_list.querySelectorAll('li');

    var items = document.querySelectorAll('.item');

    for (var i = 0; i < lis.length;i++){

        lis[i].setAttribute('index',i);

        lis[i].onclick = function(){

            for(var i = 0; i < lis.length;i++){

                lis[i].className = '';

            }

           

            this.className = 'current';

             /*创建一个隐式的标签属性index控制元素的位置也就是其索引值，index是H5不存在的属性值，这里是设置的自定义属性*/

            var index = this.getAttribute('index');

            //在后台可以打印这个index，可以看到在点击时，他的值是不断变化的

            console.log(index);

            for (var i = 0;i < items.length;i++){

                items[i].style.display = 'none';

                items[index].style.display = 'block';

            }

        }

    }

</script>