函数
<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>
匿名函数
<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>
修改元素样式属性
<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>
