web前端笔记+小米页面布局+时间倒计时

最新推荐文章于 2024-08-09 10:42:44 发布

季节性回暖

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量600

点赞数 10

文章标签：前端笔记

本文链接：https://blog.csdn.net/m0_73996670/article/details/137685247

版权

document.querySelectorALL()即使获取元素只有一个，也依旧是用伪数组进行返回

元素内容

1.获取元素对象

const box1 = document.querySelector("div")

2.innerText获取元素文本内容(不识别标签)

console.log(box1.innerText)

3.innerHTML(可获取，识别标签)

4.textContent(不识别标签)

对象.属性 = 值

ipt.type = "password"

更改style样式

1.对象.style.样式 = ""

box.style.width = "100px"

box.style.height = "100px"

box.style.backgroundColor = "pink"(碰见带-的符合属性，采用小驼峰的方式规避使用)

className 不保留原来的类名

box.classList.add()追加新的类名到元素对象上

box.classList.remove("box1") 移除元素对象的类名

box.classList.toggle("box1")如果类名存在则移除，如果不存在则添加

注意：函数小括号不需要携带

button.addEventListener("click",text,true)

增加事件监听

button.removeEventListener("click",text,true)

移除事件监听

... 剩余参数，接到的是除了位置参数外其余的参数，返回的是真数组

展开运算符console.log（...arr1）

console.log(Math.max(...arr1))

对象

1.可以通过对象下面的名称引用

2.console.log（obj1["age"])

3.for(let i in obj1){

console.log(obj1[i])

}

垃圾回收机制

内存中的生命周期 js代码最终会到内存中

1.内存分配（声明函数，声明对象）

2.内存使用（读数据）

3.内存回收，数据使用完毕之后（局部变量），不再使用了要回收，垃圾回收器来完成此操作

内存泄漏：该被回收的由于未知因素导致没有被成功回收从而泄露

js中的垃圾回收方法：

1.引用计数法（现在不常用，有弊端）

如果一个对象已经没有指向它的引用了，那么就认为不再需要，然后就会被释放掉

记录引用次数 ++ ——

引用次数为0时，释放内存

2.标记清除法

从根部查找内存的对象，凡是能找到的都是需要使用的，剩下的就是不需要使用的

闭包：外部访问函数内部的变量

内层函数+外层函数的变量

内层函数使用了外层函数的变量

console.log(Math.E)

console.log(Math.PI)

let a = 4.999

let b = 3.11

向下取整

console.log(Math.floor(a))

向上取整

console.log(Math.ceil(b))

绝对值

console.log(Math.abs(-111))

随机数(只能取【0，1）)

console.log(Math.random())

如下能取到【0，10】

console.log(Math.floor(Math.random()*10+1))

最大值最小值

console.log(Math.max(1,2,3))

console.log(Math.min(1,2,3))

四舍五入

console.log(Math.round(3.51))

开平方根

console.log(Math.sqrt(9))

幂次方

console.log(Math.pow(2,3))

date实例化时间对象

let date = new Date()

console.log(date)

年

let year = date.getFullyear()

console.log(year)

月

let m = date.getMonth()+1

console.log(m)

日

let day = date.getDate()

console.log(day)

时分秒

let hh = date.getHours()

let mm = date.getMinutes()

let ss = date.getSeconds()

console.log(hh)

console.log(mm)

console.log(ss)

星期

let w = date.getDay()

console.log(w)

获取毫秒数

let mins = date.getMilliseconds()

console.log(mins)

时间戳(此刻距离19700101 00：00：00的毫秒数)

let timechuo = date.getTime()

console.log(timechuo)

获取元素对象

1.通过css选择器获取

document.querySelector("选择器")

let div1 = docunment.querySelect(".box1")

console.dir(div1)

4
转移运算符：基于二进制的运算
1byte（字节）＝8bit
解决负数运算存在的问题：原码，反码，补码
符号位：用最高的一位表示符号位
1表示-，0表示+。
原码：十进制对应的二进制
反码：除了符号位之外，其余取反
补码：反码+1
负数运算-2➕3
-2的原码为1000 0010
反码1111 1101
补码1111 1110
3的原码为0000 0011
反码0111 1100
补码0111 1101
补码相加即可
异或^：相同为0不同为1
表达式和语句：
表达式是一组代码的集合，例：
let x=7
3+4
x++
语句：JS的命令。例：alert（）
代码的三大组成：顺序，选择，循环
分支语句（选择）
条件只要最终返回的是布尔值就可以
1.双分支：
if （条件）｛满足条件时执行的代码｝
｝else｛不满足条件时执行的代码｝
2.多分支：
if （条件）｛满足条件时执行的代码｝
｝else if ｛｝else｛｝
三元运算符：条件？满足条件时执行的代码：不满足时执行的代码
Switch语句：
Switch（数据）
｛
case值1：
代码
case值2：
代码
break（跳出，否则会一直执行直到结束）
default（其他）：
代码
｝
例看截图
循环：某一段代码重复执行
while（循环条件）｛
循环体
｝
组成：初始值，终止条件，初始值的变化
break，continue
break：终止掉离自己最近的一层循环
continue：跳出

type属性
checkbox多选
file文件
input输入
checked默认选择
name属性，表明是一组的单选
placeholder输入框内提示，输入内容则消失
readonly只读
submit提交按钮（默认）
value值（用来改变里面的值）
required设置为必填项
multiple可以提交多个文件
button提交摁钮，有提交功能
label堆在一起
select选择框（里面的）
option选项
selected默认选中
textarea文本域
类选择器class=类名
id选择器：井号加id名
标签选择器，把所有的要找的标签找到
通配符选择器（星号）（优先级最低）全找到

内边距：padding（会影盒子的大小）：内部内容与框的距离
一个值时，表示上下左右的距离
两个值时，分别表示上下左右
三个值时，分别表示上左右下
四个值时，分别表示上右下左（顺时针）
外边距（margin）：框与框外边的距离
一个值，上下左右
两个值，上下左右
三个值，上左右下
四个值，上右下左
margin：0 auto：让块元素自动水平居中
边框：border（会影响盒子的大小）：1px solid（实线） color
box-sizing：border-box（让padding和border不再影响盒子的大小）
内容溢出（overflow）内容隐藏（hidden）
伪类选择：.父项子项第几个child

定位
默认有margin和padding
静态定位：static 不能使用偏移
定位position
相对定位（保留原来位置）：relative 相对于本身位置进行定位
绝对定位（不会保留原来位置）：absolute 如果离最近的上级具有相对定位，则相对于上级进行定位，如果上级没有相对定位，就相对于有相对定位的上级进行定位，如果一直没有上级有相对定位，则相对于浏览器进行定位（子绝父相）
固定定位（不会保留原来位置）：fixed 相对于浏览器可视窗口进行定位，不会随着页面的滚动而进行滚动
粘性定位：sticky 相对于浏览器可视区域进行定位
默认情况下z-index是0，数值越大，越优先显示

边框弧度（border-radius）：有弧度的边框
一个：四角
两个：两个对对角
三个：左上，右上加左下，右下
四个：顺时针
盒子阴影（box-shadow）：盒子的阴影
15px（X轴的偏移量） 20px（Y轴的偏移量） 10px（模糊的半径，数据越大越模糊）后面接颜色再后面加inset可以改为内部阴影
文字阴影（text-shadow）：和上述盒子阴影应用差不多
列表属性
resize：none，文本域不可拖拽
浮动（float：）：
1.顶部对齐
2.加了就飘浮起来了（脱离标准流）
3.受父级盒子约束
4.浮动时无高度的父盒子会塌陷，解决方法:
1.给父盒子高度
2.给父盒子浮动（不可取，会造成不好后果）
3.clear：both清除浮动影响
*｛默认
list-style：none去除排列小点
flex布局：弹性活动布局
display：flex（用在ul里，ul变成弹性容器，li会变成弹性盒子，子项会默认在一行排列）
主轴：默认在水平方向
侧轴：默认在垂直方向
子元素可以自动挤压和延伸
主轴上的对齐方式：
在弹性容器中：
justify-content：flex-end贴后排列
justify-content：space-between两边贴边，中间平分剩余空间
justify-content：space-around平分空间
justify-content：space-evenly平分空间与边框距离相同
justify-content：center居中
侧轴的对齐方式：
在弹性容器中：
align-items：center
align-items：end
align-items：start
修改主轴方向：
弹性容器：
flex-direction：column；改成垂直方向，从上到下
flex-direction：row-reverse；改成反方向

其他
flex：1整数：占用父级剩余的尺寸份数
flex-wrap：wrap默认不换行改成换行
grid：
display：grid
repeat（重复几次，值）

3.26
透明度（opacity）：越靠近0越透明。
元素的显示和隐藏：
visibility：hidden，在页面中仍然占有位置。
visibility：visible
a hover p大括号
光标的样式（cursor）：text工字型。pointer小手型。move十字箭头。default默认箭头。copy箭头右上角有个小括号。
轮廓样式（outline-）outline-width
outline-color outline-style
outline：10px solid red
outline：none
获取焦点状态：
input：focus大括号outline：10px solid red
hover对所有属性都有效（鼠标经过时发生什么反应）
.father hover .son（鼠标放在father上让son执行）
过渡（transition）：过渡属性花费的时间
给元素本身进行设置
transition：width 2s，height 2s，background-color 4s
transition：all 时间（所有属性用多少时间过渡媒体查询（@media）：看截图
字体（@font-face）大括号font-family：自定名字 scr：url（导入路径）
平面转换（transform）：translateX（X轴）
百分比是参照盒子自身的尺寸
transform：translateY（Y轴）注意不能同时出现，因为属性名相同会覆盖，可以这样做：
transform：translate（200px，400px）
transform：translateX（）空格translateY（）
旋转（transform：rotate）rotateZ（30deg）deg是度数，Z是沿着转的轴，X，Y也可以
默认是Z轴顺时针旋转。
改变原点：transform-origin：水平方向原点位置空格垂直方向原点位置。可以给方向名词，还可以给像素
平移旋转进行（先平移再选择）：
transform：translate（）空格 rotate（）
缩放：transform：scale（X轴的缩放倍数，Y轴的缩放倍数）若是有个数则是整体缩放倍数。
倾斜：transform：skewX（）单位也是角overflow：hidden
空间转换：
transform：translate3d（x，y，z）
（父盒子）视距：persspective：1000px
（父盒子）transform：preserve-3d
动画：
定义动画：
@keyframes 自定名字｛
from｛起始宽高颜色｝
to｛目的宽高颜色｝
｝（from to 可以用百分号表示进程）
div｛animation：自定花费时间｝
也可以复合表达
animation-后接
自定名（name）花费时间（duration）推迟（delay）
执行完毕时的状态：-fill-mode：forwards
速度曲线-timing-function：steps（12）帧数
重复次数-iteration-count：次数（Infinite无限循环）
暂停：-play-state：paused（和hover配合使用）
只有名字和花费时间是必有的，其他属性都可有可无

相邻边框合并：border-collapse：collapse（给table加的（父级加））
字体图标：去iconfont找
解决图片底部空白：vertical-align：middle之类的

JavaScript：一门弱数据类型的编程语言，实现的是人机交互的效果
JavaScript的书写位置：
内部js：写在HTML里面用script标签包住。写在body结束标签的前面
外部js：代码写在.js结尾的文件中，通过‹script src=“”›‹/script›
js的注释：//单行注释 Ctrl➕/
/* 多行注释 */
js的结束符：分号；默认会将换行符识别为一个结束符，；可写可不写，但是要保证代码的风格统一，要不写，要不就不写
js的输入输出语法：
输入：prompt（“提示语”）
输出：1.document.write（“要输出的内容”），向body中输出内容，能够识别标签，解析成为网页元素
2.警示语法：alert（“要输入的内容”）弹出警告框
3.控制台输出：console.log（“控制台打印”）程序员调试时使用
变量：
声明变量：let 变量名
变量赋值：变量名＝变量值
例如：let password
password＝“123456”
直接赋值：let uname ＝ “zhangsan”
多次声明：let age1=21，age2=23
let 声明的变量不允许重复声明
var和let的区别：
1.VAR可以重复声明变量
2.let声明的变量不能在声明之前进行使用。var存在变量提升问题，但不合理。
3.var不存在块级作用域的概念
后面声明变量使用let
变量的命名规范：
1.只能用数字，字母，下划线，$组成，并且不用数字开头。
2.不能使用关键字，保留字。
3.js严格区分字母的大小写。
4.起名是最好具有意义的。
5.遵循小驼峰命名法：findAgeUsername。
数据类型：
基本数据类型：
number：整型浮点型负数
string：通过“”＇＇反引号包起来的，都是字符串。单引号双引号同时使用可以用来嵌套，也可以用反斜杠来转义，反引号包起来的字符串可以进行换行
字符串的拼接：+
document.write（“你是”+“张三”+str1）
模板字符串可以拼接字符串和变量
bool：true/false
undefined
null：值为空
typeof：检查类型
引用数据类型：object function array
js是弱数据类型语言，它的变量类型只有在赋值之后才能确定。也就是说变量赋予的变量值是什么数据类型，变量就是什么数据类型。
数据类型的转换：
隐式转换：系统自动转换
加号两边存在一遍是字符串，则另外一边会被转换成字符串。
除了加号，其他的算术运算符都会把字符串转换成数字类型。
字符串前面添加加号就会被转换成数字类型。
显式转换：
转换为数字：Number（）。如果参数中出现字符串，最终结果会是NaN，NaN属于number类型的，不是一个数字no a number。
paresInt（）会尽可能的把参数转换成整型
paresFloat（）会尽可能的把参数转换成浮点型
转换成字符串：String（）
变量toString（进制）
运算符：
算术运算符：+ - * / %
赋值运算符：= += -= *= /= %=
a+=3》》》a= a+3
自增自减运算符：
i++ ++i之类的，赋值运算符的优先级大于后加加，先进行赋值运算。
前加加的优先级高于赋值运算符，先进行前加加再进行赋值运算。
比较运算符：大于，小于，等于，大于等于，小于等于，等于＝=，===，!==。返回布尔值。一个等于是赋值，两个等于才算等于。
==：只会判断值是否相同
===：会判断值和数据类型是否都相同
NaN不等于任何值，包括他自身
逻辑运算符：&& 与，||或，！非
与：两真才真
或：一真则真
非：取反

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>小米布局练习</title>

<link rel="stylesheet" href="../小米布局练习/index1.css">

</head>

<body>

<div class="header">

<div class="content">

<div class="header-left">

<a href="#">小米官网</a>