函数
<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] 将arguments中的实参求和加到一起 } return sum } let e = getSum(1,2,3,4,5) // let e = getSum(1,2,3,4,5) getSum求和函数 console.log(e) </script>
文章来源地址https://www.toymoban.com/news/detail-558730.html
匿名函数
<body> <script> // function sayHi(fn) { // fn() // console.log('nihao') // } // function () { // console.log('jiangjia') // } // sayHi(sayHello) // function sayHi() setInterval(function () { console.log('你真傻') }, 1000) </script> </body>
函数表达式
<body> <script> let a = function getSum() { // console.log('jiangaji') 打印到了控制台 } a() // 立即执行函数 (function() {console.log('bjzdjsj')})() (function(){console.log('jiangji')})() </script> </body>
值传递、引用传递
<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>
默认值函数
<body> <script> function getCir(r, PI = 3.14) { return PI * r * r } let a = getCir(3) console.log(a) </script> </body>
箭头函数
<body> <script> // setInterval(function () { // console.log('i love you') // }, 1000) setInterval(() => { console.log('i hate you') }, 1000) </script> </body>
递归
<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>
数据遍历
<body> <script> let arr = ['a', 2, 3, 4, 5, 6] for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } </script> </body>
字符串的常见方法
<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>
对象
<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>
对象的增删改查
<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>
随机抽奖案例
<title>年会抽奖</title> <style> .wrapper { width: 840px; height: 420px; background: url(./images/bg01.jpg) no-repeat center / cover; padding: 100px 250px; box-sizing: border-box; } </style> </head> <body> <div class="wrapper"> <strong>年会抽奖</strong> <h1>一等奖:<span id="one">???</span></h1> <h3>二等奖:<span id="two">???</span></h3> <h5>三等奖:<span id="three">???</span></h5> </div> <script> let arr = ['缑欣', 'jiangjia', 'everyone', 'zhangsan'] function getRandom(N, M) { return Math.floor(Math.random() * (M - N + 1)) + N } let random = getRandom(1, 5) alert(random) </script> </body>
对象的遍历
<body> <script> let obj = { uname: 'zhangfei', age: 21, gender: 'nan' } for (let k in obj) { console.log(k) console.log(obj[k]) } </script> </body>
数组对象
<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>
Math内置对象
<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>
日期内置对象
<script> let date = new 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}`) </script> </body>
dom
<body> <button>提交</button> <script> const btn = document.querySelector('button') // console.dir(btn) console.log(typeof (btn)) </script> </body>
获取元素的方法
<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>
修改元素内容
<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>
随机点名案例
<body> <div>jaingjai</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>
修改元素属性
<body> <img src="./images/images/周迅.webp" alt="周迅"> <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('btn') // 2.改元素属性 img.src = "./images/images/周迅.webp" img.title = "我按尽可能竞选" ipt.type = "password" ipt.placeholder = "请输入用户名" ipt.readOnly= false btn.disabled= false </script> </body>
文章来源:https://www.toymoban.com/news/detail-558730.html
修改元素样式属性
<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>
定时器
<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>
到了这里,关于Web 前端 Day 6的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!