浏览器内核
- trident（三叉戟）：IE浏览器 360安全浏览器 搜狗高速浏览器 百度浏览器 UC浏览器
- Gecko(壁虎)：firefox(火狐)
- Presto(急板乐曲) → Blink(眨眼)：Opera
- Webkit: Sarfari 360急速浏览器 搜狗极速浏览器 移动端浏览器(IOS Andorid)
- Webkit: Blink: Chrome Edge
html与css
html结构
<!-- 文档声明:告知浏览器该文件是html5版本 -->
<!DOCTYPE html>
<html lang="en">
<!-- 配置信息都存放在head元素中 -->
<head>
<!-- head中存放元数据 metadata -->
<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>Document</title>
</style>
</head>
<body>
<!-- 展示给用户的内容 -->
<div class="box">
<ul>
<!-- alt+shift+向上或者向下方向键 -->
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Html标签
- html:超文本标记语言，不同于纯文本的是他可以播放视频，音频
外部css缺点
- 会增加请求数量，耗时网络操作！
border属性
/* dotted 虚线圆点 */
/* border-style: dotted; */
/* dashed:虚线方框 */
/* border-style: dashed; */
/* double:双实线 */
border-style: double;
border-color/width/style/*可以写多个值，每个值所对应的具体位置和margin和padding对应的都一样*/
开发小技巧
- 当相邻的元素边框颜色不一样，边框之间会出现斜角，解决办法让其中一个元素嵌套父控件，让父控件的元素边框颜色与另一个元素边框颜色相同即可
像素
- 就是屏幕当中的放光二极管！
边框三角
/*所有边框相交的地方都是斜线。我们利用这个特性可以画三角形*/
.sj{
width: 0px;
height: 0px;
border: 100px solid #ccc;
border-color:transparent transparent yellow;
margin: 0 auto;
}
圆角
by{
width: 100px;
height: 200px;
background-color: pink;
/* 分别代表x轴 y轴 */
border-radius: 50px/40px;
/* 代表不同的四个角分别为： 左上 右上和左下 右下 */
border-radius: 30px 20px 40px;
}
半圆
box{
width: 200px;
height: 100px;
background-color: pink;
border-radius: 100px 100px 0 0;
}
扇形
.sx{
width: 0px;
height: 0px;
margin: 100px auto;
border-top: 150px solid pink;
border-left: 150px solid blue;
border-bottom: 150px solid yellow;
border-right: 150px solid red;
border-radius: 150px;
border-bottom-color:transparent;
border-left-color: transparent;
border-right-color: transparent;
}
浏览器支持css样式情况
background属性
相对路径
- 指定的盘符或者电脑文件，取决于参照物的标准，才能够找到指定目录或者路径
绝对路径
- 在任意盘符或者电脑中都可以找到目标文件，不需要参照物作为标准
属性介绍
.box{
width: 200px;
height: 200px;
border:1px solid #999;
margin: 100px auto;
/* 盒子的宽度和高度的百分比进行缩放 */
/* background-size:50% 40% */
background: url(images/wy_07.jpg) no-repeat left center/100% 50%;
/* 可以控制背景图片相对于浏览器固定在指定位置 */
background-attachment: fixed;
/* position关键字后面可以跟具体数值！ */
/* background-position: left 20px top 40px; */
}
css3中background新增样式
- 背景图片是在边框以里开始显示的
<style>
.container{
width: 300px;
height: 300px;
border: 30px dotted greenyellow;
padding: 10px;
margin: 0 auto;
/* background-color: pink; */
background: pink url(images/bg.jpg) no-repeat;
/* clip:可以裁剪背景颜色 origin不可以 */
/* background-clip: padding-box; */
/*是改变图片平铺的位置*/
background-origin: padding-box;
}
</style>
字体复合样式
/* font-family必须放到最后 */
font: normal 20px/100px "宋体";
/* 最后一行文字排列样式 */
text-align-last: justify;
文字属性
- 注意：一个空格所占的像素大约是设置字体大小的一半
font:400 italic 18px/20px '宋体';
letter-spacing: 10px;
/* 强制换行 */
/* word-break: break-all; */
/* 文字省略号 */
white-space: nowrap; //强制不换行多用在中文身上
overflow: hidden;
text-overflow: ellipsis;
- 显示多行省略号
/* 显示多行 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 控制行数 */
-webkit-line-clamp: 2;
/* 控制方向 */
-webkit-box-orient: vertical;
iconfont
- 首先去阿里矢量图标库下载所需的资源引入项目中
- 资源文件注意要与font.css在同一目录下
- 在所需要的html文本中引入iconfont.css即可
代码如下
<--引入的css样式-->
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/base.css">
<==自定义样式==>
.item::before{
position: absolute;
left: 39px;
top: 36px;
font: normal 32px/36px "iconfont";
color: #26b9ff;
content: "\e6e7";
}
可视宽度
- border+content+padding
占位宽度
- margin+content+padding+border
盒子阴影
.box{
width: 200px;
height: 200px;
margin:100px auto;
background-color: pink;
/* 水平坐标 垂直坐标 模糊距离 扩散半径 */
box-shadow: 10px 10px 5px 2px #333;
}
/* 第一个值：x轴的偏移量 第二个值y轴偏移量 第三个值:模糊半径 第四个值:扩散半径（一般是0） 第五个值:阴影颜色 */
/* 默认阴影在外面，inset代表在里面 多个阴影逗号隔开 */
box-shadow: inset 4px 4px 3px 0px #ccc;
怪异盒模型
- 当padding+border>盒子的width时，盒子的可视宽度取决于前者
不常用标签
<!-- 下标 -->
2<sub>3</sub>
<!-- 上标 -->
2<sup>3</sup>
****2的几次方
时间标签
每天<time>9:00</time>就去上班
标记标签
今天下班，<mark>6:00准时吃饭</mark>
列表样式
ul{
list-style-type: square;
list-style-position: outside;
list-style-image: url(img);
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- type有序列表样式，start从几开始 -->
<ol type="I" start="3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
文字左右间距处理
letterspacing:8px
a标签功能
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com" target="_self">京东</a>
<a href="http://www.tianmao.com">天猫</a>
<!-- 打电话 -->
<a href="tel:18804643956">打电话</a>
<!-- 下载 -->
<a href="images/bg.7z">下载</a>
<!-- 发邮件 -->
<a href="mailto:657687600@qq.com">发邮件</a>
内联元素
- 在代码换行时，一定会产生空格,要想去除空格，必须给其父控件设置font-size：0
vertical-align
.box{
width: 200px;
height:calc(100px + 100px);
background-color: pink;
margin: 100px auto;
text-align: center;
font-size: 0;
}
/* vertical-align: 他是让同一父控件中俩个子元素相对垂直居中 */
.left{
display: inline-block;
width: 0px;
height: 200px;
background-color: #fff;
vertical-align: middle;
}
.right{
display: inline-block;
width: 50px;
height: 50px;
background-color: #333;
vertical-align: middle;
}
<div class="box">
<a href="#" class="left"></a>
<a href="#" class="right"></a>
</div>
通过table-cell来使子控件水平左右居中
.box{
display: table-cell;
width: 200px;
height:calc(100px + 100px);
background-color: pink;
vertical-align: middle;
}
.right{
display: block;
width: 50px;
height: 50px;
background-color: #333;
margin: 0 auto;
}
浮动理论
- 浮动部分脱离文档流，与文字所属同一层级
文档流
- 通俗的理解就是元素所在文档中代码的位置！
渲染规则
- bfc:块级格式化上下文，所有元素都是按照文档流的方式进行排列
清除浮动
.clearfix{
/* 兼容ie6 触发haslayout(ie中的bfc) */
*zoom: 1;
}
.clearfix::after{
display: block;
/* 兼容ie6 等低版本的浏览器*/
/* display: table; */
height: 0;
content: ' ';
visibility: hidden;
clear: both;
}
table样式
table {
width: 500px;
border-spacing: 0;
border-collapse: collapse;
text-align: center;
margin: 100px auto;
}
td,th {
border: 1px solid #333;
}
tr {
height: 30px;
}
布局篇
- 带有边框的列表在父控件的对齐排列
/*边框重叠-1px*/
/* 版心 */
.w {
width: 1100px;
margin: 100px auto;
}
.clearfix::after{
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.item {
float: left;
width: 221px;
height: 168px;
background-color: #fff;
border: 1px solid #666;
cursor: pointer;
box-sizing: border-box;
margin-right: -1px;
}
img {
vertical-align: middle;
position: relative;
top: 50%;
left: 50%;
translate:-50% -50%;
}
.container {
background-color: #666;
height: 800px;
}
.item:nth-child(1){
width: 220px;
}
- 布局如下
<div class="box clearfix">
<div class="item">
<img src="./images/1c2gohbio65_300_300.jpg" alt="">
</div>
<div class="item">
<img src="./images/1cnij2nrr52_300_300.jpg" alt="">
</div>
<div class="item">
<img src="./images/ii02po4970_300_300.jpg" alt="">
</div>
<div class="item">
<img src="./images/ii02shtz66_300_300.jpg" alt="">
</div>
<div class="item">
<img src="./images/ir1s6rzz67_300_300.jpg" alt="">
</div>
</div>
- 通过增加父控件的负值来增大中间父元素的占位空间,从而让子元素,能最大程度排列
/* 版心 */
.w {
width: 1190px;
margin: 0 auto;
}
.container {
background-color: #fff;
}
.container li.item{
float: left;
width: 230px;
height: 322px;
background-color: pink;
margin: 0 5px 10px;
}
.clearfix::after{
content: " ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.warpper{
margin: 0 -5px;
}
- 布局如下
<div class="container w">
<ul class="warpper clearfix">
<li class="item">
</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
</ul>
</div>
文字和图片的垂直居中
.father {
display: table-cell;
/* 如果子元素是块元素 我们直接就加 vertical-align: middle;*/
vertical-align: middle;
}
.son{
/* 如果子元素是行内元素是我们需要给子元素添加 vertical-align: middle; */
vertical-align: middle;
}
//vertical-align:对块元素无效，只对行内元素和行内块元素有效
毗邻选择器
<style>
input{
display: none;
outline: none;
}
span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #666;
}
input:checked ~ span {
background-color:pink;
}
</style>
</head>
<body>
<label>
<input type="checkbox" name="sex" id="man">
<span></span>
</label>
</body>
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变进阶</title>
<style>
.box {
width: 400px;
height: 200px;
margin: 100px;
/* 20% 从相对于父容器的20%开始渐变，到相对于父容器的40%结束(百分比的单位也可以换成像素) */
/* background: linear-gradient(to right top,pink 0%,grey 40%); */
/* 颜色有重合的区域，不会发生渐变 */
/* background: linear-gradient(to right, pink 30%,grey 10%); */
/* 如果按照角度进行线性渐变，正角度按照顺时针方向，负角度按照逆时针方向 */
/* background: linear-gradient(45deg,pink,grey); */
/* 分别设置渐变颜色的宽度，重合临界点就不会发生渐变 */
background: repeating-linear-gradient(pink 0px, pink 40px ,grey 40px,grey 80px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
方虚线案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方虚线</title>
<style>
/* 方法一 */
/* 通过背景覆盖，前面的背景渐变会覆盖后面的背景渐变 */
/* .box{
width: 400px;
height: 200px;
margin: 0 auto;
background: linear-gradient(white 190px,transparent 190px), repeating-linear-gradient(
to right,
black 0px,
black 10px,
transparent 10px,
transparent 20px
);
} */
/* 方法二直接修改盒子的高度 */
.box{
width: 400px;
height: 10px;
margin: 0 auto;
background: repeating-linear-gradient(
to right,
black 0px,
black 10px,
transparent 10px,
transparent 20px
);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
信封线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信封线</title>
<style>
.letter {
width: 400px;
height: 600px;
margin: 100px auto;
border: 5px solid transparent;
/* padding-box 解析的话，背景白色只覆盖内容和padding区域，不包括边框 */
background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(
-45deg,
blue 0px,
blue 10px,
transparent 10px,
transparent 20px,
red 20px,
red 30px,
transparent 30px,
transparent 40px
);
}
</style>
</head>
<body>
<div class="letter"></div>
</body>
</html>
径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>径向渐变</title>
<style>
.box{
width: 600px;
height: 400px;
margin: 100px auto;
/*默认俩种颜色平均分配 */
/* background: radial-gradient(purple,pink); */
/* 从中心点到 水平半径为20像素的开始渐变，垂直半径会根据计算得来，默认渐变形状为椭圆 */
/* background: radial-gradient(purple 0px,pink 20px); */
/* 当开始颜色大于或等于渐变颜色的时候，不会发生渐变，最后的颜色会填满容器的剩余部分 */
/* background: radial-gradient(purple 100px,pink 20px); */
/* 可以设置渐变形状为圆 */
/* background: radial-gradient(circle,purple 20px,pink 20px); */
/* 可以设置水平半径,垂直半径 当设置的初始颜色半径大于水平半径，设置的水平半径不生效*/
background: radial-gradient(200px 100px,purple 300px,pink 400px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
datalist(不常用)
<input type="text" list="dl">
<!-- datalist -->
<datalist id="dl">
<option >周杰伦</option>
<option >刘德华</option>
<option >王思聪</option>
</datalist>
属性选择器
<style>
/* input[type=text] {
background-color: pink;
} */
/* input[class^='r']{
background-color: yellow;
} */
/* */
/* ~:属性必须是其中一个单词,不包含字母 */
/* input[name~=uname] {
background-color: skyblue;
}
*/
/* 属性以pwd结尾 */
/*input[class$=pwd] {
background-color: slateblue;
} */
/* |属性是data或者以data-开头 如果是类的话，只能有一个类，多个类名不生效 */
input[class|=data] {
background-color: tomato;
}
</style>
</head>
border-image
.box{
width: 200px;
height: 200px;
margin: 100px auto;
/* 边框突变的适用前提,边框有宽度 样式不为none */
border: 20px solid;
border-image-source:url(images/border2.png);
/* 变宽图片是否重估 stretch默认拉伸 repeat:默认平铺但不会填满 round会铺满*/
border-image-repeat: stretch repeat round;
/* 裁切方式 */
border-image-slice:20% ;
/*符合样式 20代表20px */
border-image: url(images/border2.png) 20 repeat;
/* 边框向外扩散(变大)10px */
border-image-outset: 10px;
}
案例练习
.box{
width: 400px;
height: 200px;
margin: 100px auto;
border-top: 16px solid;
border-bottom: 16px solid;
/* y轴不变x轴平铺 注意平铺的时候控制相同方向的边框，不能四个边框全部写上这样不起效果*/
border-image: url(images/border_03.jpg) 16 0 round;
/* background: pink padding-box; */
/* 默认裁切会给上下左右四个方向的标准线进行裁切类似于九宫格 */
/* border-image-slice: 20; */
/* repeat round strech */
/* border-image-repeat: repeat; */
/* border-image-width:20px; */
/* border-image-outset: 10px; */
}
</style>
</head>
<body>
<img src="images/border2.png" alt="">
<div class="box"></div>
</body>
</html>
文字排版
.box {
direction: rtl;
/* 对文字按照从右到左进行解析 */
unicode-bidi: bidi-override;
}
span {
/* 里面的文字还是按照从左到右 */
unicode-bidi: embed;
}
<div>今天天气不错，心情也不错！</div>
<div class="box">
今天天气<span>不错，心情</span>也不错！
</div>
过渡
box {
width: 300px;
height: 200px;
background-color: #666;
margin: 100px auto;
/* 过渡所持续的时间 */
transition-duration: 1s;
/* 过渡属性：要改变的属性 */
transition-property:height,width;
/* 过渡延时时间 */
/* transition-delay: 1s; */
/* 执行动画的速度曲线 :默认情况下先慢然后快最后慢*/
/* transition-timing-function: ; */
}
案例
.container {
position: relative;
width: 400px;
height: 200px;
border: 2px solid #00f;
margin: 0 auto;
}
.icon {
height: 50px;
width: 50px;
background-color: #333;
position: absolute;
left: 0;
top: 0;
transition: top 3s ,left 4s;
/* 匀速 */
transition-timing-function: cubic-bezier(.51,.07,.74,.94);
}
/* 注意不能给icon加上hover,因为在他在移动的时候hover会失效 */
.container:hover .icon {
left: 350px;
top: 150px
}
transform
.box{
width: 400px;
height: 400px;
background-color: pink;
margin: 100px auto;
transition: 1s linear;
}
.box:hover{
/* skew(deg):倾斜会拉伸元素形状 */
/* transform: skew(30deg) scale(.5) translateX(10px); */
transform: translate(100px);
}
动画
<style>
.box {
width: 300px;
height: 100px;
background-color: pink;
animation: width-animation 3s alternate forwards ease-in-out;
/* 动画名称 */
/* animation-name: name;*/
/* 动画运动曲线 */
/* animation-timing-function: ease-in; */
/* 动画持续时间 */
/* animation-duration: 0s; */
/* 动画延时时间 */
/* animation-delay: 1s; */
/* 规定动画在完成之前或者之后的停留状态 */
/* animation-fill-mode:forwards ; */
/* 动画在进行时，可以暂停动画 */
/* animation-play-state: paused; */
}
@keyframes width-animation {
0% {
width: 200px;
}
25% {
width: 350px;
}
50% {
width: 400px;
}
75% {
width: 450px;
}
100% {
width: 500px;
}
}
.box:hover {
animation-play-state: paused;
}
</style>
3d动画
.box{
width: 400px;
height: 400px;
border: 1px solid #999;
margin: 100px auto;
/* 呈现3d 必须要保证屏幕与元素有一定的视觉距离:也可以称作井深 */
perspective: 500px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 200px;
width: 200px;
margin: 100px auto;
/* background-color: pink; */
position: relative;
/* 如果让子元素有3d效果必须加这个属性 */
transform-style: preserve-3d;
transition: 2s linear;
transform: rotateY(30deg);
}
ul li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font: bolder 30px/200px "微软雅黑";
text-align: center;
color: #333;
opacity: .5;
}
li:nth-child(1){
background-color: pink;
/* 先旋转再平移，不然先平移的话会改变中心点的坐标 */
transform: translateX(100px) rotateY(90deg);
}
li:nth-child(2){
background-color: green;
transform: translateY(-100px) rotateX(90deg);
}
li:nth-child(3){
background-color: yellow;
transform: translateZ(-100px);
}
li:nth-child(4){
background-color: skyblue;
transform: translateZ(100px);
}
li:nth-child(5){
background-color: darkgray;
transform: translateX(-100px) rotateY(-90deg);;
}
li:nth-child(6){
background-color: peru;
transform: translateY(100px) rotateX(-90deg);
}
ul:hover {
transform: rotateX(180deg) rotateY(360deg);
}
<div class="box">
<ul class="sqart">
<li>右面</li>
<li>上面</li>
<li>后面</li>
<li>前面</li>
<li>左面</li>
<li>下面</li>
</ul>
</div>
Less
- 要下载easyless插件重启VSCODE
定义变量
@w:200px;
@url:'../images';
less书写（嵌套）
body {
margin: 0;
.box {
width: @w;
height: 200px;
background-color: pink;
background-image: url('@{url}/logo.png');
background-repeat: no-repeat;
margin: 100px auto;
transition: 2s;
// &_加命名，减少过多的嵌套
&_content{
width: 300px;
}
&:hover {
width: 300px;
}
// &_fonts {
// display: inline-block;
// font: 20px/200px '微软雅黑';
// color: #fff;
// text-align: center;
// height: 100%;
// width: 100%;
// }
提供默认值
.btn(@color:#fff,@bgcolor:skyblue) {
height: 20px;
width: 200px;
border-radius: 5px;
text-align: center;
font: 18px/20px '微软雅黑';
// 带参数的混合
color: @color;
background-color:@bgcolor;
}
参数传递
// less的混合写法(无参数混合)
.regist{
// 当多个参数传递，只想改变其中某一个参数，我们直接指定即可
.btn(@bgcolor:red);
}
// 当多个参数在同一条属性上时，我们可以用arguments来缩写代替
.border(@border-width:5px,@style:solid,@border-color:#000){
border:@arguments;
}
支持math运算
//加减乘除都可以
width: ceil(200.9)px;
继承
.icon {
width: 200px;
height: 200px;
}
//不能使用参数
.text:extend(.icon) {
background-color: pink;
}
条件判断
when and
.top(@w) when(@w>0) and (@w<100){
width: @w;
}
.common {
.top(200px);
}
when not
.top(@w) when not (@w=100){
width: @w;
}
when ,(或)
.top(@w) when(@w>10) ,(@w<11){
}
循环
.loop(@n) when(@n>0){
.loop(@n - 1);
.box@{n}{
width: @n*1px;
}
}
.loop(10);
符合样式更改(合并)
// 当你引入的样式中，存在以下的复合样式，我们可以进行如下的添加修改
// 如果对顺序有要求的话，不可以使用，他只会把添加样式加到后面
.fonts {
font+_: 16px/32px "微软雅黑";
}
.imp{
.fonts;
font+_:"bolder";
}
样式（追加）
// 样式追加
.box{
box-shadow+:2px 3px 3px #ccc ;
}
.box_imp{
.box;
box-shadow+:3px 2px 5px #333 ;
}
映射
// 映射
@color: {
red :#348990;
}
.imp{
background-color: @color[red];
}
引入外部样式
@import url(clock.less);
避免变异
.font {
font: (12/6rem)~'/'(30/12rem);
}
Sass
- 用Vscode下载 live sass compiler
变量
$w:25px;
.box {
width: $w;
height: 90px;
}
混合
// 创建混合
@mixin base() {
position: absolute;
left: 0;
top:0;
right: 0;
bottom: 0;
margin: auto;
}
// 使用混合
.container {
@include base();
}
if条件判断
.box {
width: $w;
@if 1 + 2 == 3{
background-color: pink;
}
}
for循环
// to 小于 6
@for $num from 1 to 6{
li:nth-child(#{$num}) {
width: $num * 1px;
}
}
// through 小于等于
@for $num from 1 through 5 {
li:nth-child(#{$num}) {
height: $num * 1px;
}
}
each循环
@each $var in 1,2,3,4,5 {
// #代表在字符串中解析变量
.name#{$var}{
width: $var * 1px;
}
}
while循环
$num:0;
@while $num<10 {
$num:$num+1;
.box#{$num}{
width: $num*1px;
}
}
函数
// 函数定义
@function add($a,$b){
@return $a + $b;
}
// 使用函数
.imp {
width: add(1,3) * 1px;
}
模块的概念
//当以“_”开头命名.css的文件，不会被编译，可以把其当成模块，让其他文件使用
Gird布局
尝鲜
.box {
width: 500px;
height: 300px;
/* border: 1px solid #333; */
margin: 100px auto;
/* <!-- gird布局类似于表格，他把传统的一维布局发展到2维布局，并引入了行和列的概念 --> */
display: grid;
grid-template-rows: 300px;
/* 1fr:代表把空间分配所占父元素的1份 */
grid-template-columns: repeat(5,1fr);
}
.item {
border: 1px solid pink;
}
常见分配子元素模式
auto-fill
/* auto-fill:填满父元素*/
grid-template-columns: repeat(auto-fill,100px);
单元格的合并
/* 根据行和列坐标来移动格子，多出来的跟表格一样可以删除 */
.item:nth-child(1){
grid-row: 1 / 4;
}
.item:nth-child(10){
grid-column: 2 / 5;
}
单元格的移动
/* 可以移动单元 */
.item:nth-child(3){
grid-column-start: 3;
grid-row-start: 3;
}
/*父元素定义模板*/
grid-template-areas: 'l l 2 3'
'l l v k'
'l l m n';
/*子元素起名字*/
.item:nth-child(1){
grid-area: l;
}
单个元素居中
.box{
width: 800px;
height: 400px;
border: 1px solid #444;
margin: 100px auto;
display: grid;
/* -items针对单个元素，针对多个元素用 -content */
justify-items: center;
align-items: center;
}
.item{
width: 100px;
height: 200px;
background-color: pink;
}
多个元素居中
/*父元素设置*/
.box{
width: 800px;
height: 400px;
border: 1px solid #444;
margin: 100px auto;
display: grid;
grid-template-rows: repeat(1,200px);
grid-template-columns: repeat(4,100px);
/* -items针对单个元素，针对多个元素用 -content */
/* justify-items: center;
align-items: center; */
justify-content: center;
align-content: center;
/* 子元素之间的间隔设置 */
grid-gap: 30px;
/* 元素的排列方式 */
grid-auto-flow: column;
}
bootstrap
cdn
- 分布式服务器集群，在对应的ip城市搭建服务器供其访问
栅格系统
- 以flex布局为基础，兼容性好，以二维布局引入行和列的概念，每行分为了12
JavaScript
选项卡案例
- 了解布局解构；
- 给所有的a标签添加点击事件；
- 添加css点击的样式；
- 添加点击样式之前我们要把其余的点击样式，利用for循环删除掉；
- 对于展示内容区域，我们可以利用暂时存储索引的办法，在a添加点击事件之前，我们通过属性title,进行存储。
- 在点击a标签时，让其对应的索引内容区域进行显示
- 在内容显示之前我们要其余内容区域对应的显示样式删除掉
代码实现
// 原则 - js之前 先确保布局是合理的。 一个合理的布局 可以帮助你减少很多js的bug
var tabs = document.querySelectorAll("#nav a");
var items = document.querySelectorAll(".boards div");
for(var i = 0; i<tabs.length;i++){
// 存储索引下标
tabs[i].index=i;
tabs[i].addEventListener("click",function(){
for(var j = 0; j<tabs.length;j++){
tabs[j].classList.remove("active");
items[j].classList.remove("active");
}
this.classList.add("active");
items[this.index].classList.add("active");
});
}
- 自定义index属性是在浏览器的页面结构中不可见的
图片拼图
思路
- 首先通过行和列的概念来确定每个小图片的位置；
- 行的定义：由于图片是10行10列的，总共一百个图片，需要用for循环来生成多个图片，通过变量i/10取商；来确定行数；
- 列的定义：i%10取余，来确定列的概念
- 对于背景图片定义精灵图原理，图片大小就是每个小方框的大小
代码实现
var wrap = document.querySelector(".wrap");
var row = 0;
var col = 0;
for(var i = 0; i<100;i++){
row = parseInt(i/10);
col = parseInt(i%10);
wrap.innerHTML += `<div style="left:${col*60}px;top:${row*60}px;background-position:${-50*col}px ${-50*row}px;"></div>`;
}
var items=document.querySelectorAll(".wrap div");
for(var i = 0; i<items.length;i++){
// 监听鼠标移入事件，当鼠标移入设置图片背景；
items[i].addEventListener("mouseover",function(){
this.style.backgroundImage ="url(./img.jpg)";
});
}
数据类型
基本数据类型
number
常见的转换数据的方法；
- parsefloat();
- parseInt();
- Number(); ****Number()比较严谨；会把不是数字类型的转换成NaN;由于NaN与任何NaN类型的数据都不相等，所以我们可以用isNaN();
- 字符串转换number类型
- 符合number规则会直接转化；
- 空字符串会直接转化成0；
- 不符合规则的直接转化成NaN;
- 布尔类型转化成number;false转化成0 true转化成1；
- null 转化成number类型的直接转化成0;
- undefined 转化成number类型直接是NaN;
- 对象转化成number数据类型；会先通过toString方法来进行转化，但是不是我们想要的数据；
数字筛选
for(var i = 0; i<arr.length;i++){
// 所有的数字
if(typeof arr[i] == 'number' && !isNaN(arr[i])){
n1.push(arr[i]);
}
// 可以转成数字的
if(!isNaN(parseFloat(arr[i]))){
n2.push(arr[i]);
}
string
- String()所有的数据类型都转成字符串；
- 对象数据类型转化成字符串数据类型会通过对象内置的toString()方法，转化成[object Object];
boolean
- Boolean()只有空字符串转化成 false;
- 数字类型非0都是真；
- 数组类型 都是真；
null
undefined
symbol
号码校验
btn.addEventListener('click',function(){
var val = txt.value;
validate.style.display = "block";
// 输入的内容不能为空；
if(val==""){
text.innerHTML="输入的内容不能为空";
// 2 只能是数字
}else if(isNaN(val)){
text.innerHTML="输入的只能是数字";
}else if(val.length < 5 || val.length > 10){
// 3 输入的数字必须是5-10位
text.innerHTML="输入内容必须是5~10位";
// 4 首字母不能为0；
}else if(val[0]=="0"){
text.innerHTML="首字母不能为0";
// 5 不能是小数；
}else if(String(parseInt(val))!=val){
text.innerHTML="输入的内容不能是小数";
}else{
text.innerHTML="验证通过！";
setTimeout(function(){
validate.style.display = "none";
},1000);
}
});
函数
自定义获取css属性
function $(tagName,attr){
var tag=document.querySelector(tagName);
// tag.currentStyle(attr) ie8以下
// 判断该方法是否存在
return tag.currentStyle ? tag.currentStyle(attr) : getComputedStyle(tag)[attr];
}
闭包案例
- 给多个元素添加事件，可以采用闭包模式（循环中调用方法）;
var showboxes = document.querySelectorAll(".showbox");
var puts = document.querySelectorAll(".put");
var texts = document.querySelectorAll(".text");
var saves = document.querySelectorAll(".save");
var cancels = document.querySelectorAll(".cancel");
var btns = document.querySelectorAll(".btn");
console.log(btns.length);
console.log(showboxes.length);
var contents = document.querySelectorAll(".content");
// 利用函数闭包的特性来完成该功能；
function addEvent(i){
btns[i].addEventListener("click",function(){
showboxes[i].style.display = "none";
puts[i].style.display = "block";
console.log(i);
});
saves[i].addEventListener("click",function(){
if(texts[i].value.trim()){
contents[i].innerHTML = texts[i].value;
puts[i].style.display= "none";
showboxes[i].style.display = "block";
}else{
alert("请输入内容");
}
});
cancels[i].addEventListener("click",function(){
puts[i].style.display= "none";
showboxes[i].style.display = "block";
});
}
for(var i = 0; i<btns.length;i++){
addEvent(i);
}
闭包
// 闭包
function add(a){
function jia(){
a++;
return a+4;
}
return jia;
}
var num = add(2）;
console.log(num());
console.log(num());
console.log(num());
this指向
document.addEventListener(
// call(改变this,...形参)；
// add.call(document.body)
// apply(改变this,[形参])
// add.apply(document,[1,2,3])
// bind(改变this)返回一个函数，再调用(形参1，形参2，形参3)
add.bind(document)(1,2,3)
);
function add(...n){
alert(this+"==="+n);
}
购物车功能实现
(function(){
window.addEventListener("load",function(){
var listLeft = document.querySelectorAll(".list-left");
var spans = document.querySelectorAll(".n");
var minus = document.querySelectorAll(".minus");
var plus = document.querySelectorAll(".plus");
var price = document.querySelectorAll(".price");
var count = document.querySelectorAll(".count");
var strongs = document.querySelectorAll("strong");
for(var i = 0; i<listLeft.length; i++){
addEvent(i);
}
// 功能封装函数
function addEvent(index){
// 封装减按钮的点击事件
minus[index].addEventListener("click",function(){
var count = spans[index].innerText;
count = count>0? count-1 : 0;
spans[index].innerText = count;
var pf = parseFloat(price[index].innerText);
subtotal(index,count,pf);
strongs[0].innerText=totalCount();
strongs[1].innerText = totalPrice();
strongs[2].innerText = getMax();
});
// 封装添加按钮的点击事件；
plus[index].addEventListener("click",function(){
var count = parseInt(spans[index].innerText);
count = count+1;
spans[index].innerText = count;
var pf = parseFloat(price[index].innerText);
subtotal(index,count,pf);
strongs[0].innerText=totalCount();
strongs[1].innerText = totalPrice();
strongs[2].innerText = getMax();
})
}
// 小计商品总和
function subtotal(index,num,pri){
count[index].innerText = pri*num+"元";
}
// 商品总数；
function totalCount(){
var sum = 0;
for(var i = 0; i<spans.length; i++){
console.log(spans[i].innerText);
sum+=parseInt(spans[i].innerText);
}
return sum;
}
// 共计金额；
function totalPrice(){
var sum = 0;
for(var i = 0; i<price.length;i++){
sum+=parseFloat(price[i].innerText)*parseFloat(spans[i].innerText);
}
return sum;
}
// 最贵的商品；
function getMax(){
var max = 0;
for(var i = 0; i<price.length; i++){
if(parseFloat(price[i].innerText)*parseFloat(spans[i].innerText)!= 0){
var pr = parseFloat(price[i].innerText);
max = max>pr?max:pr;
}
}
return max;
}
});
})();
全选案例
前提 onchange事件 用来监听复选框的修改状态，失去焦点会触发该事件；
var colors = ["#fff", "#fceef1"]; //各行变色
// "#e7788d" 鼠标移入
var lis = document.querySelectorAll("li");
var list = document.querySelector("#list");
var checkboxes = list.querySelectorAll("input");
var checkAll = document.querySelector(".checkAll");
var all = checkAll.querySelector("#checkAll");
// 修改颜色
for(var i =0; i<checkboxes.length;i++){
// 设置颜色
setColor(i);
// 添加change
addClickEvent(i);
// 鼠标移入移出修改颜色
changeColor(i);
// 全选按钮的change事件；
checkedAll();
}
// 监听chang事件；
function addClickEvent(index){
checkboxes[index].addEventListener("change",function(){
if(this.checked){
lis[index].style.backgroundColor="#E15671";
}else{
setColor(index);
}
// 判断是否全选
var flag=isCheckedAll();
all.checked= flag?flag:false;
});
}
// 判断其是否都选中
function isCheckedAll(){
var isCheckedAll = true;
for(var i = 0; i<checkboxes.length;i++){
if(!checkboxes[i].checked){
isCheckedAll=false;
}
}
return isCheckedAll;
}
// 要考虑复选框是否选中如果选中要设置选中时的颜色
function changeColor(index){
lis[index].addEventListener("mouseover",function(){
if(checkboxes[index].checked){
this.style.backgroundColor="#E15671";
}else{
this.style.backgroundColor="#E7788D";
}
});
lis[index].addEventListener("mouseout",function(){
if(checkboxes[index].checked){
this.style.backgroundColor="#E15671";
}else{
setColor(index);
}
});
}
// 设置颜色；
function setColor(index){
// 隔行变色 当前索引对颜色数组取余；
lis[index].style.backgroundColor = colors[index % colors.length];
}
// 全选按钮事件；
function checkedAll(){
all.addEventListener("change",function(){
for(var i = 0; i<checkboxes.length;i++){
checkboxes[i].checked = this.checked;
}
});
}
讨厌的小广告
// 定时器里可以嵌套定时器
var showBox = document.querySelector(".showBox");
setTimeout(function(){
showBox.style.display = "block";
setTimeout(() => {
showBox.style.display = "none";
}, 2000);
},2000);
间隔定时器案例
var box = document.querySelector(".box");
var btn = document.querySelector("input");
//人肉眼辨别动画与图片每秒30次 频率是30Hz;
var timer = null;
var distance = 0;
function move (){
distance+=2;
box.style.left = distance +"px";
}
box.addEventListener("click",function(){
// 必变多次点击启动定时器；会使盒子的移动越来越快；
clearInterval(timer);
timer = setInterval(move, 30);
});
btn.addEventListener("click",function(){
clearInterval(timer);
});
qq延时面板
var info = document.querySelector(".info");
var timer = null;
function show(){
info.style.opacity = "1";
}
function hidden(){
timer =setTimeout(function(){
info.style.opacity = "0";
}, 1000);
}
avatar.addEventListener("mouseover",show);
avatar.addEventListener("mouseout",function(){
hidden();
});
info.addEventListener("mouseover",function(){
//当移动到信息面板时，我们一定要清空移开头像面板的延时定时器，不然不会显示
clearTimeout(timer);
show();
});
info.addEventListener("mouseout",hidden);
自动切换
var box = document.querySelector('#box');
var lists = document.querySelectorAll('.navs li');
var boxs = box.querySelectorAll('div');
var num = 0;
var timer = null;
for(var i = 0; i<lists.length;i++){
addEvent(i);
}
function addEvent(index){
lists[index].addEventListener("click",function(){
num = index;
tabs(index);
});
}
function tabs(index){
for(var i = 0; i<lists.length; i++){
lists[i].classList.remove("active");
boxs[i].style.display = "none";
}
lists[index].classList.add("active");
boxs[index].style.display = "block";
}
//自动轮播
function init(){
timer = setInterval(function(){
tabs(num);
num++;
if(num>3){
num = 0;
}
},1000);
}
init();
box.addEventListener("mouseover",function(){
clearInterval(timer);
});
box.addEventListener("mouseout",function(){
init();
});
时钟案例
var nums =document.querySelectorAll(".num");
var num2 = document.querySelector(".num2");
// console.log(nums.length);
//补0方法；
function add0(time){
return time = time<10?"0"+time:time;
}
// 获取日期的方法
function getWeek(week){
switch(week){
case 0:
num2.src="images/seven.png";
break;
case 1:
num2.src="images/one.png";
break;
case 2:
num2.src="images/two.png";
break;
case 3:
num2.src="images/three.png";
break;
case 4:
num2.src="images/four.png";
break;
case 5:
num2.src="images/five.png";
break;
case 6:
num2.src="images/six.png";
break;
}
}
setInterval(clock,1000);
function clock(){
var date = new Date();
var date = new Date();
var year = date.getFullYear();
var month = add0(date.getMonth()+1);
var day = add0(date.getDate());
var hour = add0(date.getHours());
var minute = add0(date.getMinutes());
var seconds = add0(date.getSeconds());
var week = date.getDay();
var detailTime = ""+year+month+day+hour+minute+seconds;
for(var i = 0;i<nums.length;i++){
nums[i].src="images/"+detailTime[i]+".png";
}
// 获取星期的方法
getWeek(week);
}
clock();
String常用方法
/**字符串查找方法**/
var str = "wangao";
// 通过下标获取并返回对应的字符
var char = str.charAt(5);
console.log(char);
// 返回字符对应的字符串下标的索引(从左到右查找)
// 2代表从索引第二个位置开始找
var index = str.indexOf("o",2);
console.log(index);
// 从右到左查找，返回最后一次出现该字符所对应的索引
var lastindex = str.lastIndexOf("a");
/**截取方法**/
// 含头不含尾
var result =str.slice(1,4);
console.log(result);
// 参数一代表截取的索引位置，参数二：需要截取几个
var re = str.substr(1,3);
console.log(re);
// 参数1：截取的起始位置，参数二：截取结束位置，可以颠倒，无顺序
var result2 = str.substring(4,1);
// 以'a'，进行切割，并返回一个数组
var arr =str.split("a");
console.log(arr);
/**大小写**/
var s = str.toUpperCase();
console.log(s);
var ss = s.toLowerCase();
console.log(ss);
/**字符串拼接**/
var st = str.concat("jiayou");
console.log(st);
/**返回字符所对应Unicode编码**/
var code = str.charCodeAt(1);
console.log(code);
var char = String.fromCharCode(code);
console.log(char);
// 保留小数后几位；(四舍五入)
var num = 12.666;
var num2 = num.toFixed(2);
console.log(num2);
文字搬运工
var progress = document.querySelector("span");
var btn = document.querySelector("a");
var lis = document.querySelectorAll("ul > li");
var content = document.querySelector("#box > textarea");
var p = document.querySelector("#box > p");
var ul = document.querySelector("ul");
var timer = null;
var len = content.value.length;
var index = 0;
btn.addEventListener("click",function(){
ul.style.opacity = '1';
clearInterval(timer);
timer = setInterval(function(){
var text = content.value;
var char =text.charAt(0);
content.value = text.substr(1);
p.innerText +=char;
index++;
progress.innerText = index+'/'+len;
lis[index%lis.length].classList.add("active");
lis[(index-1)%lis.length].classList.remove("active");
if(index == len){
clearInterval(timer);
ul.style.opacity = "0";
}
},100);
});
数组常用方法
/** 添加方法 **/
// push(...可变参数)方法是向后插入元素
// arr.push(56);
// unshift(...可变参数)：向前面插入元素
// arr.unshift(67,34);
// console.log(arr);
/** 删除方法 **/
// pop()：删除最后的元素,并返回所删除的元素
// var remove= arr.pop();
// shift():删除最前面的元素，并返回所删除的元素
// var re = arr.shift();
// console.log(re);
/** splice(参数1：起始元素位置，参数2：删除几个元素，参数3：你要添加的元素)全能方法 **/
// 删除
// arr.splice(1,3);
// console.log(arr);
// 修改
// arr.splice(1,1,3);
// console.log(arr);
// 添加
// arr.splice(2,0,38);
// console.log(arr);
/** 反转方法 **/
// arr.reverse();
// console.log(arr);
var arr2 = ['a','b','c'];
// 数组合并 成为一个新数组，但不影响原来的数组
var arr3 = arr.concat(arr2)
console.log(arr3);
// join(参数:连接符) 数组转化为字符串
var str = arr3.join('');
console.log(str);
// arr3.sort() 默认以字典顺序排序
arr.sort((n1,n2)=>{
// 从小到大； n2-n1:从大到小；
// return n1-n2;
return n2-n1;
});
console.log(arr);
打乱图片案例
var btns = document.querySelectorAll("a");
var container = document.querySelector("ul");
var items = container.querySelectorAll("li");
var arr = Array.from(items);
// 排序方法;
function mySort(arr){
arr.sort((n1,n2)=>{
var num = n1.querySelector("p").innerText.charAt(0);
var num2 = n2.querySelector("p").innerText.charAt(0);
return num - num2;
});
}
var onOff = true;
// 添加点击事件
btns[0].addEventListener("click",function(){
mySort(arr);
onOff? "" : arr.reverse();
arr.forEach((ele,index)=>{
// append()当没有添加元素的情况下，
container.append(ele);
});
onOff?btns[0].innerText = "从大到小":btns[0].innerText = "从小到大";
onOff = !onOff;
});
// 随机排序；
btns[1].addEventListener("click",function(){
arr.sort(function(){
return Math.random()-0.5;
})
arr.forEach((ele,index)=>{
// append()当没有添加元素的情况下，
container.append(ele);
});
})
es5.1新增数组方法
<!-- ecmascript5.1 新增方法 -->
<script>
var arr = [13,57,90,43,67];
// filter 过滤方法，必须有过滤条件，返回一个新数组，
var arr2 = arr.filter((ele)=>{
return ele>57;
});
// console.log(arr2);
// map(); 可以批量改变元素获取一个新数组
var arr3 = arr.map((ele)=>{
return ele*2;
});
// console.log(arr3);
// reduce():通常做累加运算
var result = arr.reduce((pre,now,index,arr)=>{
// pre:上一个累加的和；
// now：当前元素；
// index：当前索引，
// arr:当前的数组
return pre+now;
});
console.log(result);
// 判断 是否满足条件,只要有一个不满足条件，结束执行，并返回false;
var index = arr.every((ele,index)=>{
return ele==57;
});
console.log(index);
// 只要有一个满足条件，就会返回true;
var flag = arr.some((ele,index)=>{
return ele==57;
});
console.log(flag)
伪3D图片切换
var imgs = document.querySelectorAll("img");
var btn = document.querySelectorAll("a");
var arr = [0,150,300];
// 初始化图片样式
function loadingImgs(){
imgs.forEach((ele,index)=>{
ele.style.left=arr[index]+'px';
ele.style.transform = 'scale(1)';
ele.style.filter = 'blur(5px)';
ele.style.zIndex = " 0 ";
if(ele.style.left=="150px"){
ele.style.transform = 'scale(1.2)';
ele.style.filter = 'blur(0px)';
ele.style.zIndex = " 10 ";
}
});
}
loadingImgs();
// 切换图片样式，实际上就是对数arr的元素进行顺序颠倒
// 向前切换
btn[0].addEventListener("click",()=>{
arr.push(arr.shift());
loadingImgs();
});
btn[1].addEventListener("click",()=>{
arr.unshift(arr.pop());
loadingImgs();
});
文字替换案例
var open =document.querySelector("a");
var btns = document.querySelectorAll("li");
var ul = document.querySelector("ul");
var searchContent = document.querySelector("#search");
var replaceContent = document.querySelector("#replace");
var fun = document.querySelector("#fun");
var searchBtn = fun.querySelectorAll("a")[0];
var replaceBtn = fun.querySelectorAll("a")[1];
var sBtn =searchContent.querySelectorAll("input")[1];
var sInput =searchContent.querySelectorAll("input")[0];
var content = document.querySelector("#content");
var old = replaceContent.querySelectorAll("input")[0];
var news = replaceContent.querySelectorAll("input")[1];
var rBtn = replaceContent.querySelectorAll("input")[2];
var search = btns[0];
var replace = btns[1];
var onOff = true;
open.addEventListener("click",()=>{
if(onOff){
ul.style.display = "block";
}else{
ul.style.display = "none";
}
onOff = !onOff;
});
search.addEventListener("click",()=>{
fun.style.display = "block";
searchContent.style.display = "block";
replaceContent.style.display = "none";
// 点击查找时也要更新开关状态
if(onOff){
ul.style.display = "block";
}else{
ul.style.display = "none";
}
onOff = !onOff;
});
replace.addEventListener("click",()=>{
fun.style.display = "block";
replaceContent.style.display = "block";
searchContent.style.display = "none";
// 点击查找时也要更新开关状态
if(onOff){
ul.style.display = "block";
}else{
ul.style.display = "none";
}
onOff = !onOff;
});
searchBtn.addEventListener("click",()=>{
searchContent.style.display = "block";
replaceContent.style.display = "none";
});
replaceBtn.addEventListener("click",()=>{
replaceContent.style.display = "block";
searchContent.style.display = "none";
});
var sh = "";
sBtn.addEventListener("click",()=>{
var txt = sInput.value;
sh = txt;
if(txt.trim()){
content.innerHTML= content.innerHTML.split(txt).join("<span>"+txt+"</span>");
}else{
alert("内容不能为空");
return;
}
sInput.value="";
isSearch = true;
});
rBtn.addEventListener("click",()=>{
var oldWord = old.value;
var newWord = news.value;
if(oldWord.indexOf(sh)!=-1){
if(oldWord.trim()&&newWord.trim()){
content.innerHTML=content.innerHTML.split("<span>"+oldWord+"</span>").join(newWord);
}else{
alert("内容不能为空");
return;
}
}else{
if(oldWord.trim()&&newWord.trim()){
content.innerHTML=content.innerHTML.split(oldWord).join(newWord);
}else{
alert("内容不能为空");
}
}
});
对象常用方法
var person = {
name:"jay",
age:47,
sex:"男",
job:"歌手"
}
// 删除对象属性
delete person.job;
console.log(person);
for (var key in person) {
console.log(person[key]);
}
// 把json转化成字符串
var str =JSON.stringify(person);
console.log(str);
// 把字符串转化成json
var obj = JSON.parse(str);
console.log(obj);
// 获取所有的键值对
var keys = Object.keys(person);
var values = Object.values(person);
console.log(values);
MathAPI
var number = 13.1314;
var number2 =12.789;
// 获取0-1(不包含1)的随机数
var random = Math.random();
// 四舍五入
var num = Math.round(number);
console.log(num);
// 向下取整
var num2 = Math.floor(number);
console.log(num2);
// 向上取整
var num3 = Math.ceil(number);
console.log(num3);
// 取最大值
var max = Math.max(number2,number);
console.log(max);
// 取最小值
var min = Math.min(number,number2);
console.log(min);
// 属性圆周率
var pi = Math.PI;
console.log(pi);
// 绝对值
var abs = Math.abs(-13.56);
console.log(abs);
水滴案例
.course-list-more {
width: 870px;
position: relative;
height: 42px;
}
@keyframes loadBtn {
0% {
transform: scale(1, 1);
}
20% {
transform: scale(1.2, .8);
}
40% {
transform: scale(.8, 1.2);
}
60% {
transform: scale(1.1, .9);
}
80% {
transform: scale(.9, 1.1);
}
100% {
transform: scale(1, 1);
}
}
.course-list-more .btn {
position: absolute;
left: 414px;
top: 0px;
width: 42px;
height: 42px;
border-radius: 50%;
font: 12px/42px "微软雅黑";
/* color: #9aabb7; */
text-align: center;
cursor: pointer;
z-index: 2;
background: #9aabb7;
color: #fff;
}
.course-list-more .btn.animation-start {
animation: .8s loadBtn;
}
js实现逻辑
<div class="course-list-more">
<a class="btn">More</a>
</div>
<script>
var btn = document.querySelector('.btn');
btn.addEventListener("mouseover",()=>{
btn.classList.add("animation-start");
});
btn.addEventListener("animationend",()=>{
btn.classList.remove("animation-start");
});
</script>
图片渐隐渐现
.wrap {
position: relative;
margin: 30px auto;
width: 640px;
}
.picList {
margin: 0;
padding: 0;
list-style: none;
width: 640px;
height: 368px;
}
.picList li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: 1s;
z-index: 1;
}
.picList .show {
opacity: 1;
z-index: 2;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
height: 20px;
}
.nav a {
position: relative;
z-index: 4;
width: 12px;
height: 12px;
margin: 0 5px;
background: #000;
border-radius: 6px;
}
.nav span {
display: none;
position: absolute;
left: -27px;
top: -50px;
}
.nav a:hover span {
display: block;
}
.nav img {
display: block;
width: 64px;
height: 36.8px;
border: 1px solid #000;
}
.nav span:after {
content: "";
position: absolute;
left: 25px;
bottom: -16px;
width: 0;
height: 0;
border: 8px solid #000;
border-color: #000 transparent transparent;
}
.nav .active {
background: #f60;
}
.btn {
position: absolute;
top: 120px;
width: 40px;
height: 40px;
background: #fff;
color: #000;
font: 14px/40px "宋体";
text-align: center;
text-decoration: none;
z-index: 3;
}
.prev {
left: 0;
}
.next {
right: 0;
}
<div class="wrap">
<ul class="picList">
<li class="show">
<a href="#1">
<img src="img/img1.jpg" />
</a>
</li>
<li>
<a href="#2">
<img src="img/img2.jpg" />
</a>
</li>
<li>
<a href="#3">
<img src="img/img3.jpg" />
</a>
</li>
<li>
<a href="#4">
<img src="img/img4.jpg" />
</a>
</li>
</ul>
<nav class="nav">
<a href="javascript:;" class="active">
<span><img src="img/img1.jpg" /></span>
</a>
<a href="javascript:;">
<span><img src="img/img2.jpg" /></span>
</a>
<a href="javascript:;">
<span><img src="img/img3.jpg" /></span>
</a>
<a href="javascript:;">
<span><img src="img/img4.jpg" /></span>
</a>
</nav>
<a href="javascript:;" class="btn prev">prev</a>
<a href="javascript:;" class="btn next">next</a>
</div>
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var aNav = document.querySelectorAll(".nav a");
var lis = document.querySelectorAll("li");
var index = 0;
next.addEventListener("click",()=>{
index++;
if(index>3){
index=3;
}
tabs(index);
});
prev.addEventListener("click",()=>{
index--;
if(index<0){
index=0;
}
tabs(index);
});
function tabs(index){
for(var i = 0; i<lis.length;i++){
lis[i].classList.remove("show");
aNav[i].classList.remove("active");
}
lis[index].classList.add("show");
aNav[index].classList.add("active");
}
aNav.forEach((item,i)=>{
index = i;
item.addEventListener("click",()=>{
tabs(i);
});
});
无缝滚动
// 末尾放再放第一张才能实现无缝滚动
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var pics = document.querySelector("#pics");
var navs = document.querySelectorAll("#navs a");
var li = pics.querySelector("li");
var lis = pics.querySelectorAll("li");
console.log(lis.length);
var width = li.offsetWidth;
// console.log(width);
var index = 0;
next.addEventListener("click",()=>{
pics.style.transition="1s linear";
index++;
pics.style.left = -index*width+'px';
console.log(index);
});
// 每次过渡完毕后都要监听left==-3000px;
pics.addEventListener("transitionend",()=>{
if(index == lis.length-1){
console.log(11111);
//清除过渡效果
pics.style.transition="none";
pics.style.left = "0px";
// 同时防止index越界
index=0;
}
});
