1.盒子阴影
box-shadow: inset 10px 20px 30px;
/* 10px:x轴的偏移量 20:y轴的偏移量 inset:内阴影 30:模糊半径 */
/* 文字阴影 */
text-shadow: 10px 10px 2px;
2.多行显示
/* 以几列进行显示 */
column-count: 3;
/* 列于列之间的间距的 */
column-gap: 30px;
3.媒体查询
/* @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);
}
}
4.js常用
<script>
document.write('我是js插入的语句')
// 控制台输出语句
console.log('你真6')
// alert 警示框
alert('警告,你小子立即退出')
// 输入语句 输入框
prompt('请输入您的年龄')
</script>
5.变量
<script>
// 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>
6.用户名输入案例
<script>
let uname = prompt('请输入用户名:')
document.write(uname)
</script>
7.var
<script>
// 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>
8.常量
<script>
// 常量:存储的数据不能再变化 const 常量名
const GENDER = 'nv'
// GENDER = '男'
console.log(GENDER)
</script>
9.基本数据类型-字符串
<script>
// 对于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>
10.模板字符串
<script>
let uname = prompt('请输入用户名:')
let password = prompt('请输入密码:')
document.write(`<h1>用户名是:${uname},密码是:${password}</h1>`)
let a = `gouxin`
console.log(typeof (a))
</script>
11.其他类型
<script>
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>
12.数据类型转换
<script>
// 隐式转换
// 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>
13.运算符
<script>
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>
14.比较运算符
<script>
// 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>
15.逻辑运算符
<script>
// && :两真才真,一假则假
console.log(3 > 2 && 2 > 4)
// 或 || : 一真则真,两假才假
console.log(3 > 2 || 2 > 4)
// 非 ! 取反
console.log(!(3 > 2))
</script>
16.单分支语句
<script>
let age = +prompt('请输入你的年龄:')
// if(判断条件){
// 执行代码块
// }
if (age > 18) {
alert('欢迎光临,你成年了~')
}
</script>
17.双分支语句
<script>
let age = +prompt('请输入您的年龄')
// if (条件语句1) {
// 执行代码块1
// } else {
// 执行代码块2
// }
if (age > 18) {
alert('你成年了思密达~')
}
else {
alert('小屁孩,边儿去~')
}
</script>
18.多分支语句
<script>
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>
19.判断平闰年
<script>
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>
20.三元运算符
<script>
// 判断条件 ? 成立时执行的代码 : 不成立时执行的代码
// 三元运算符 双分支的简写
// if (3 > 5) {
// alert('这个世界疯了')
// } else {
// alert('你是不是个der')
// }
3 < 5 ? alert('这个世界疯了') : alert('你是不是个der')
</script>
21.switch语句
<script>
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>
22.for循环
<script>
// console.log('我爱你')
// console.log('我爱你')
// console.log('我爱你')
// console.log('我爱你')
// console.log('我爱你')
// console.log('我爱你')
// console.log('我爱你')
// console.log('我爱你')
for (let i = 0; i < 100; i++) {
console.log('我爱你')
}
</script>
23.求1-100之间偶数和
<script>
let sum = 0
for (let i = 1; i <= 100; i++) {
if (i % 2 === 0) {
sum += i//sum=sum+i
}
}
alert(sum)
</script>
24.while循环
<script>
let i = 1
while (i <= 10) {
console.log(i)
i++
}
// while (true) {
// let n = prompt('你爱我吗?')
// if (n === "爱") {
// break
// }
// }
alert(true === 1)
</script>
25.do while循环
<script>
// let i = 11
// while (i <= 10) {
// console.log(i)
// i++
// }
let j = 11
do {
console.log(j)
j++
} while (j <= 10)
</script>
26.break,continue
<script>
for (let i = 0; i < 100; i++) {
if (i === 50) {
continue //退出本次循环
}
if (i === 70) {
break//退出循环
}
console.log(i)
}
</script>
27.循环嵌套
<script>
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/>`)
}
28.数组
<script>
//存储多个数据的容器-数组
// 声明方式: [] 数组存在数组下标,从0开始
let arr = ['gouxin', 'liuxingyun', 'xainyanbao', 'wangwu']
console.log(arr)
// 查找 数组名[数组下标]
console.log(arr[1])
</script>
29.循环加强
<script>
// 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>