JavaScript循环

最新推荐文章于 2022-12-06 17:34:16 发布
最新推荐文章于 2022-12-06 17:34:16 发布
阅读量125 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44764207/article/details/106950490
版权

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>
</head>
<body>
    <p>单击按钮将代码块循环执行5次。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var x = "", i;
            for(i = 0; i< 5; i++){
                x = x + "这个数字是" + i+ "<br>";
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

循环输出HTMl标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>单击按钮将HTML标题设置从1到6的样式显示</p>
    <button onclick="myFunction()">点击</button>
    <div id="demo"></div>
    <script>
        function myFunction(){
            var x = "", i;
            for(i = 1; i <= 6; i++){
                x = x + "<h" + i + ">Heading" + i + "</h" + i + ">";
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

While循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击下面的按钮，只要i小于5就一直循环代码块。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var x = "", i = 0;
            while(i < 5){
                x = x + "该数字为 " + i +"<br>";
                i++;
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

Do While循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var x = "", i = 0;
            do{
                x = x + "该数字为 " + i +"<br>";
                i++;
            }while(i < 5);
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

break语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击按钮，测试带有 break 语句的循环。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var x = "", i = 0;
            for(i = 0 ; i < 10; i++){
                if(i == 3){
                    break;
                }
                x = x + "该数字为 " + i +"<br>";
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

continue语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击下面的按钮来执行循环，该循环会跳过 i = 3 的数字。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var x = "", i = 0;
            for(i = 0; i < 10; i++){
                if(i == 3){
                    continue;
                }
                x = x + "该数字为 " + i + "<br>";
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

使用For…in声明来遍历数组内的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>点击下面的按钮，循环遍历对象"person"的属性。</p>
    <button onclick="myFunction()">点击</button>
    <p id="demo"></p>
    <script>
        function myFunction(){
            var x;
            var txt = "";
            var person = {fname:"Bill", lname:"Gates", age:16};
            for(x in person){
                txt = txt + person[x];
            }
            document.getElementById("demo").innerHTML = txt;
        }
    </script>
</body>
</html>
pinkdown
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html将标题连续循环3次,CSS3内容处理-插入连续的序号
weixin_30317869的博客
06-11 962
如果我们想要实现如下图的这种列表，无疑最先想到的是ol标签，通过CSS定义list-style-type: decimal-leading-zero;即可；但是它有的时候并不能满足我们的需求，比如一篇文章中有好几个大标题，每个标题前面均有连续的编号(可以理解为标签无规律)，我们将如何实现？据咱们现在所掌握的知识，有以下几种方案：1.还是用ol，然后对有大标题的地方加入class？但这样看上去并不是...
JavaScript循环结构
thwr1881的博客
05-13 1044
一、循环结构 1、for循环： 基本结构： for(表达式1;表达式2;表达式3){ }
js颜色板块循环
qq_43409111的博客
11-24 978
我果然还是太年轻 <html> <head> <style> .test{ width: 100px; height: 100px; float: left; } </style> </head> <body> </body> <script> /** 输入: s = "anagram", t = "nagaram" 输出: true 输入: s = "rat", t = "car" 输出: fal
js练习---隔X行循环换色
Philo的博客
01-18 557
练习： 要求创建一个列表，每隔五行循环换色，目标要求效果如下： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li class="l">1</li> <li class="l">2&lt
JS小知识：任何几种颜色(value或其他什么的)循环展示
欢迎
12-06 636
任何属性循环展示
javascript循环(3)
JNPF快速开发平台的博客
08-15 1666
js中的循环语句 for循环 while循环 do while循环 何为循环？ 在程序中，反复被执行的语句叫做循环体，循环体是否能被重复执行，却决于循环的终止条件。由循环体及循环的终止条件等组成的语句叫做循环语句。 循环的目的 可以重复执行某些代码 for循环 目的：可以重复执行某些代码，通常跟计数有关. 语法 for(初始化变量；条件表达式；操作表达式) { //循环体 } 初始化变量：通常被用来计数，使用var来声明变量 条件表达式：取决于循环
javaScript循环结构程序设计
11-24
javaScript循环结构程序设计,JavaScript提供了for、while、do…while等循环结构满足不同的循环情况。
JavaScript-Loops:JavaScript循环的完整摘要
05-25
JavaScript循环 支持作者创作更多的教育资料 更多材料 在编程中，我们使用不同的循环来执行重复性任务。 因此，循环可以帮助我们自动化繁琐且重复的任务。 JavaScript还具有不同类型的循环，可用于处理重复性任务。...
Javascript循环绑定事件的示例代码
10-30
Javascript循环绑定事件示例代码详解 本篇资源摘要信息将对Javascript循环绑定事件的示例代码进行详细的解释，并对闭包的概念进行深入分析。 一、循环绑定事件的基本概念 在Javascript中，我们可以使用循环来绑定...
html将标题连续循环3次,循环：每三次迭代添加一个html
weixin_42500789的博客
06-17 740
我有一个需要呈现html的模板。我正在使用EJS(基本上是使用javascript的HTML)。循环：每三次迭代添加一个html我需要在每三次迭代之后插入一个新的行div和一个wrapper div，并在其中嵌入下三个迭代，然后在它开始后再开始3次迭代。我觉得在Ruby中很容易做到这一点，但我不知道JS。我怎么能这样做？代码示例： Loem ipsum mailto pa...
Javascript中单击按键来循环改变字体的颜色
博闻天下-lei的博客
06-30 2355
var i=0; function count() { i++; if(i%2==0) document.getElementById("count").style.color="pink" ; else document.getElementById("count").style.color="blue" ; } 改变字体颜色
js-实现点击循环变色问题
老衲的少女心i~
03-31 1580
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js-点击循环变色事件</title> <style> #box { width: 200px; height: 200px; background-color: pink; cu
原生html使用循环,原生javascript学习：用循环改变div颜色
weixin_29486701的博客
05-31 628
在使用javascript过程中，想循环遍历一个数组，经常使用的语法有两种：for (var i; i < array.length; i++) {statement;}for (var i in array) {statement;}这两种用法看起来能做同样的事情，但实际上两个循环的循环次数一般是不一样的。源码如下：#button{text-align:center;}#outer{wid...
js 循环点击事件 改变背景颜色
Nicholas_long的博客
08-22 3266
老规矩先看效果: 这里使用的ul li标签这里就不上代码了很简单 下面就是重要部分： 使用的js获取id下li标签的长度当然你也可使用jquery 不做过多的讲解一目了然...
js实现选中当前元素并改变颜色（js、jq的各种循环）
ailanliao2853的博客
09-13 2148
1、jq伪类选择器（:not）的使用 2、js jq运用数组循环 3、checkbox的选中循环事件 4、select的选中事件 <select class="ssss" onchange="Change()"> <option>1</option> <option>2</option> <...
linux项目开发001
最新发布
08-28
linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux项目开发linux
javascript 循环
08-26
JavaScript提供了多种循环结构，常用的有`for`循环、`while`循环和`do...while`循环。下面是这些循环结构的示例代码： 1. `for`循环： ```javascript for (let i = 0; i ; i++) { console.log(i); } ``` 这个例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值