JavaSprict函数
JavaSprict函数
盛透侧视攻城狮
发布于 2024-10-21 20:29:47
发布于 2024-10-21 20:29:47
代码可运行
运行总次数：0
代码可运行
01-函数
<!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>02-匿名函数
<!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>03-函数表达式
<!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>04-值传递、引用传递
<!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(b) {
b. push(1000)
}
change2(arr)
alert(arr)
</script>
</body>
</html>05-默认值参数
<!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>06-箭头函数
<!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>07-递归
<!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>08-数组遍历
<!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>09-字符串的常见方法
<!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()
// 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][j])
}
}
</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 (幂指数)，下图为3.12的10次方
console.log(Math.pow(3.12, 10))
// 开平方根
console.log(Math.sqrt(9))
// 随机数 ，默认为[0~1)
// console.log(Math.floor(Math.random() * 11) + 2)，左闭右开！！！,下图为[2,11)
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 //:规定0开始
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))//保留小数后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将所有匹配的元素全部获取到，并存放到伪数组：长得像数组，但没有整天三改的方法（NodeList）
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'))//Id名
console.log(document.getElementsByClassName('two'))//类名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、获取元素，(String)
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 ，随机同式：M.ran()*（M-N+1）+N
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 = true//禁用
</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 "></div>
<script>
// 1、获取元素
const box2 = document.querySelector('.box2')
const div = document.querySelector('.box1')
// 2、通过style修改样式,注意字体的S得大写才认!!!
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不再指向对象，指向全局环境
//解决方法1：将调用添加至一个新函数：setTimeout(function () { obj.sum() }, 1000)
let a = setTimeout(obj.sum.bind(obj), 1000)//解决方法2：bind作用将this只指向obj中
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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-10-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
