前端笔记57——for循环

最新推荐文章于 2024-05-12 16:55:09 发布

野生杂学家阿博

最新推荐文章于 2024-05-12 16:55:09 发布

阅读量2.6k

点赞数 1

分类专栏：前端文章标签：前端 JavaScript for循环 1-100求和全选功能

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/86111138

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在编程开发当中，我们肯定会用到遍历。一般来说，我们是使用for循环来进行遍历，那么JavaScript中的for循环是怎么样的呢？下面分享我学习到的JavaScript的for循环。

for循环

for循环是让某段代码重复执行。直观的应用，音乐的单曲循环。

语句格式

for(初始化表达式;条件表达式;条件改变){
			循环体:需要被循环的代码
}

例子1：利用JavaScript代码输出0-100的和

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			// 求1到100的和
			var sum = 0
			for (var i = 1;i<=100;i++) {
				sum = sum+i
			}
			document.write(sum)
		</script>
	</body>

</html>

例子2：利用JavaScript代码输出1-100 奇数的和

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			// 需求：1-100 奇数的和
			var sum = 0
			for(var i = 1; i <= 100; i++) {
				// 把奇数找出来求和
				if(i % 2 == 1) {
					sum = sum + i
				}
			}
			// 在循环外面去打印
			document.write(sum)
		</script>
	</body>
</html>

例子3：利用for循环实现全选功能

例子中引入了bootstrap.css文件，如果需要复制到编译器看效果的小伙伴需要注意了。

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

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style type="text/css">
			#wrap {
				width: 300px;
				margin: 100px auto;
			}
		</style>
	</head>

	<body>
		<div id="wrap">
			<button id="btn1" class="btn btn-primary">全选</button>
			<br />
			<br />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
			<input type="checkbox" />
		</div>
		<script type="text/javascript">
			// 查找元素的第二种方法：通过标签来找元素
			var aInput = document.getElementsByTagName("input")
			var oBtn1 = document.getElementById("btn1")
			// aInput是所有input元素的集合，如何去求长度
			//			console.log(aInput.length)
			// 批量的去设置input的checked属性 循环
			// 全选设置
			oBtn1.onclick = function() {
				// 批量的去设置input的checked属性 循环 10次
				for(var i = 0; i < 10; i++) {
					// 设置每个元素的checked，如何去找到每个元素呢
					aInput[i].checked = true
				}
			}
		</script>
	</body>
</html>

反例：死循环

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			// 循环需要注意的问题：死循环
			for (var j =0;j>-1;j++) {
				document.write(j)
			}
		</script>
	</body>
</html>

在写for循环当中，我们需要注意的是不要写出死循环。上面反例中的j永远是大于-1，所以我们的程序会一直执行下去。

野生杂学家阿博

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端笔记57——for循环

前言在编程开发当中，我们肯定会用到遍历。一般来说，我们是使用for循环来进行遍历，那么JavaScript中的for循环是怎么样的呢？下面分享我学习到的JavaScript的for循环。for循环for循环是让某段代码重复执行。直观的应用，音乐的单曲循环。语句格式for(初始化表达式;条件表达式;条件改变){ 循环体:需要被循环的代码}例子1：利用JavaScript代码输出...
复制链接

扫一扫