1.如何实现单组开关灯效果
使用场景 就是一个标签有两种状态 并且是来回切换状态
实现步骤
1.创建一个添加 var tag = true/false
2.if(tag==true){ 要做开的效果 更改tag的值为false }else{ 做关的效果 更改tag的值为true }
| <script> | |
| // 1.获取元素 | |
| var dotsNum = document.getElementsByClassName("dotsNum")[0]; | |
| var oImg = document.getElementsByTagName("img")[0]; | |
| var prev = document.getElementsByClassName("prev")[0]; | |
| var next = document.getElementsByClassName("next")[0]; | |
| var title = document.getElementsByClassName("title")[0]; | |
| var list = document.getElementsByTagName("li"); | |
| var arr = [ | |
| "./img/1.jpg", | |
| "./img/2.jpg", | |
| "./img/3.jpg", | |
| "./img/4.jpg", | |
| ] | |
| // 2.点击下一张 | |
| var n = 0;//初始化变量 | |
| next.onclick = function () { | |
| n++; | |
| if (n > 3) { //让图片衔接播放 | |
| n = 0; | |
| } | |
| // 改变图片路径 | |
| oImg.src = arr[n]; | |
| // 改变标题 | |
| title.innerHTML = "动漫" + (n + 1) | |
| // 改变数字指示点 | |
| dotsNum.innerHTML = n + 1 + "/4"; | |
| // 改变圆形指示点的背景色 | |
| // list[0] list[1] list[2] | |
| //先清空所有的样式 再给当前对应指示点设置红色 | |
| for (var j = 0; j < list.length; j++) { | |
| list[j].style.backgroundColor = "#fff"; | |
| } | |
| list[n].style.backgroundColor = "red"; | |
| } | |
| prev.onclick = function () { | |
| n--; | |
| if (n < 0) { | |
| n = 3; | |
| } | |
| // 改变图片路径 | |
| oImg.src = arr[n]; | |
| // 改变标题 | |
| title.innerHTML = "动漫" + (n + 1); | |
| // 改变数字指示点 | |
| dotsNum.innerHTML = n + 1 + "/4"; | |
| // 改变圆形指示点的背景色 | |
| // list[0] list[1] list[2] | |
| //先清空所有的样式 再给当前对应指示点设置红色 | |
| for (var j = 0; j < list.length; j++) { | |
| list[j].style.backgroundColor = "#fff"; | |
| } | |
| list[n].style.backgroundColor = "red"; | |
| } | |
| // 点击第一个指示点 显示第一张图 arr[0] | |
| // 点击第二个指示点 显示第一张图 arr[1] // 0 1 2 3 | |
| for(var i = 0;i<list.length;i++){ | |
| list[i].index = i; | |
| list[i].onclick = function(){ | |
| // 循环点击点击事件中是无法拿到i的顺序值 只能拿到i的最后一次值 | |
| console.log(this.index); | |
| n = this.index; | |
| //改变图片路径 | |
| oImg.src = arr[n]; | |
| // 改变标题 | |
| title.innerHTML = "动漫" + (n+1); | |
| // 改变数字指示点 | |
| dotsNum.innerHTML = (n+1) + "/4" | |
| // 改变圆形指示点 | |
| for(var j = 0;j<list.length;j++){ | |
| list[j].style.backgroundColor = "#fff"; | |
| } | |
| // 点谁就让谁的背景色为red | |
| // this.style.backgroundColor = "red" | |
| list[n].style.backgroundColor = "red" | |
| // list[this.index].backgroundColor = "red"; | |
| } | |
| } |
自定义属性
.1 定义属性
属性的分类
固有属性：系统给的 id class title
自定义属性：程序员自己定义的 tag index
添加自定义属性
直接添加标签上(暂时获取不到)
<div tag = "true"></div> //2.自定义属性直接写行间，可以直观看见，暂时无法获取写在行间的自定义属性 console.log(oDiv.tag); //undefined
使用js添加：标签.属性名 = 属性值
//3.通过js添加自定义属性,标签上看不见，但是可以直接使用 oDiv.a = true; console.log(oDiv.a); //true
2.什么是全局变量/全局函数
在函数外侧声明的变量和函数 可以在任何地方访问和修改 会一直存储在内存中 直到页面关闭销毁
3.作用域链
是js的一种查找机制 先找自己作用域内的变量 依次往父级查找，直到全局作用域(window)
如果全局作用域还找不到 就会出现报错信息 xxx is not defined
4Number(要转换的内容)
先将数据转换成number类型 boolean类型(true-1 false-0) string类型(纯数字 "") null(0) 其他都是NaN
本文含有隐藏内容，请 开通VIP 后查看