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.getElementsByName (“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练习就完成了,太久没写代码,都有点生疏了。。。。。
欢迎大家提出建议和问题,一起交流一起学习,一起进步!