**JS练习**

1.实现点击按钮，多个元素变窄变色变高，再次点击恢复原样式，可以在不刷新页面的情况下一直实现此功能，且有变化的过渡效果（不是直接变化）
在这里插入图片描述

**思路：**按钮点击触碰函数，判断调用函数的次数，奇数恢复样式，偶数变化样式。并且有时延。
具体实现
先写好变化前的基本样式
HTML：

<ul id="main">
			<input type="button" name="" id="press" value="批量修改样式" onclick="Change()"/>
			<li class="stripe">
				<h5>js练习1</h5>
			</li>
			<li class="stripe">
				<h5>js练习1</h5>
			</li>
			<li class="stripe">
				<h5>js练习1</h5>
			</li>
			<li class="stripe">
				<h5>js练习1</h5>
			</li>
			<li class="stripe">
				<h5>js练习1</h5>
			</li>
		</ul>

CSS

*{
			margin: 0;
			padding: 0;
		}
		.stripe{
			width: 60%;
			height: 50px;
			border: 1px solid black;
			background-color: antiquewhite;
			margin:20px 0 0 30px;
		}
		#press{
			width: 100px;
			height: 40px;
			margin:20px 0 0 30px;
		}

效果：
变化前在这里插入图片描述
JS

<script>
			var item = document.getElementsByTagName("li");		//获取li标签的元素 item为数组
			var times = 0;		//初始化点击次数为0
			function Change(){
				times++;		//每点击一次，次数加一
				//console.log(times);
				setTimeout(function(){
					if (times%2) {
						//当点击次数为奇数时，所有的li元素改变样式
						for(var i in item){
							item[i].style.cssText="height:80px;background-color:Moccasin;color:Azure;box-shadow: 5px 5px 10px gray;";						
						}
					} else {
						//点击次数为偶数时，恢复样式
						for(var i in item){
							item[i].style.cssText="height:50px;background-color:antiquewhite;color:none";						
						}
					}
				}					
				,800);			//0.8s的时延
			}
		</script>

效果：
变化后
在这里插入图片描述
当时获取li元素时，用错获取的函数了，应该是var item = document.getElementsByTagName(“li”)，我用成了var item = document.getElements~~ByName~~ (“li”)了，li的class名为stripe，所以就一直获取不了元素，后来一检查才发现了这个低级错误。
知识点

获取元素
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。（用于class）
getElementsByName() 方法可返回带有指定名称的对象的集合。（用于class）
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。（用于id）
函数时延
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
提示： 1000 毫秒= 1 秒。

setTimeout(function(){ alert("Hello") }, 3000);
setInterval(function(){ alert("Hello") }, 3000);

for in语句
for/in 语句用于循环遍历对象属性。
循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

for (var in object) {
 执行的代码块
}

然后这次的js练习就完成了，太久没写代码，都有点生疏了。。。。。
欢迎大家提出建议和问题，一起交流一起学习，一起进步！

猜你喜欢

JS练习