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循环的应用还有很多地方,这里只是冰山一角。