css动画
transform
transform平移
1.translate(a)
a:水平平移的位置 单位：px
a>0 水平向右平移
<0 向左平移
=0 保存原生位置不变
2.translate(a,b)
y轴：向下为正，向上为负
X轴：向右为正，向左为负
translateX ：水平方向 translateY ：垂直方向
eg:水平向右100px，垂直向下100px
transform: translate(100px,100px);
注意：不能在同一个元素上添加多个transform，后面的transform会覆盖掉前面的
transform旋转
rotate(a)旋转
a ：旋转的角度 单位deg
a>0 顺时针
a<0 逆时针
transform缩放
scale(a)缩放
a：倍率
0<a<1 缩小
a>1 放大
a=0 让元素消失，但是不会删除元素
a=1 不变
a=-1 大小不变，镜像显示
a<0 负数，倒向
0<|a|<1 缩小
|a|>1 放大
a>1
eg:只控制水平方向放大
transform: scaleX(a);
eg:只控制垂直方向放大
transform: scaleY(a);
transform-origin旋转基点
值：关键字top、left、right、bottom、center; 百分比;数字
eg: 基点在左上角
transform-origin:left top;或者 transform-origin:0 0;
transform倾斜
skew(a)
单位：edg
skewX:水平方向的拉伸
skewY:垂直方向的拉伸
谷歌/edge所能识别的样式 ： -webkit-transform: skew(10deg,20deg);
火狐浏览器所能识别的样式： -moz-transform:skew(10deg,20deg);
多个transform属性值的使用，可以写在一个transform里面 ：
transform: translateX(100px) rotate(10deg) skew(10deg) scale(0.5);
transition过渡动画
transition-property设置过渡动画生效的对应css样式属性
all：所有样式都生效
none：没有样式生效变化效果
property：指定某一个需要变化的css样式属性生效
需要指定多个变化属性,就用逗号分隔:
动画变化的持续时间s/ms: transition-duration: 2s;
延迟时间:transition-delay: 2s;
动画速度曲线: transition-timing-function:
ease-,ease-in, linear-匀速, cubic-bezier-贝赛尔曲线
画三角形
动态风车
效果图：
css样式：
<style>
.box{
width: 500px;
height: 500px;
position: absolute;
top: 200px;
left: 100px;
border: 1px solid rebeccapurple;
}
.box1,
.box2,
.box3,
.box4{
width: 0;
height: 0;
border-width: 50px 100px;
border-color: transparent green green transparent;
border-style: solid;
/* 调整位置，让每一个扇叶处于同一位置下 */
position: absolute;
top: 150px;
left: 50px;
/* 设置旋转基点——每一个盒子都要设置相同的基点，这样旋转的方向和旋转的圆心就会一致 */
transform-origin: right bottom;
}
.box1{
transform: rotate(2deg);
}
.box2{
transform: rotate(92deg);
border-color: transparent yellow yellow transparent;
}
.box3{
transform: rotate(182deg);
border-color: transparent green green transparent;
}
.box4{
transform: rotate(272deg);
border-color: transparent yellow yellow transparent;
}
</style>
html+js：
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
</body>
<script>
var box1 = document.querySelector(".box1")
var box2 = document.querySelector(".box2")
var box3 = document.querySelector(".box3")
var box4 = document.querySelector(".box4")
var a = 4
var b = 94
var c = 184
var d = 274
setInterval(() => {
// 顺时针
// a+=4;
// b+=4;
// c+=4;
// d+=4;
// 逆时针
// a-=4;
// b-=4;
// c-=4;
// d-=4;
box1.style.transform = "rotate("+a+"deg)"
box2.style.transform = "rotate("+b+"deg)"
box3.style.transform = "rotate("+c+"deg)"
box4.style.transform = "rotate("+d+"deg)"
}, 20);
</script>
表盘
效果图：
css样式：
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: black;
border: 12px solid grey;
position: relative;
list-style: none;
padding: 6px;
}
li {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 151px;
transform-origin: center 150px;
border-radius: 50%;
}
li:nth-child(5n+1) {
background-color: white;
height: 20px;
border-radius: 10px;
}
/* 表盘的中心 */
.dot {
width: 32px;
height: 32px;
background-color: aqua;
position: absolute;
top: 145px;
left: 154px;
border-radius: 50%;
z-index: 1;
}
/* 时针 */
.hour {
width: 28px;
height: 62px;
background-color: grey;
position: absolute;
top: 110px;
left: 153px;
transform: rotate(108deg);
transform-origin: center 46px;
}
/* 伪远元素这是指针的箭头 */
.hour::before {
content: "";
position: absolute;
top: -40px;
border-width: 20px 15px;
border-color: transparent transparent gray transparent;
border-style: solid;
}
/* 分针 */
.minute {
width: 24px;
height: 90px;
background-color: green;
position: absolute;
top: 89px;
left: 157px;
transform: rotate(30deg);
transform-origin: center 71px;
}
/* 伪元素这是指针的箭头 */
.minute::before {
content: "";
position: absolute;
top: -40px;
border-width: 20px 12px;
border-color: transparent transparent green transparent;
border-style: solid;
}
/* 秒针 */
.second {
width: 20px;
height: 113px;
background-color: blue;
position: absolute;
top: 68px;
left: 160px;
transform: rotate(180deg);
transform-origin: center 90px;
}
/* 伪远元素这是指针的箭头 */
.second::before {
content: "";
position: absolute;
top: -40px;
border-width: 20px 11px;
border-color: transparent transparent blue transparent;
border-style: solid;
}
</style>
html+js:
<body>
<ul>
</ul>
<!-- 表盘中心 -->
<div class="dot"></div>
<!-- 时针 -->
<div class="hour"></div>
<!-- 分针 -->
<div class="minute"></div>
<!-- 秒针 -->
<div class="second"></div>
<script>
let mul = document.querySelector('ul')
// 获取时分秒
let hour = document.querySelector(".hour")
let minute = document.querySelector(".minute")
let second = document.querySelector(".second")
// 循环添加刻度li
for (let i = 0; i < 60; i++) {
mul.innerHTML += "<li style='transform: rotate(" + i * 6 + "deg);'></li>"
}
let mli = document.querySelectorAll('li')
//初始时间
// h = 3
// m = 59
// s = 50
// 获取系统当前时间
let myDate=new Date()
let h=myDate.getHours()
let m=myDate.getMinutes()
let s=myDate.getSeconds()
setInterval(() => {
s++
if (s >= 60) {
s = 0;
m++
if (m >= 60) {
m = 0;
h++
if (h >= 12) {
h = 0
}
}
}
// 1h 30deg 1m=6deg 1s=6deg
hour.style.transform = rotate(${h * 30}deg)
minute.style.transform = rotate(${m * 6}deg)
second.style.transform = rotate(${s * 6}deg)
}, 1000);
</script>
transition-timing-function
steps(5, jump-both) (弹跳次数,弹跳方式 )
transition-timing-function: steps(5, jump-both);
transition-timing-function: step-start;
transition事件
作用：监听过渡动画生效情况
transitionstart__过渡动画真实开始
transitionrun—触发生效
transitionend—真实结束
animation事件
animationstart—动画开始
animationend—动画结束
animationiteration—动画执行（与animation-iteration-count相关， 如果动画有循环次数，会在前一次动画结束时执行）
3D动画
3D变化要求：必须要有父容器，父容器需要构造一个3D空间
父容器设置3D空间：
1.构造3D空间：transform-style: preserve-3d;
2.构造景深： perspective: 100px;
3.观察立体图形的角度： perspective-origin: 500% 200%;
child
子元素是不同类型的排序——真正位置上
:first-child 匹配父元素中的第一个子元素，该元素必须是父元素中 真正的 第一个子元素
:last-child 匹配父元素中的最后一个子元素， 该元素必须是父元素中 真正的最后一个子元素
:nth-child(n) 改变所有行数样式，2n+1奇数行，2n偶数行，n可以是关键字：even偶数，odd奇数
子元素是同类型间的排序：
:first-of-type 匹配父元素中的 同元素类型间的第一个子元素
:last-of-type 匹配父元素中的 同元素类型间的最后一个子元素
:nth-of-type(n) 匹配父元素的 同元素类型间的第n个子元素
animation动画和transition动画区别：
animation动画：只要页面加载完成，就会触发效果
过渡动画：必须要有操作才会触发过渡动画效果（例如给元素添加active类名 ）
渐变色
1-线性渐变：（参数1：角度/ to 方向，参数2：开始的颜色 ， 参数3：结束的颜色）
默认渐变方向：从上往下
background-image: linear-gradient(to right,red,blue);
background-image: linear-gradient(45deg,red,blue);
2-径向渐变：（参数：开始颜色，结束颜色）
background-image: radial-gradient(white,black,white,black)
3-1重复渐变：（ 参数1：角度/ to 方向， 参数2：第1个颜色 开始位置...）
background-image: repeating-linear-gradient(to right,red 0px, red 10px,blue 0px,blue 30px);
3-1重复渐变：（ 参数：开始颜色 开始位置， 参结束颜色 结束位置）
background-image: repeating-radial-gradient(white 0px, white 10px,black 0px,black 30px);
分栏式布局
分栏的数量： column-count: 2;
分栏线的样式： column-rule: 1px solid red;
以下属性，设置了分栏数就不生效：
每个栏目内容与分栏线的间距 ： column-gap: 20px;
每个栏目的宽度： column-width: 20px;
响应式布局
只要屏幕宽度 < 800px就生效：
@media screen and (max-width: 800px) {
.box {
样式
}
}
分4列：width: calc(25% - ？px);
JQuery
JQuery
引入jQuery的js文件: <script src="jquery-3.6.3.min.js"></script>
jquery基础语法 :$('selctor').action()
selctor:css相关的选择器名
action():操作方法、事件函数
获取jquery对象返回的都是数组集合
用get函数获取jquery的dom对象,get的参数代表 该元素在jquery数组对象里面的下标：var ('.box').get(0)
JQuery筛选器
获取第一个/最后一个：var ('.box').first() ；var ('.box').last()
eq(下标值从0开始)： var ('.box').eq(3)[0]
前一个（同级）/前所有（数据是倒序）：prev() prevAll()
后一个（同级）/后所有（数据是顺序）：next() nextAll()
找到父亲: parent()
找到所有父亲: parents()
找同级兄弟: siblings()
找子级满足条件的元素: find('div')
找元素的索引：index()
找到 选择器A 的最近满足条件B的 开始于当前元素 的一个节点：closest('B')
JQuery操作元素
在某个元素内部添加/替换元素( 同innerHTML() ): html()
eg:console.log($('.box').html(<div>1</div>));
在某个元素内部添加文本( 同innerText() ): text()
读取/修改表单元素的值： val()
A被添加的元素（父），B添加的元素（子）向A的最后一个子节点添加元素：append()
B必须通过(B).appendTo(A)
向A的第一个子节点添加元素：prepend()
把$(B)添加到A里：prependTo()
向指定的位置前/后添加元素：before()
把。。（子）。。添加到..（父）.里面去：insertBefore()/insertAfter()
JQuery操作类名
注意：类名不需要加点
判断类名是否存在,返回值为 true/false: hasClass()
添加类名: addClass()
删除类名: removeClass()
获取切换按钮——只要原生有当前类名，他就会删除；没有当前类名，就会添加: toggleClass()
JQuery操作样式
获取指定样式: .css('样式属性名')
修改指定样式名的值: .css('样式属性名','值')
修改多个样式: css({样式1:值,样式2:值})
eg:$('.box1').eq(0).css({
width:200,
'background-color':'red'
})
JQuery操作属性
修改原生/自定义属性class的值：attr()
既可以移出自定义属性，也可以移出原生属性：removeAttr()
原生属性，查询到原生属性值，也可以修改原生属性，并且，修改后的原生属性值，会显示在页面的标签中；
自定义属性，不可查询最初自定义的属性值修改自定义的属性值，但是不会显示在页面的标签中，只会出现在属性里：prop()
原生属性+原来的自定义属性不可移出，只可移由prop添加的自定义属性：removeProp()
JQuery获取元素尺寸
width()/height()
innerWidth()/innerHeight() ：width+左padding+右padding
outerWidth()/outerHeight() ： width+左boder+右boder+左padding+右padding
outerWidth(true)/outerHeight(true) ： width+左boder+右boder+左padding+右padding +左margin + 右margin
JQuery获取偏移量
返回的对象值都是{top: , left: }___包含了非定位的偏移量：offset()
返回的对象值都是{top: , left: }___只会算定位的偏移量: position()
JQuery获取滚动条的位置
滚动条距离左边的px：scrollLeft()
滚动条距离上边的px：scrollTop()
JQuery事件绑定On
基础事件绑定on('监听的事件名click\mouseover',function(){})
$('.box3').on('click',function () {
console.log(1111);
})
事件委托绑定事件：就是在事件后面多加一个被委托的选择器
批量事件绑定：
事件只会触发一次: one()
常用的时间处理函数：
click('事件处理函数')
mouseover('事件处理函数')
mouseout('事件处理函数')
change('事件处理函数')——————只作用于表单
hover('事件处理函数')——————移入/移出都会触发的函数
解绑事件：
off('需要解绑的事件处理函数')
off('需要解绑的事件处理函数',所要指定解绑的事件名)
eg:$('.box2').off('click',B)
JQuery动画函数
基本动画函数：（运动时间（不写瞬间完成），运动曲线（默认：swing），动画完成时的执行函数）
显示: show()
隐藏: hide()
切换: toggle()
折叠动画函数: slideDown() slideUp() slideToggle()
渐隐渐显动画函数: fadeIn() fadeOut() fadeToggle() fadeTo():多一个指定到的透明度 0~1
JQuery中的animate
background-color/color不能通过animate修改样式，除非使用jQuery.Color()插件
结束动画
暂停 （停止在当前位置，也就是下一次动画的开始）：stop()
结束 （一瞬间结束）：finish()
JQuery中的ajax请求
Canvas画布
canvas基本使用
不可以直接在style里写样式，只能写行内样式
1-通过原生js获取到canvas
var myCan = document.querySelector('canvas')
2-构造一个canvas 2D画布空间
var myCont = myCan.getContext('2d')
向画布里画图片：
3-获取图片
var myimg = document.querySelector('img')
4 -监听图片是否加载成功
myimg.addEventListener('load',function () {
5 -图片加载成功后，在画布空间里画图片
myCont.drawImage(myimg,0,0)
})
canvas线条的绘制
画布中：坐标原点在左上角，x轴向右为正，y轴向 下
指定绘画的起始位置： myCont.moveTo(200,200)
指定绘画的结束位置： myCont.lineTo(400,400)
设置绘画的颜色： myCont.strokeStyle = "red"
设置线条的宽度： myCont.lineWidth = 10
设置线条结束端点的样式__square/butt(默认)/round： myCont.lineCap = "round"
执行绘制： myCont.stroke()
绘制正/倒三角：
闭合空间绘制路径（成对出现）：beginPath()/closePath()
画房子：
填充空间
填充渐变色
1.创建渐变色块，参数（起始坐标，结束坐标，起始坐标，结束坐标）：createLinearGradient(x0,y0,x1,y1)
2.为渐进色块填充颜色，参数(渐进范围,'颜色')：addColorStop
3.渐变色块赋给fillStyle：myCont.fillStyle = myG;
4.进行填充： myCont.fill();
注意：修改填充颜色必须再执行填充之前：myCont.fillStyle = "red"
矩形绘制
空心矩形：strokeRect()
myCont.strokeRect(起始点x坐标,起始点y坐标,宽,高)：myCont.strokeRect(200,200,100,100)
实心矩形：fillRect()
方块移动：
清空整个画布（400*400）： context.clearRect(0, 0, 400, 400);
矩形区域清除： clearRect(起始点x坐标,起始点y坐标,宽,高)
圆弧绘制
起始角度 0 ----起始弧度 0*（Math.PI/180°）------ 右边3点钟方向为 0 度
结束角度 180 --- 结束弧度 180*（Math.PI/180°）
100圆心的x坐标,100圆心的y坐标,50圆的半径,0圆弧的起始弧度,180(Math.PI/180)圆弧的结束弧度,true逆时针画/false顺时针：myCont.arc(100,100,50,0,180(Math.PI/180),true)
画脸
扇形绘制
弧度的计算=角度数*（Math.PI/180°）
扇形：线＋圆弧
图片绘制
如果html页面中没有图片标签，就需要创建图片源：
先创建图片对象
var mImg = new Image()
mImg.src = "photo4.jpg"
如果有图片标签，就可以获取图片源：
var mImg = document.querySelector('img')
//监听图片加载是否成功
mImg.onload = function () {
//如果加载成功
console.log(1);
//在画布里画图片
context.drawImage(mImg,0,0)
//参数1：所要绘制的图片源--元素
//参数2、3 ：截取的图片x,y坐标在画布内部的坐标
//参数4、5：截取的图片宽、高在画布内部的图片宽高
//参数6、7 ：在画布中绘制的图片x,y坐标
//参数8、9 ：在画布中绘制的图片宽、高
context.drawImage(mImg,0,0,240,240,200,200,100,100)
}
多媒体标签
audio
width ：标签宽度
height ：标签高度
controls：控制面板：包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放
muted：布尔属性，代表是否静音
autoplay：自动播放：可能会破坏用户体验，所以应该尽可能避免
src ：媒体源
loop：布尔属性，代表是否循环
swiper框架
引入swiper框架样式： <link rel="stylesheet" href="swiper-bundle.min.css" />
vertical垂直切换选项 horizontal水平方向： direction: "vertical"
微信小程序
wx:if
wx:if=""：true：就显示 ;false：语句结构不会显示在页面结构中
eg:<view wx:if="{{4>2}}">
显示？不显示？
</view>
注意：①如果需要高频率的显示/隐藏的操作，建议用hidden 反之就建议用wx:if
② hidden隐藏之后不会从页面结构中卸载当前所在的组件结构
③for与if可以同时存在与一个组件的属性中
wx:for
eg:<view wx:for="{{[]}}" wx:key="index">
多重循环的情况： eg:(内层循环要自定义)<view wx:for="{{[]}}" wx:key="innerindex" wx:for-item="inneritem" wx:for-index="innerindex">
事件
学习地址：微信开发文档----指南---小程序框架---视图层----事件系统
1-在需要绑定事件的组件/标签的属性中添加 bindXXX="自定义事件处理函数名字“
2-注册自定义事件处理函数（js文件中，与DATA同级）
绑定点击事件 bindtap
绑定输入事件 bindinput
生命周期函数
① 监听页面加载
onLoad(options) {
}，
② 监听页面初次渲染完成
onReady() {
}，
③ 监听页面显示
onShow() {
},
④ 监听页面隐藏
onHide() {
}，
⑤ 监听页面卸载
onUnload() {
},
navigator导航跳转
默认跳转：跳转到指定的页面，并且可以返回
open-type="redirect" ：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
open-type="navigateBack"：关闭当前页面，返回上一页面或多级页面
open-type="switchTab"： 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面,当前页面不会再允许返回
open-type="reLaunch"：会关闭所有页面，打开到应用内的某个页面
注意：① delta当 open-type 为 'navigateBack' 时有效，表示回退的层数
②如果需要跳转到tabbar页面，就不可以设置路径直接跳转 :
eg: <navigator url="../test01/test01" open-type="switchTab">点击此处跳转到test01页面</navigator>
微信小程序和HTML的区别
微信小程序 html
组件 标签
view div
text（读取内部属于文本的所有内容） span
image img
navigator a
radio-group
radio-group将内部的radio组合成一个组，内部的radio就可以实现单选效果
radio如果单独使用多个，就不会有单选的效果出现
checkbox-group 直接获取到当前组内的多选按钮的值，并且实时变化
picker
mode="region"：
<picker mode="region" value="{{['北京市', '北京市', '朝阳区']}}" bindchange="mychange">
<!-- 内部添加一个可供选择点击的区域，触发弹起底部滚动选择器 -->
当前选择：{{range}}
</picker>
mode="selector"：
<picker mode="selector" range="{{[1,2,3]}}">
当前普通选择器选择：
</picker>
iconfont引入
在app.wxss中引入外部样式文件:
@import "iconfont.wxss"
leancloud
①配置leancloud必须要有的sdk文件
const AV = require("./libs/av-core-min.js");
const adapters = require("./libs/leancloud-adapters-weapp.js");
在需要使用leancloud的js页面添加：
//1-引入app.js中的AV——leancloud的sdk
const AV = getApp().globalData.AV
2199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
