JavaScript for循环的使用

最新推荐文章于 2023-03-08 19:14:29 发布

讷言丶

最新推荐文章于 2023-03-08 19:14:29 发布

阅读量1.3k

点赞数 3

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_51033461/article/details/117418084

版权

JavaScript 之 for循环

在Javascript中，for循环是一个非常重要内容，在网页制作中占据了很大的比重，很多重复繁琐的工作都不用我们自己来写了，有了for循环，一切都显得那么简单。今天先来简单看看for循环的使用方法。

1.for循环的基本代码格式：
直接上代码，更直接

<script>
	/*for (初始值；条件判断；递增/递减){
         代码块}*/
</script>
//下面是举例的格式
    <script>
        var add = 0,
            subtract = 0,
            seven = 0;
        for (two = 1; two<=100 ;two++ ){
            if (two % 2 == 0){
                add += two
            }
            else if(two % 7 == 0){
                seven +=two
            }
            else{
                subtract += two
            }

        }
        console.log('1到100偶数和为：'+add)
        console.log('1到100中7的倍数和为：'+seven)
        console.log('1到100奇数和为：'+subtract)
    </script>

2.使用场景
for循环的使用基本上在知晓循环次数上面进行的，如果不知道需要进行循环多少次最好使用while循环，
如我们进行九九乘法表的后台打印，使用for循环可以是我们大大降低代码量；
在这里插入图片描述

代码块：

    <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.实际应用（如淘宝产品页的详情切换，新浪的头部标签页等）
下面是淘宝的详情页的截图，看到这里应该都明白是什么
在这里插入图片描述

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <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>
</head>

<body>
    <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>
</body>

</html>

for循环的应用还有很多地方，这里只是冰山一角。

讷言丶

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript for循环的使用

JavaScript 之 for循环在Javascript中，for循环是一个非常重要内容，在网页制作中占据了很大的比重，很多重复繁琐的工作都不用我们自己来写了，有了for循环，一切都显得那么简单。今天先来简单看看for循环的使用方法。1.for循环的基本代码格式：直接上代码，更直接<script> for (初始值；条件判断；递增/递减){ 代码块}</script>//下面是举例的格式 <script> var
复制链接

扫一扫