web前端

最新推荐文章于 2024-10-16 21:35:12 发布

暮白.

最新推荐文章于 2024-10-16 21:35:12 发布

阅读量39

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2201_75585337/article/details/131946927

版权

1.盒子阴影

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

width: 300px;

height: 300px;

background-color: pink;

/* 10px:x轴的偏移量 20：y轴的偏移量 inset:内阴影 30：模糊半径 */

box-shadow: inset 10px 20px 30px;

}

p {

/* 文字阴影 */

text-shadow: 10px 10px 2px;

}

</style>

</head>

<body>

<p>

我是一段文字

</p>

</body>

</html>

2.多列显示

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

p {

/* 以几列进行显示 */

column-count: 3;

/* 列于列之间的间距的 */

column-gap: 30px;

}

</style>

</head>

<body>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, non culpa consectetur deleniti asperiores

corporis pariatur mollitia animi omnis fuga sint deserunt debitis, hic iste ad ex! Pariatur, velit vel!

Dignissimos commodi deleniti molestiae totam nam velit, ea repudiandae? Delectus totam deleniti atque

perspiciatis officiis vitae dolor nisi vero adipisci, nihil quisquam quas in. Eum minus laboriosam aliquam optio

esse!

Commodi, ad aliquam iure cupiditate eum non voluptas, optio distinctio id praesentium eaque rerum, amet est hic

quas! Et dolorum dignissimos atque officiis, eos modi quisquam animi est ut tenetur.

Porro, enim reprehenderit soluta cumque deleniti rerum iure ipsam illo, tenetur delectus iste cupiditate!

Laborum quos, fugit repudiandae perspiciatis quod, dolorem commodi provident ea excepturi blanditiis, laboriosam

distinctio ipsum consectetur.

</p>

</body>

</html>

3.媒体查询

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* @media only screen and (min-width: 320px) and (max-width: 480px) */

div {

width: 400px;

height: 50px;

background-color: aqua;

}

@media screen and (min-width: 900px) {

div {

background-color: pink;

color: rgb(195, 19, 48);

}

</style>

</head>

<body>

<div>cnjdcldkcd</div>

</body>

</html>

4.js引入方式

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

document.write('你好，javascript')

console.log('aaa')

</script>

</body>

</html>

5.常用

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

document.write('我是js插入的语句')

// 控制台输出语句

console.log('你真6')

// alert 警示框

alert('警告，你小子立即退出')

// 输入语句输入框

prompt('请输入您的年龄')

</script>

</body>

</html>

6.外部js

console.log('我是外部js文件打印的')

7.变量

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// prompt('请输入您的用户名：')

// 变量：存储数据的容器盒子

// 声明变量 let 变量名

let uname

// 变量赋值

uname = 'gouxin'

// 变量的初始化

let age = 18

console.log(age)

// 改变变量

uname = 'xianyanbao'

console.log(uname)

// 同时声明多个变量

let a = 1, b = 2

console.log(a, b)

</script>

</body>

</html>

8.用户名输入案例

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let uname = prompt('请输入用户名：')

document.write(uname)

</script>

</body>

</html>

9.变命名规范

1.有效符号(大小写字母,数字,下划线,$)

2.关键字,保留字不能用于变量命名

3.不以数字开头

4.尽量用有意义的变量名

5.驼峰命名法 userName

10.var

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// var a = 12

// let b = 22

// var 不存在块级作用域可以先使用，后声明多次声明同一变量

// console.log(uname)

// var uname = 'gouxin'

// var uname = 'zs'

// console.log(uname)

// let uname = 'gouxin'

// let uname = 'zs'

</script>

</body>

</html>

11.常量

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 常量：存储的数据不能再变化 const 常量名

const GENDER = 'nv'

// GENDER = '男'

console.log(GENDER)

</script>

</body>

</html>

12.基本数据类型-字符串

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 对于javascript弱数据类型语言，只有进行赋值了，才知道是什么数据类型

// 字符串string类型 ' ' " "

let a

a = 'nihao'

// typeof 检测数据类型的方法

console.log(typeof (a))

let b = "欢迎你加入js "

console.log(typeof (b))

let c = "你是一本参不透的'书'"

// 字符串的拼接 +

let uname = 'zs'

let age = 21

document.write('姓名是：{uname}' + uname + '年龄是：' + age)

</script>

</body>

</html>

13.模板字符串

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let uname = prompt('请输入用户名：')

let password = prompt('请输入密码：')

document.write(`<h1>用户名是:${uname},密码是：${password}</h1>`)

let a = `gouxin`

console.log(typeof (a))

</script>

</body>

</html>

14.其他类型

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let num = 1

// 布尔类型 true false

console.log(2 > 3)

// undefined 未定义

console.log(uname)

var uname = 'zs'

// null 空的

// NAN not a number

console.log(undefined + 1) //nan

console.log(null + 1)

</script>

</body>

</html>

15.数据类型转换

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 隐式转换

// let a = 2

// let b = '3'

// console.log(a + b)

// 显式转换 Number(str) +

// let num1 = Number(prompt('请输入数字1：'))

// let num2 = Number(prompt('请输入数字2：'))

// let num1 = +prompt('请输入数字1：')

// let num2 = +prompt('请输入数字2：')

// console.log(num1 + num2)

// parseInt parseFloat 尽可能将字符串转换为数字类型

let c = 3.1415826

let d = '200.22px'

console.log(parseInt(d))

console.log(parseFloat(d))

</script>

</body>

</html>

16.运算符

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let a = 3

let b = 5

// + - * / %

console.log(a + b)

console.log(b - a)

console.log(b * a)

console.log(b / a)

// % 取余

console.log(b % a)

a += 3 //a = a + 3

console.log(a)

a -= 3 //a = a - 3

a *= 3

a /= 3

// 赋值运算符的优先级高于后减减，因此，先赋值，后运算

// let c = b--

// 自增自减

// 前减减的优先级大于赋值运算符，因此，先减减，再赋值

let c = --b

console.log(c)

let d = c++

console.log(d)

console.log(c) //5

let f = ++c

console.log(f)

</script>

</body>

</html>

17.比较运算符

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// let a = 4

// let b = 5

// console.log(a > b)

// console.log(a >= b)

// console.log(a < b)

// console.log(a <= b)

// console.log(a = b) = 赋值运算符

console.log(3 == '3') // == :等于只判断值有隐式转换，把字符串转换为数字类型

console.log(3 === '3') //===:全等判断值、数字类型是否都一致

</script>

</body>

</html>

18.逻辑运算符

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// && :两真才真，一假则假

console.log(3 > 2 && 2 > 4)

// 或 || : 一真则真，两假才假

console.log(3 > 2 || 2 > 4)

// 非！取反

console.log(!(3 > 2))

</script>

</body>

</html>

19.单分支语句

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let age = +prompt('请输入你的年龄：')

// if(判断条件){

// 执行代码块

// }

if (age > 18) {

alert('欢迎光临，你成年了~')

}

</script>

</body>

</html>

20.双分支语句

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let age = +prompt('请输入您的年龄')

// if (条件语句1) {

// 执行代码块1

// } else {

// 执行代码块2

// }

if (age > 18) {

alert('你成年了思密达~')

}

else {

alert('小屁孩，边儿去~')

}

</script>

</body>

21.多分支语句

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let score = +prompt('请输入你的成绩：')

// if (条件1) {

// 代码块1

// }

// else if (条件2) {

// 代码块2

// }

// else if (条件三) {

// 代码块3

// } else {

// }

if (score <= 60) {

alert('脑子呢？？')

} else if (score <= 80) {

alert('还不错，继续努力就及格了')

}

else if (score <= 120) {

alert('再接再厉，牛的')

} else {

alert('你已经是大神了，慕白你')

}

</script>

</body>

</html>

22.判断平闰年

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let year = +prompt('请输入年份：')

// if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {

// alert(`${year}是闰年`)

// } else {

// alert(`${year}是平年`)

// }

year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 ? alert(`${year}是闰年`) : alert(`${year}是平年`)

</script>

</body>

</html>

23.三元运算

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// 判断条件 ? 成立时执行的代码 : 不成立时执行的代码

// 三元运算符双分支的简写

// if (3 > 5) {

// alert('这个世界疯了')

// } else {

// alert('你是不是个der')

// }

3 < 5 ? alert('这个世界疯了') : alert('你是不是个der')

</script>

</body>

</html>

24.switch语句

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let week = prompt('请输入今天星期几了')

switch (week) {

case "1":

alert('今天星期一，猴子穿大衣~')

break

case "2":

alert('今天星期二，猴子有点二')

break

case "3":

alert("今天星期三，猴子去爬山")

break

case "4":

alert("今天星期四，猴子要找事")

break

case "5":

alert("今天星期五，猴子打老虎")

break

case "6":

case "7":

alert("今天周末，休假")

break

default://无符合条件时，执行的代码

alert("你是猴子派来的救兵吧~~~")

break

}

</script>

</body>

</html>

25.for循环

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// console.log('我爱你')

for (let i = 0; i < 100; i++) {

console.log('我爱你')

}

</script>

</body>

</html>

26.求1-100之间的偶数和

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let sum = 0

for (let i = 1; i <= 100; i++) {

if (i % 2 === 0) {

sum += i//sum=sum+i

}

alert(sum)

</script>

</body>

</html>

27.while循环

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let i = 1

while (i <= 10) {

console.log(i)

i++

}

// while (true) {

// let n = prompt('你爱我吗？')

// if (n === "爱") {

// break

// }

alert(true === 1)

</script>

</body>

</html>

28.do...while循环

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// let i = 11

// while (i <= 10) {

// console.log(i)

// i++

// }

let j = 11

do {

console.log(j)

j++

} while (j <= 10)

</script>

</body>

</html>

29.break、continue

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

for (let i = 0; i < 100; i++) {

if (i === 50) {

continue //退出本次循环

}

if (i === 70) {

break//退出循环

}

console.log(i)

}

</script>

</body>

</html>

30.循环嵌套

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* span {

display: inline-block;

background-color: pink;

} */

</style>

</head>

<body>

for (let i = 1; i < 8; i++) {

console.log(`今天是第${i}天`);

for (let j = 1; j <= 10; j++) {

console.log(`这是我送的第${j}朵花`)

}

for (let i = 1; i <= 5; i++) {

for (let j = 1; j <= i; j++) {

document.write(`<span>*</span>`)

}

document.write(`<br/>`)

}

</script>

</body>

</html>

31.数组

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

//存储多个数据的容器-数组

// 声明方式： [] 数组存在数组下标，从0开始

let arr = ['gouxin', 'liuxingyun', 'xainyanbao', 'wangwu']

console.log(arr)

// 查找数组名[数组下标]

console.log(arr[1])

</script>

</body>

</html>

32.循环加强

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

// for in for of

let arr = [1, 2, 3, 4, 5, 6, 7, 'gouxin', true]

// for (let i in arr) {

// // console.log(i)

// console.log(arr[i])

// }

for (let k of arr) {

console.log(k)

}

</script>

</body>

</html>

暮白.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫