头部开始
logo部分
导航nav
搜索search
用户user
banner横幅图片开始Start
banner横幅图片结束End
——————————————————————
无序列表 应用场景：导航、轮播图、纯列表 都是用无序列表来做的
注意ul里面只能放li，但是li里面可以放任何标签
- 会独占一行有一个小圆点
有序列表
- 前面会有个序号
自定义列表
- 用于自定义列表标题
-
- 自定义列表项目
————————————————-
表格
| 标题可以变大放面 | 里面的格子 |
|---|
格子合并
rowspan =“2” 跨行合并
colspan 跨列合并
————————————————————
input 属性
input text默认 文本输入框 ：nth-child(1-8){默认选中需要添加checked属性}
paword 密码框
radio 单选框 【注意】添加相同name属性可以实现多选一的效果
checkbox 多选框
按钮：
submin 提交
reset 重置
button 普通按钮 建议用 【注意】修改里面的文案加value
文件上传：
file 如果多就加一个multiple就可以多文件上传
按钮：
文本域
cols 一行输入的字数
rows 输入的行数
label标签增大可以点的区域 【重点】
敲代码
第二种学法
属性：placeholder 占位符 就系文本框用户输入完就会消失嘅属性
【】【】【】【重点】用包裹input 的才会用的了重置按钮的功能
___________________________________________________________________________
下拉选项框：
————————————————————————————————————
2021年9月3日
静态地位 基本不用
position: static
相对定位 会占位置建议用在父元素
pasition-relative
绝对定位 不占位置 父相子绝
pasition-absolute
固定定位 不占位置
pasition-fixed
——————————————————————
水平垂直居中 用定位 给父元素加上相对定位
可以实现父变变跟着变 用的地方比较广泛
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px; 子元素的高
margin-left: -100px; 子元素的宽÷2
第二种方法
position: absolute;
left: 50%;
top: 50%;
（2D 转换 来居中）
transform: translate(-50%, -50%);
——————————————————————
img和文字有基线的居中不对其的在图片的样式加 【重点看看】
vertical-align：baseline 基线对齐
vertical-align：top 顶部对齐
vertical-align：middle 中部对齐
vertical-align：baseline 底部对齐
【注意】：给行内元素或者行内块元素设置 优先给img标签设置
让图片隔壁的文字跟图片居中
设置在图片的样式里
vertical-align: middle 中
top 上
middom 中
bottom 下
——————————————————-——————————
用在button按钮 鼠标变形样式
cursor: pointer 鼠标变成小手建议一开就写
cursor:not-allowed;" disabled 禁止访问小手
cursor:default 沉默箭头
cursor:text 工字行
cursor:move 十字光标
——————————————————————————————————————
用于盒子做半圆
border-radius：0 0 0 0；可以设置4个值分别是左上开始
顺时针
————————————————————————-
能够设置元素显示和隐藏
display:none； 元素隐藏 隐藏后是不占位置的记住
display:block; 元素显示
visibility：hidden 也是隐藏 但是隐藏占位置不建议用跟上面的做对比
————————————--————————————
默认值 溢出的部分正常显示
overflow: visible;
overflow:hidden 溢出隐藏 oh 【重点】 还占位置
overflow:scroll 水平和垂直都添加一个滚动条
overflow:auto 自动 溢出了就显示滚动条 不溢出就不显示滚动条 [重点] 一般用这个
三行代码的作用是：隐藏变省略号
overflow: hidden; 溢出部分隐藏
text-overflow: ellipsis; 文字变省略号
white-space: nowrap; 强行文字变成一行
——————————————————————————————————
元素整体透明度 opacity 0 - 1
opacuty:.5;
——————————————————————————
过度
transition: 2s linear; linear匀速
————————————————————————————
伪元素 做遮罩层比较方便
：：before 在......之前
：：after 在......之后
两个样式都要加下面的在能用
content: "";
——————————————————————
拓展：跟盒子的边框合并
border-collapse：collapse 要给table标签设置
2021.9.4
精灵图 第一个是left左 第二是top上都是负值
background: url(./images/abcd.jpg) -366px -411px;
——————————————————————————
注意连写的话要加/分隔位置和尺寸不让么显示
如果写位置的的话第一值是左右第二个值是上下
样式是
background-size 设置图片大小
background-size: contain; 上下到了就不放大了
background-size: cover; 左右到了就不放大了
如过分开写的话background-size 【注意】要写在下面
background的连写：
background：color image repeat position / size
——————————————————————
盒子阴影
浏览器调试工具-> 阴影编辑器 -> 调试
四个值
box-shadow: 水平偏移 垂直偏移 模糊程度 颜色;
box-shadow：0 0 0 #000；
文字阴影
text-shadow: 水平 垂直 模糊程度 颜色
text-shadow: 0 0 0 #000；
可以连写，分开
text-shadow: 0 0 0 #000，text-shadow: 0 0 0 #000；
【】【【】【】【鼠标悬停有出来的感觉】
给个position: relative;父元素
transition: .3s; 过度值
top: 0; 重o开始
.good_button li:hover {
box-shadow: 1px 0px 6px 0px #000; 设置盒子的背景色
top: -3px; 要加个相对定位给父元素
}
或者 transform: translateY(-3px);加在hover上
————————————————————————
伪元素： 【重点※※※※※※※※※※】
：nth-child(1){ 0,1,2,3,4,5加在后面的话就是直接选中子元素的第1个
}
：first-child{} 选中第一个
：last-child{} 选中最后一个
：nth-last-child{n} 倒数的第几个
：nth-child(2n) { 就是偶数或者改成even
：nth-child(2n+1) { 就系奇数或者odd
：nth-child(-n+5) { 就是找到前5个
：nth-child(n+5) { 就是从第5个开始往后
伪元素： 【重点※※※※※】
：：before { 在........之前
comtent=""; 必写属性不然没效果
}
：：after { 在.......之后
comtent=""; 必写属性不然没效果
}
————————————————————————————————
网页三大优化
title 通常设网名
description 用来注释网页用途
keywords 用来注释用品
用来改变网站网站上的logo
——————————————————————————
2021.9.6
寻找BUG思路
【群发消息】1. 确定是否打开了一个错误的文件。
2. 确定文件是否成功引入。
3. 文件是否有保存
4. 去页面检查，哪里有问题就检查哪里。
5. 基础的语法错误，vscode会帮助我们标红提示
6. css样式出现中横线/删除线3中情况
6.1 没有感叹号 样式的层叠性 画了横线。 提升权重。
6.2 有感叹号 unknown property name 不知道这个属性的名字是啥?
6.3 有感叹号 invalid property value 不合法的属性值。
7. 如果样式在页面中检查不到，重点去看css选择器是否有错误。
8. 学会剪切可能有问题的代码，逐步缩小代码出问题的范围
--------------
简洁性 - 确保代码足够简介，冗余的部分在代码复盘的时候要进行合理化的精简
可读性 - 类名 结构要符合规范
健壮性/鲁棒性 - 代码的稳定度，不受后续代码的增加和删除而受到影响
--------------
——————————————————————————————————
——————————————————————————————————
——————————————————————————
1. 设置宽度 width: 100px;
2. 设置高度 height: 100px;
3. 设置外边距 上下左右均有100px的外边距（盒子与盒子之间的距离）margin: 100px;
3.1 设置上外边距 margin-top: 100px;
3.2 设置下外边距 margin-bottom: 100px;
3.3 设置左外边距 margin-left: 100px;
3.4 设置右外边距 margin-right: 100px;
3.5 有宽度的块级元素(占一整行的元素)水平 横向 居中
margin: 0 auto;
margin: auto;
如果只写两个值
margin: 上下外边距 左右外边距
3.6 垂直方向上相邻的两个元素外边距会发生合并现象：
上面盒子设置margin-bottom: 100px;
下面盒子设置margin-top: 200px;
则会取较大的值，最终垂直方向上相邻的两个元素之间有200px的距离，不会发生叠加。
3.7 垂直方向上嵌套的两个元素外边距会发生塌陷现象：
外面大盒子包裹里面小盒子，
里面小盒子设置margin-top: 100px;
则大盒子会和小盒子一起距离顶部100px距离，发生塌陷现象。
解决办法: 给大盒子设置overflow: hidden;(推荐)
或者
给大盒子设置1px的透明边框
或者
给大盒子设置1px的padding
4. 设置内边距（盒子边框与内容之间的距离）上下左右均有100px的内边距 padding: 100px;
4.1 设置上内边距 padding-top: 100px;
4.2 设置下内边距 padding-bottom: 100px;
4.3 设置左内边距 padding-left: 100px;
4.4 设置右内边距 padding-right: 100px;
padding: 上下内边距 左右内边距
5. 取消ul li 列表的小圆点 list-style: none;
6. 取消下划线 text-decoration: none;
6.1 添加下划线 text-decoration: underline;
7. 搜索文档中的内容 ctrl+f
8. 设置背景颜色 background-color: #000;
8.1 background-color: rgb(0,0,0);
8.2 设置背景颜色透明：background-color: rgba(0,0,0,.3);
8.3 透明度中a的取值范围是从0(完全透明) - 1(完全不透明)
9. 元素向左浮动 float: left
10. 元素向右浮动 float: right
10.1 清除浮动：子元素浮动了，脱离标准流不占位置 父元素没有设置高度的情况下
无法被子元素撑开，高度会变成0，所以需要清除浮动带来的影响
隔墙法：给最后一个浮动的元素后添加一个块级元素 同时添加clear: both;
给浮动的父元素添加overflow: hidden;
伪元素清除浮动
.clearfix::after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
11. 设置边框
border: 边框的粗细 线形状 颜色
border: 1px solid #000
设置上边框 border-top: 1px solid #000
设置下边框 border-bottom: 1px solid #000
设置左边框 border-left: 1px solid #000
设置右边框 border-right: 1px solid #000
设置透明颜色边框
border: 1px solid transparent;
12. 单行文字垂直居中： line-height: 高度值
13. 去掉边框 border: 0;
去掉外轮廓线 outline: 0;
14. 设置文字颜色 color: #000;
15. 设置行高 line-height: 20px;
16. 文字水平居中 text-align: center;
17. 设置css3的盒子模型： box-sizing: border-box;
18. 设置版心 .w{width: 1200px; margin: 0 auto;}
19. 设置文字大小 font-size: 14px;
20. 设置文字粗细 font-weight: 700; 加粗
21. 设置文字变细 font-weight: 400; 变细
22. 设置字体 font-family: '微软雅黑';
23. 设置斜体文字正常显示 font-style: normal;
设置文字倾斜显示 font-style: italic;
24. 设置相对定位 position: relative; 相对于自身移动 占位置
25. 设置绝对定位 position: absolute; 相对于最近一层有定位的父辈元素 不占位置
26. 设置固定定位 position: fixed; 相对于浏览器可视窗口移动 不占位置
27. 设置定位的方位值：top: 1px; 远离上面1px
bottom: 1px 远离下面1px
left: 1px 远离左面1px
right: 1px 远离右面1px
28. 溢出隐藏： overflow: hidden;
29. 标签/元素隐藏不占位置 display: none;
30. 让标签/元素隐藏的元素显示出来 display: block;
31. 标签/元素隐藏占位置 visibility: hidden;
32. 标签/元素隐藏占位置 visibility: visible;
33. 文本首行缩进 text-indent: 2em;
34. 透明颜色 transparent
35. 设置背景 属性连写 background: 背景颜色 背景路径 是否平铺 水平偏移值 垂直偏移值；
例如 background: pink url('../images/sprites.png') no-repeat -10px -20px;
注意精灵图移动背景位置 都是负值或0 不可能为正值
除此之外水平偏移值和垂直偏移值还可以用方位坐标值来显示
top 靠顶显示背景图片 bottom 靠底显示背景图片 left 靠左显示背景图片 right 靠右显示背景图片
**！！！一定注意给背景图片的盒子一定要有宽高值！！！没有宽高和内容的盒子是无法显示背景图片的！！！**
36. ul li:nth-child(1){} 选中ul下的第一个li
ul li:first-child{} 选中ul下的第一个li
ul li:last-child{} 选中ul下的最后一个li
ul li:nth-child(2n){} 选中ul下偶数个li 比如第2个 第4个 第6个 li
ul li:nth-child(even){} 选中ul下偶数个li 比如第2个 第4个 第6个 li
ul li:nth-child(2n+1){} 选中ul下奇数个li 比如第1个 第3个 第5个 li
ul li:nth-child(odd){} 选中ul下奇数个li 比如第1个 第3个 第5个 li
ul li:nth-child(n+3){} 选中ul下从第3个开始到最后的li 包括第三个
ul li:nth-child(-n+3){} 选中ul下从开始到第三个的li 包括第三个
37. 行内块元素和行内元素的垂直居中对齐 vertical-align: middle; 同时可以解决img底部3px的问题
38. 设置边框圆角 border-radius: 10px;
39. 创建一个圆形 border-radius: 50%;
40. 创建一个胶囊形状 border-radius: 高度的一半
50. 文字属性连写 font: italic 700 16px/30px "Microsoft Yahei"
font: 字体斜体 粗细 大小/行高 字体家族
其中 字体大小和 字体家族是必写属性，顺序不能够调换位置
51. 子绝父相 子元素绝对定位 父元素相对定位
52. 绝对定位、固定定位、浮动不占位置，脱离标准流
脱离标准流的元素默认宽度高度由内容撑开
默认转换为块级元素
margin: 0 auto;无法使其居中
不会发生外边距塌陷的问题
相对定位占位置
浮动永远不会压住文字
53. 权重 ： 继承 * 通配符选择器 0 < 标签选择器、伪元素选择器 1 < 类选择器、伪类选择器、属性选择器、结构伪类选择器 10 < ID选择器 100 < 行内样式 < 1000 < !important 正无穷
54. 浮动 一般li包裹着a都是让li左浮动 float: left;
右浮动: float: right;
浮动的元素不占位置。无法撑开父元素高度，所以要清除浮动：本质是闭合浮动
常见的清除浮动的方式有4种：
1. 隔墙法：在浮动的元素后面插入一个块级元素，同时设置clear: both;
2. 溢出隐藏法：在浮动元素所在的父元素设置overflow: hidden; 触发BFC 实现清除浮动
3. 单伪元素清除浮动
.clearfix:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/*兼容IE的写法*/
.clearfix{
*zoom:1;
}
4. 双伪元素清除浮动
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
/*兼容IE的写法*/
.clearfix{
*zoom:1;
}
55. 元素的显示与隐藏
1. display: block; display: none; 元素显示隐藏不占位置
2. visibility: visible; visibility: hidden; 元素显示隐藏占位置
3. overflow: hidden; 元素溢出隐藏 可解决清除浮动和外边距塌陷问题 原理是触发了BFC
4. overflow: auto; 根据内容自动添加滚动条
5. overflow: scroll; 添加滚动条
6. opacity: 0; 完全透明占位置 opacity: 1; 完全不透明
56. 过渡：
transition: 过渡的属性 过渡时间(带单位) 速度曲线 过渡延迟时间
transition: width 2s linear 1s; 让宽度 延迟1s后 以linear线性的方式 持续2s的时间过渡
通常写法
transition: 2s;
——————————————————
——————————————————
移动wed
2021.9.11
啊里巴巴矢量图上网官网下载icontfont官网
【首先】嵌入css文件下载完就有了
第一种是嵌入式
叫css文件名加后面的编号
第二的是用伪元素
.box::before {
font-family: iconfont; 字号填文字的文件
content: "\e641"; 内容要近找来复制文件
}
第三种就是连网
记住前面要加http:
应用
————————————————————
位移就像相对位置一样
【】【】行内元素不起效果
transform：translate(100px ,100px) 第一个是x轴 第二轴
浮动居中响应式布局
个父盒子加一个相对定位
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: rotate(360deg); 旋转 正值就是顺时针 负值就是逆时针 单位deg
transform-origin: right; 移动圆心 谁在转就加给谁
他是一个符合属性可以
transform: translate(600px) rotate(360deg); 如果平移更旋转一起，平移放在前面
【要连写】
transform: scale（2，3) 等比例缩放第一个是x第二个y
_________________________________________________________________________________________
渐变色
第一个值是从左往右可以加度数
50deg 第二就是从什么色到什么色渐变
background-image: linear-gradient(to right, pink, green);
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); 加个透明色
————————————————————————————————————
————————————————————————————————————
2021.9.12
移动wed第二天
————————————————————————
空间转换 了解
【注意】要分明是那一个轴转
给父元素设置perspective:（800px） 开视距是看Z轴
transform：ranslateZ(-400px)
transform-style: preserve-3d; 给父元素加就变成3D的效果
transform:rotate3d(1,1,0,45deg) 要加3D才行有效果
——————————————————————————
动画 【】【】【重点】
第一种：
@kwyframes 动画名称{
form{开始
}
to{ 结束 }
}
第二种：
@kwyframes 动画名称{
0%{开始
}
50%{ }
100%{
}
}
引用动画
是一个复合属性
animation: mosd 1s linear infinite alternate forwards; 连写
animation：动画名称 时间 匀速播放 重复次数 动画播放；
linear 匀速播放 ease 默认
infinite 重复次数
alternate 动画播放 交替播放
forwards 执行完毕时状态 forwards不能和infinite结合使用，否则不生效
animation-play-state: paused; 鼠标悬停停止加个hover
steps（加数字就是多少帧） 逐帧动画 建议用这个不要匀速
【注意】动画和动画用起来的时候，分开
background-size: cover； 把背景图片放大到适合元素容器的尺寸,图片比例不变
background-position: -8580px 0; 背景图的位置
————————————————————————————
2021.9.14
移动wed第3天
【】【】【】【】【】【】【】【】【】【】【重点记】
弹性布局 display:flex 给父盒子设置
设置主轴就是水平
justify-content:flex-stalt; 默认值去，起点开始依次排序 向左靠
justify-content:flex-end 终点开始依次排序 向右靠
justify-content: center; 居中挤在一起显示 向中间靠
justify-content: space-around; 左右等分 均分2侧
justify-content: space-between; 空白间距均分在相邻盒子之间
justify-content: space-evenly; 所有距离等分
侧轴
align-items: flex-start; 上部
align-items: center; 中部
align-items: flex-end; 下部
align-items：stretch 默认
align-self：flex-start; 给自己设置
flex: 1; 伸缩比一个固定宽高其他给这个填满
flex-direction: column; 改变主轴方向
align-items: center; 单行换行
flex-warp:warp; 多行换行
align-content：space-evenly; 调整行对齐方式 属性值跟justify-content：的属性一样
————————————————————————————————
2021.9.16
移动端设配视口
em 就是参考body的文字单位
rem root根的意识 rem是根据html设置的字体大小来算
@media(width:375px) { 适配视口的宽度 就是手机适配要加单位
html {
font-size: 37.5px; 适配视口 文字大小是宽度的1/10 10分之一
}
}
pc端
或者（min-width：600px）and (max-1200px) 600到1200的就适配
@media(min-width:1200px) {
.box {
background-color: black;
}
}
——————————————————————
用less新建文件 保存会生成css
在less里面运算 中间要又空客分开 css显示
width：50 + 50px； 100px
100 - 50px； 50px
100 * 2px 200px
（100 / 2px） 50px
——————————————————————
less定义主题色
@开头名字自己起 用的时候调用他就可以
@fontColor: pink;
@fontsize：37.5rem； 也可以设配文字大小
导入文件
@import “文件路径”； 注意是less文件不是css
less文件第一行写
"out":"../css/" 导出less
//out:ture; 可以上传
//out:falst; 禁止导出
//compress:ture 压缩上传
2021.9.18
1 vw = 1/100 的视口宽度
1 vh = 1/100 的视口高度
vw viewport width
vh viewport hight 都是单位
————————————————————
2021.9.19
第七天
响应式 【】【】【】【用于响应式布局缩小时候变小的盒子设置尺寸的】
媒体查询 就是给他一个最下下限和最大上线 范围值来约束
/* 视口宽度大于等于768px 小于等于991px， 网页背景色是天蓝色 #6cf */
@media (min-width:768px) and (max-width:991px) {
body {
background-color: blue;
}
}
css引入
隐藏
/* 当视口的宽度小于768px时（就表示视口已经是移动端），隐藏left盒子 */
@media (max-width:768px) {
.left {
display: none;
}
}
——————————————————————————
bootstrap 网页copy下来代码改
引入bootstrap文件
最小屏幕 <768px 小屏幕 >=768 中等屏幕>=992 大屏幕1170
3 12 / 4
col-sx-占几分(12/要显示个数) col-sm- col-md- col-lg-
——————————————————————————————————
object-fit: cover; 完美图片弹性缩放【】【】
引入网站图标
————————————————————————————————————————
js 基础第一天
2021.9.22
五大类型
number 数字类型
string 字符串
Boolean 布尔类型 ture false
undefined undefined 类型
nall 空
object object （对象）
typeof 用来判断类型
parseInt 转换成整数
parseFloat 转换成小数
转换数字类型
Number（属性名）
alert(Number(ast) + Number(asa)) 输出以数字类型输出
alert(+ast + +asa) 也可以加+号来代替Number
string字符串类型
String（属性名）
alert(String(ast) + (String(asa))
——————————————————————————————
弹出输入框
let age = prompt("请输入你的年龄") 用于用户输入
变量：
let age = 18
let age = 18, nuame = "pink" ，temp 多个变量连写，号分开。就是同时声明两个变量
最后一个是空变量 用于容器
遵守小驼峰命名法
比如 ：
userName 后面的首字母要大写
————————————————————————
数组：Array
有下标冲0开始数
let 数组名 = [ "123","小明","456","789","小红" ] ，号分开
0 1 2 3 4
console.write(数组名[0]) 调用
————————————————————————
字符串类型（string）：
用的比较多的就是【模板字符串】
document.write(`里面直接可以放文字 ${变量名}`) ${}里面是加变量名
document.write(`大家好，我叫${name}，今年${age}岁`) 要用``包裹
————————————————————————
判断什么类型typeof
console.log（typeof 变量名）
————————————————————————————
类型型转换
隐形转换就是
documen.write（"123" + 11） 系统会自己跟第一个值的类型相加 不建议用
显式转换
数字number
Number（数据） 或者 +数据 在值前面加一个+就变数字类型
parseInt（数据） 转为整数
parseFloat（数据） 转为小数
字符串转换
String(数据) 或者 变量.toString(进制)
——————————————————————————
js基础 第二天
2021.9.23
算数运算符
+
-
*
/ infinity 无穷
%
% 取余
5%3 =2.5 0.5*2 = 1 所以取余1
2%5 =0.4 如果后面比前面大他的余数就是前面 就是2
——————————————————————————
赋值运算
+=
-=
*=
/=
%=
num1 += 1
num1 = num1 + 1 就是 变量=变量 + 右边结果
mun2=1
num2 += 1-1 mun2 = mun2+ (1-1)
——————————————————
【】【自操作：是唯一一种会自动改变变量自身数据类型】
++gae gae++ 是一样的结果的
独立就没区别 就是独占一行就是没区别
——————————————————————
比较运算符
> <
>= <=
！= 不等
== 左右两边相等
=== 严格的相等要同以类型
！== 不全等
数字类型就比大小number
字符串比较 是ASCII码比较
undefined 没复值
NaN 不能比较 所得结果一定是false
——————————————————
逻辑运算符
&& 逻辑与 且 一假则假
|| 逻辑或 或者 一真则真
！ 逻辑非 取反 相反
——————————————————
【】【】【【】【】【】【重点】
逻辑运算符的短路
短路条件
&& 左边为false就短路 左边为假，右面不执行
|| 左边为true就短路 左边为真，右面不执行
代码：
左边为假，右面不执行
3>5 && console.log("内容") 第一个就是false后面就不执行
左边为真，右面不执行
5>3 || console.log("内容") 第一个是ture后面就不执行
拓展：逻辑与&&的结果未必是布尔结果（除非两边本身都是布尔）
console.log（10 && 20） //20
数字转布尔：只有0是false，其他都是true
——————————————————————————————
if语句
let fs = +prompt("请输入你的成绩") 多条件分支
let str = ""
if (fs >= 90 && fs <= 100) {
str = (`奖励法拉利`)
} else if (fs >= 80 && fs <= 89) {
str = (`奖励迪迦`)
} else if (fs >= 60 && fs <= 79) {
str = (`奖励奥迪`)
} else {
str = (`打一顿`)
}
document.write(str)
——————————————————————————
2021.9.24
js第三天
三元运算
三元: 是一种简化操作, 简化if双分支
可以利用三元运算, 简化操作
语法: 条件 ? 结果1 : 结果2
语法: 条件表达式 ? 结果表达式1 : 结果表达式2 //前面大就输出第一个否则第二个
switch语句 严格的要【】【全等】===
switch (数据) {
case 值1:
alere（） 输出语句
break; 要有结束代码不让不会结束
case 值2:
alere（） 输出语句
break;
default:
alere()
break;
}
_______________________________________________________________
循环
while（循环条件）{
}
// 循环控制: continue和break
// 说出: continue和break的区别
【注意只翻到循环里面有用】
continue 下面不是不执行 就是跳出循环 重新开始循环
break 只循环一次
数组遍历【】【】【重点】
for（let i = 0； i< 数组名.length；i++）{}
访问数组必须要有 数组名【第几个下标】
【】【数组找最大值】
求极值：
求数组的最大值和最小值
数组的擂台思想
let num = [88, 77, 20, 66, 499]
let max = num[0]
for (let i = 0; i < num.length; i++) {
i是下标 num【i】才是上面数组里的数
if (max < num[i]) {
max = num[i]
}
} document.write(max)
______________________________________________________________________________________
2021.9.26
第三天
增删改查 CURD C：create新增 R：read/Retrive 查看 u:update 改 D：Delete删除
增加
arr.push(元素1 元素2 ...... n) 在当前的数组新增 加到尾端
arr.push(arr1[i]) 数组新增
arr.unshift(新增的内容) 加到头部
删除
数组. pop() 不带参数 数组中删除最后一个元素，并返回该元素的值
数组. shift() 不带参数 数组中删除第一个元素，并返回该元素的值
起开始下标，几个
数组.splice （1，1） 选择删除 arr.length -1 最好一个
arr.length -1，1
函数
can 能不能
set 设置某值
【形参】 可以多个, 用逗号分隔
变量
function 名字（num1,num2）{
//这里建议后台输出一下复了值的实参
函数体
return 数据 // return的格式加空格【注意】翻回的是函数调用处
}
【实参】这里调用形参
名字（10，20） 赋值给上面
这里面可以是数组[12,45,45,45]形参就给一个数组明
——————————————————————————————————
【】【调用reture】
reture调用
let 变量 = 函数(), 将返回值保存到变量中 定义一个变量给他
document.write(变量名)
2021.9.27
js基础第4天
Infinity +无穷大
// 需求: 创建一个函数, 可以求任意数组元素中的最小值
/*
初学者函数的制作步骤
1. 不用函数, 所有内容写死实现
2. 将实现的功能, 用函数实现: 套一个函数, 调用函数验证功能实现
3. 用参数代替写死的数据: 数组, 形参和实参
4. 用返回值代替输出(不要有任何输出): 未必一定需要(但是但凡涉及到获取这种动作,一定有返回值)
*/
作用域： 【】【】【就近原则】
全局作用域(Script, 以前叫Global): 这里定义的变量叫全局变量: 特点是: 哪里都能用(公共的)
到处可用: 到处可改(危险: 因此全局变量使用较少)
局部作用域(Local): 函数内部区域, 函数内部定义的变量叫局部变量: 特点是: 只能当前函数内部使用
形参: 属于局部变量, 只能在函数内部使用
块级作用域(Block): {}以内
——————————————————————————————
匿名函数 隐藏名字的意思
匿名函数: 函数表达式
let fn = function (){
}
函数没有名字, 将函数的声明赋值给变量保存
不要给匿名函数加名字: 没有存在的意义(外部不能通过函数名调用)
立即执行函数 解决污染问题 【沙箱】
语法：
(function(){})()
(function(){}) 表示定义一个函数(匿名)
() 表示调用前面的函数
对象（object） 数据类型：能很好的描述数据 【】【重点】
格式
对象: 成员叫属性和方法
属性: 属性名 : 属性值 // 本质 变量 = 值
方法: 方法名 : 匿名函数 // 本质 变量 = 函数
允许多个属性和方法存在, 用逗号分隔
let goods = {
// 属性：不定数量，不限定数据类型
name: "小米手机",
num: "商品编号100012816024", 后面的记住要加，好
weight: "0.55kg",
address: "中国大陆"
//方法
hide: function () {
console.log("在大陆买手机");
}
}
推荐语法: .语法, 对象专属语法 . 输出对象
扩展语法: []语法, 与数组一样 数组[数字下标] 对象['名字']
改对象里面的参数
let goos = {
name: "男"
}
console.log(goos);
// 1. 新增: 对象.新属性名 = 值 || 对象['新属性名'] = 值
goos.age = "18"
console.log(goos);
// 2. 修改: 对象.属性名 = 值 || 对象['属性名'] = 值
goos.age = "女"
console.log(goos);
// 3. 删除: delete 对象.属性名 || delete 对象['属性名']
delete goos.price
console.log(goos);
// delete是对象的专属 语法
【数组的遍历】 for（let k 对象名）{} 【数组也可以这样遍历】
对象很少遍历: 对象本身就是一种方便访问的语法
未来项目级开发, 配置文件大多数是对象: 肯定要用到遍历
let hero = { name: "小明", age: 18, gebder: "女", skill: "烧光" }
for (let k in hero) {
console.log(k)
document.write(hero[k]) 【注意】调用要对象名[k]
}
// for(let 变量名 in 对象){ 变量名拿到的是属性名, 对象[变量名] 访问值}
时分秒转换 转换成时分秒 数学逻辑
function fn(miao) {
// 转换成时分秒
// 转时: parseInt(秒数 / 3600)
let zs = parseInt(miao / 3600)
// 转分: parseInt(秒数 / 60) % 60
let zf = parseInt((miao / 60) % 60)
// 转秒: 秒数 % 60
let zm = miao % 60
// 补0
zs = zs < 10 ? "0" + zs : zs
zf = zf < 10 ? "0" + zf : zf
zm = zm < 10 ? "0" + zm : zm
document.write(`你输入的${miao};转成${zs}小时 转成${zf}分 转成${zm}秒`)
}