函数
<script>// parseInt('200px')// getSum(20, 30)
function sayHi() {console.log('hello,function!')}
// 函数必须进行调用，才会执行sayHi()let age = 21
// 函数要有返回值，一定要添加return关键字，否则返回值为undefinedfunction getSum() {// console.log(a+b)// return a + b// arguments 接收所有实参，并保存到arguements数组里console.log(arguments)let sum=0console.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>
匿名函数
<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 = 10let b = 20function 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.genderconsole.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)) + 2console.log(random)</script>
</body>
日期内置对象
<script>let date = new Date()let year = date.getFullYear()let month = date.getMonth() + 1let 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-1let 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>
修改元素样式属性
<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>
