目录
1.使用js制作图片的自动切换效果（每隔多长时间就会换一张图片）
一，BOM的概念
-
bom是什么？
即浏览器对象模型，用来获取或设置浏览器的属性、行为，而window是浏览器的顶级对象。
例如：
新建窗口、获取屏幕分辨率、浏览器版号登。
-
bom的构成
而window是浏览器的顶级对象，它具有双重角色
以下是bom对象模型图：
二，基础知识：
注意：咱们编写JavaScript的时候，代码报错了不会显示出来，这个时候我们需要打开网页，然后右键检查打开控制台，里面就有报错的代码
1.如何在js中获取HTML元素
document.getElementById();-->>通过标签中的ID属性
document.getElementByTagName();-->>通过标签名
document.getElementByClassName();-->>通过标签中的class属性
document.getElementByName();-->>通过标签中的name属性
注意：以上获取HTML元素的方法都是返回集合的形式
2.HTML元素上的常用的事件：
| onclick | 点击事件 |
| ondblclick | 双击事件 |
| onfocus | 获得焦点事件 |
| onblur | 失去焦点事件 |
| onmouseover | 鼠标移入事件 |
| onmouseout | 鼠标移出事件 |
3.HTML元素上的常用属性
| textContent | 标签的文本内容（定义的不会生效） |
| InnerHTML | 标签中的HTML内容（标签会生效） |
| value | 元素的值 |
| checked | 是否被选中（一般在单选框和复选框中适用） |
| style | 标签中的style属性（用于设置样式） |
三，实例：
1.使用js制作图片的自动切换效果（每隔多长时间就会换一张图片）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片自动切换的效果</title>
</head>
<body>
<img src="imgs/1.jpeg" id="a">//编辑img
//实现轮换的图片的路径为1.pgeg、2.pgeg、3.pgeg、4.pgeg、5.pgeg
<script>
var b=1;
//箭头函数就是正常函数的简写
setInterval(()=>{//循环计时器
//操作元素（html）的css
a.src='url("imgs/'+b+'.jpeg")'//设置块状标签的图片样式
b++;//每次执行一次增加一次
if(b=5){//当次数为5时将次数设置为1，从而实现轮换的效果
b=1
}
},1000)//将事件的延迟设置为1s
</script>
</body>
</html>
2.树状菜单
代码如下：
//实现菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树状菜单/title>
<style>
div{//定义块状标签
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="d1"></div>
<button onclick="fn1()">点我隐藏</button>
<button onclick="fn2()">点我隐藏</button>
<hr>
<ul>
<li><i onclick="fn3('u1')">家电</i>
<ul id="u1">
<li>书记</li>
<li>主席</li>
<li>村长</li>
</ul>
</li>
<li><span onclick="fn3('u2')">Apple</span>
<ul id="u2">
<li>视界</li>
<li>时间</li>
<li>good</li>
</ul>
</li>
</ul>
<hr>
//创建表格
<table border>//border边框
<tr><td><input type="checkbox" onclick="fn4(this.checked)"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
<tr><td><input type="checkbox"></td></tr>
</table>
<script>
//实现全选的函数
function fn4(status) {
//拿到所有的多选框
//设置选中为第一个多选课的装填 status
var is=document.getElementsByTagName("input")//拿到标签元素
for(let i of is){
//注意循环的时候采用let来实现变量，如果使用的var可能产生效果的只有最后一个
//i就是每一个多选框
i.checked=status
}
}
//拿到元素的ID更换元素的隐藏形式（注意！ display隐藏形只有显示(block)与不显示两种(none)）
function fn3(id) {
//根据id拿出对应的元素
var li=document.getElementById(id)
//将对应元素设置为不显示
if(li.style.display==="none"){//如果是隐藏的就将隐藏的形式设置为不隐藏
li.style.display="block"
}else{//如果不是隐藏的就将隐藏形式设置为隐藏
li.style.display="none"
}
}
function fn1() {
// document.getElementById()
// display只有两种状态
// 实现 隐藏与显示的两种方式
if(d1.style.display==="none"){
d1.style.display="block"//如果是隐藏的就将隐藏形式设置为不隐藏
}else{//如果不是隐藏的就将隐藏形式设置为隐藏
d1.style.display="none"
}
}
//根据透明度实现元素隐藏
function fn2() {
// document.getElementById()
// display只有两种状态
//如果显示 那么隐藏
if(d1.style.opacity==0){
d1.style.opacity=1
}else{
d1.style.opacity=0
}
}
</script>
</body>
</html>
3.实现多选
ps:全选效果的思路：先获取“全选”旁边的复选框，再获取其他（除了反选框）所有的复选框，然后再把“全选”旁边的复选框的checked属性值赋值给其他的（除了反选）所有的复选框的checked属性。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function mya(){
//获取全选复选框
var sa=document.getElementById("call");
//获取其他复选框
var sum=document.getElementsByName("ca");
for (var i = 0; i < sum.length; i++) {//遍历其他（除了反选）的复选框
//将全部复选框的状态赋值给其他（除了反选框）的复选框
sum[i].checked=sa.checked;
}
}
</script>
<!-- ps:在这里大家要注意，设置复选框CheckBox的是否被选中是设置复选框CheckBox的checked属性值 -->
<!-- 如果是true就代表选中，反之就是false -->
<table border="1" cellspacing="" cellpadding="" align="center">
<tr align="center"><!-- 行 -->
<td>全选<input type="checkbox" id="call" onclick="mya()"/>
反选<input type="checkbox" id="fx"/></td>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center"><!-- 行 -->
<td><input type="checkbox" name="ca"></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>22</td>
</tr>
<tr align="center"><!-- 行 -->
<td><input type="checkbox" name="ca"></td>
<td>2</td>
<td>李四</td>
<td>女</td>
<td>24</td>
</tr>
<tr align="center"><!-- 行 -->
<td><input type="checkbox" name="ca"></td>
<td>3</td>
<td>王麻子</td>
<td>男</td>
<td>24</td>
</tr>
<tr align="center"><!-- 行 -->
<td><input type="checkbox" name="ca"></td>
<td>4</td>
<td>王五</td>
<td>男</td>
<td>25</td>
</tr>
<tr align="center"><!-- 行 -->
<td><input type="checkbox" name="ca"></td>
<td>5</td>
<td>小六</td>
<td>男</td>
<td>26</td>
</tr>
</table>
</body>
</html>
效果图如下：
在下期会给大家带反选的功能！
今天的分享到此为止啦，后续持续更新哈！
扫一扫
5667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
