web前端 第六天总结
案例1：函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // parseInt('200px') // getSum(20, 30) function sayHi() { console.log('hello,function!') } // 函数必须进行调用，才会执行 sayHi() let age = 21 // 函数要有返回值，一定要添加return关键字，否则返回值为undefined function getSum() { // console.log(a + b) // return a + b // arguments 接收所有实参，并保存到arguements数组里 console.log(arguments) let sum = 0 console.log(age) for (let i in arguments) { sum += arguments[i] } return sum } let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5) console.log(e) </script> </body> </html>
案例2：匿名函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // function sayHi(fn) { // fn() // console.log('nihao') // } // function () { // console.log('jiangjia') // } // sayHi(sayHello) // function sayHi() setInterval(function () { console.log('你真傻') }, 1000) </script> </body> </html>
案例3：函数表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // let a = function getSum() { // console.log('jiangjia') // } // a() // 立即执行函数 (function () { console.log('liqingyu') })() // (function () { console.log('jiangjia') }()) </script> </body> </html>
案例4：值传递，引用传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 值传递 let a = 10 let b = 20 function change(x, y) { x = 30; y = 50; } change(a, b); alert(a + "--" + b) let arr = [1, 3, 4, 5] // 引用传递 传地址，发生改变 function change2(a) { a.push(1000) } change2(arr) alert(arr) </script> </body> </html>
案例5：默认值参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function getCir(r, PI = 3.14) { return PI * r * r } let a = getCir(3) console.log(a) </script> </body> </html>
案例6：箭头函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // setInterval(function () { // console.log('i love you') // }, 1000) setInterval(() => { console.log('i hate you') }, 1000) </script> </body> </html>
案例7：递归
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 9! // 9*8! function jiecheng(n) { if (n === 1) { return 1 } else { return n * jiecheng(n - 1) } } let a = jiecheng(10086) alert(a) // 练习：递归求1~n的和 // 100+1~99的和 function he(n) { if (n == 1) { return 1 } else { return n + he(n - 1) } } alert(he(5)) </script> </body> </html>
案例8：数组遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let arr = ['a', 2, 3, 4, 5, 6] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } </script> </body> </html>
案例9：字符串的常见方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let str = new String() // let str = '你是who' console.log(str.split('w')) console.log(str.substring(2, 4)) console.log(str.startsWith('你')) console.log(str.endsWith('你')) console.log(str.includes('w')) </script> </body> </html>
案例10：对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // let arr = [160, 160] // 对象：无序的数据集合 let obj = { uname: 'zhangfei', age: 21, gender: 'nan' } // console.log(obj) // 查找对象元素 console.log(obj.uname) console.log(obj['age']) // let obj2 = new Object() let obj2 = { uname: '刘德华', age: 60, sing: function () { console.log('我要唱歌了') } } obj2.sing() </script> </body> </html>
案例11：对象的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let obj = { uname: 'zhangfei', age: 21, gender: 'nan' } // obj.uname // obj['age'] // 改：对象.属性名 obj.uname = 'GGBond' // 增加 对象.新属性名 obj.sing = function () { console.log('sing~') } // delete 对象.属性名 delete obj.gender console.log(obj) </script> </body> </html>
案例12：对象的遍历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let obj = { uname: 'zhangfei', age: 21, gender: 'nan' } for (let k in obj) { console.log(k) console.log(obj[k]) } </script> </body> </html>
案例13：数组对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let arrObj = [ { uname: 'zs', age: 21 }, { uname: 'jiangjia', age: 33 }, { uname: 'lisi', age: 12 } ] console.log(arrObj) // arrObj[1]['uname'] for (let i = 0; i < arrObj.length; i++) { for (let k in arrObj[i]) { console.log(arrObj[i][k]) } } </script> </body> </html>
案例14：Math内置对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log(Math.E) console.log(Math.PI) // Math.ceil向上取整 console.log(Math.ceil(3.1415)) // Math.floor向下取整 console.log(Math.floor(3.1415)) // Math.abs 绝对值 console.log(Math.abs(-3.12)) // pow console.log(Math.pow(3.12, 10)) // 开平方根 console.log(Math.sqrt(9)) // 随机数 // console.log(Math.floor(Math.random() * 11) + 2) let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2 console.log(random) </script> </body> </html>
案例15：日期内置对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let date = new Date() // alert(date) let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() let hh = date.getHours() let mm = date.getMinutes() let ss = date.getSeconds() let gg = date.getDay() alert(gg) document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`) let a = 3.234364 alert(a.toFixed(4)) </script> </body> </html>
案例16：dom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>提交</button> <script> const btn = document.querySelector('button') // console.dir(btn) console.log(typeof (btn)) </script> </body> </html>
案例17：获取元素的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>盒子</div> <ul> <li>1</li> <li class="two">2</li> <li>3</li> <li id="four">4</li> </ul> <script> // 1、通过css选择器获取 ('字符串') :狂（嘎嘎）推荐 const li2 = document.querySelector('.two') console.log(li2) const li = document.querySelector('li') console.log(li) // document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组 const lis = document.querySelectorAll('li') console.log(lis) for (let i = 0; i < lis.length; i++) { console.log(lis[i]) } const li3 = document.querySelector('ul li:nth-child(3)') console.log(li3) // 其他 console.log(document.getElementsByTagName('div')) console.log(document.getElementById('four')) console.log(document.getElementsByClassName('two')) </script> </body> </html>
案例18：修改元素内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="one">我是一个即将被更改的盒子</div> <div class="two">我是一个即将被更改的盒子</div> <script> // 1、获取元素 const box1 = document.querySelector('.one') const box2 = document.querySelector('.two') console.log(box1) console.log(box2) // 2、操作 box1.innerText = `<h1>jiangjia</h1>` box2.innerHTML = `<h1>chensongjie</h1>` </script> </body> </html>
案例19：随机点名案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>jiangjia</div> <script> let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] // 1、获取元素 const box = document.querySelector('div') // 2、获取随机数 n-0 m---arr.length-1 let random = Math.floor(Math.random() * arr.length) // 3、改内容 box.innerHTML = `${arr[random]}` </script> </body> </html>
案例20：修改元素属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="../images/1.webp" alt="刘德华" title="刘德华"> <input type="text" placeholder="wedjed" readonly> <button disabled>同意该协议</button> <script> // 1、获取元素 const img = document.querySelector('img') const ipt = document.querySelector('input') const btn = document.querySelector('button') // 改元素属性 对象.属性=值 img.src = "../images/2.webp" img.title = "我是个大帅哥" ipt.type = "password" ipt.placeholder = "请输入用户名" ipt.readOnly = false btn.disabled = false </script> </body> </html>
案例21：修改元素样式属性
<!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> .box1 { width: 300px; height: 300px; background-color: rgb(207, 39, 67); font-size: 50px; } </style> </head> <body> <div class="box1">1111</div> <div class="box2 box1"></div> <script> // 1、获取元素 const box2 = document.querySelector('.box2') const div = document.querySelector('.box1') // 2、通过style修改样式 div.style.width = '500px' div.style.fontSize = '16px' div.style.backgroundColor = 'pink' // 3、通过添加类名 calssName会将原来的类名删除掉，不建议使用 // box2.className = 'box1' // classlist.add（'类名'）追加 box2.classList.add('box1') // box2.classList.remove('box1') 移除 box2.classList.toggle('box1') //切换：有则删除，没有则添加 </script> </body> </html>
案例22：定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // setTimeout\setInterval 定时器 // setTimeout :某段代码或者函数在多久后执行 // setTimeout(code||function,time(ms)) // 返回值是一个整数，代表定时器编码 // let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000) // console.log(timer) // let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000) // console.log(timer2) // 传的是函数名 // let timer3 = setTimeout( // fn, 3000) // function fn() { // console.log('6666666') // } // setTimeout(函数或一段代码，延迟时间，实参……) // let timer4 = setTimeout(function (a, b) { // console.log(a + b) // }, 2000, 1, 4) let obj = { uname: 'gouxin', a: 3, b: 4, sum: function () { console.log(this) console.log(this.a) } } obj.sum() // setTimeout(obj.sum, 1000) // 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境 // setTimeout(function () { obj.sum() }, 1000) let a = setTimeout(obj.sum.bind(obj), 1000) clearTimeout(a) // setInterval 间隔一段时间，将代码或者函数执行一次 let timer = setInterval(' console.log(\'6666666\')', 1000) clearInterval(timer) let timer2 = setInterval(function (a, b) { console.log(a + b) }, 1000, 2, 3) clearInterval(timer2) </script> </body> </html>
浙公网安备 33010602011771号