华清远见重庆中心——移动互联应用学习总结
目录
一、css动画
1.动画原理：
2.css代码中如何理解动画：
3. transform
3.1 translate 平移
3.2 rotate: 旋转元素
3.3 scale 缩放
3.4 skew 倾斜
3.5 设置多个变换属性
4.transition
4.1 使用方法
4.2 transition 盒子下落
5. transform 和transition使用
二、jquery
1.jquery的作用：
2.基础用法
3.eq() ,index() , get() , find() ,closest() 方法的使用
4.创建元素和插入元素
三，canvas画布
1.canvas基础使用
2.示例
四.微信小程序
1.微信小程序基础
1.1常用标签：
1.2 单位rem和rpx
2.微信api
2.1Page参数
2.2 wx.xxx
3.模板语法
3.1条件渲染
3.2 循环渲染
4.事件
4.1 事件的使用
4.2 事件绑定语法
5.生命周期
5.1 APP生命周期
5.2 page的生命周期
总结
一、css动画
1.动画原理：
连续的播放多张图片，形成一个连贯的动画
2.css代码中如何理解动画：
一个元素存在多个css状态，连续的播放改元素的这些css状态，将形成一组动画，这就是css动画
3. transform
3.1 translate 平移
第一个参数: x轴的平移量，正方向向右
第二个参数: y轴的平移量，正方向向下
transform: translate(100px, 200px);transform: translateY(300px);transform: translateZ(300px);3.2 rotate: 旋转元素
参数代表旋转的角度，角度的单位是 deg、代表弧度的单位是 rad
transform: rotate(180deg);
/* 左右镜像 以Y为中心旋转 */
transform: rotateY(180deg);
* 上下镜像 */
transform: rotateX(180deg);3.3 scale 缩放
参数代表的是缩放比例，值为1 则为原始大小
transform: scale(1, 0.5);/* 参数只写一个，代表的是水平和竖直方向缩放相同的比例 *//* 在原来的基础上都放大3 */transform: scale(3);/* 负数代表的就是在指定轴上的镜像 */transform: scale(-0.5, 1);/* 在X的方向上 变胖*/transform: scaleX(2);/* 变高 */transform: scaleY(2);transform: scaleZ(2);/* 隐藏元素 */transform: scale(0);3.4 skew 倾斜
第一个参数: 水平轴的倾斜度数， 第二个参数: 竖直轴的倾斜度数
transform: skew(0, 30deg);/* 只设置一个参数 则只有水平轴倾斜有效 */transform: skew(30deg);/* 水平轴的倾斜度数 */transform: skewX(30deg);transform: skewY(30deg);
3.5 设置多个变换属性
同时设置多个变换属性，用空格隔开
transform: rotate(180deg) translateX(100px) scale(0.5);/* transform 的实现原理类似于矩阵，先旋转后平移和先平移后旋转结果是不同的 */transform: translateX(100px) rotate(180deg) scale(0.5);/* 设置transform的原点 变换原点还会影响缩放的位置*//* 值的带选项：center, top, bottom, left, right, 还可以写具体的长度值 */transform-origin: right bottom;/* 原点若x值和y值都为0，代表的是元素左上角的位置 *//* 第一参数值代表横向移动的距离，正数代表向右移动，负数代表向左移动 *//* 第二参数值代表纵向移动的距离，正数代表向下移动，负数代表向上移动 */transform-origin: 50px 100px;4.transition
是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态
/* all: 代表所有属性、none: 没有任何属性 *//* 带选项：linear: 匀速播放动画ease-in: 慢进匀速出ease-out: 匀速进慢出ease-in-out: 慢进慢出steps(n): 声明有n个过渡阶段*//* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */transition: all 3s linear 2s;4.1 使用方法
<!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>Document</title><style>.box {width: 200px;height: 200px;background-color: red;position: absolute;top: 0;left: 0;opacity: 1;transform: translateX(0px);/* 什么是transition？ *//* transition是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态 *//* 参考： *//* 使用过渡属性 */transition: all 2s linear;/* transition复合属性可以拆解成以下属性 *//* 过渡属性：声明一个需要产生过渡动画的属性 *//* 可以同时声明多个属性，属性之间用逗号隔开 *//* 待选项：all: 代表所有属性none: 没有任何属性*/transition-property: opacity, transform;transition-property: all;/* 补间动画的时长 */transition-duration: 1s;transition-duration: 1000ms;/* 补间动画的速度曲线 *//* 带选项：linear: 匀速播放动画ease-in: 慢进匀速出ease-out: 匀速进慢出ease-in-out: 慢进慢出steps(n): 声明有n个过渡阶段*/transition-timing-function: linear;/* 除了使用预制带选项，也可以手动赋值如下： */transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);/* steps 函数 */transition-timing-function: steps(5);/* 延迟播放动画的时间 */transition-delay: 1s;/* 使用transition属性设置所有的过渡动画属性 *//* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */transition: all 3s ease-in-out 2s;}.box:hover {/* opacity: 0; */transform: translateX(200px);}</style>
</head><body><div class="box"></div>
</body></html>4.2 transition 盒子下落
点击页面，让盒子依序下落
4.2.1 代码
<!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>Document</title><style>.box-container {display: flex;}.box {width: 30px;height: 30px;/* 初始值 */transition: all 2s linear;background-color: pink;transform: translateY(0px) rotate(0deg) scale(1);}.box-container.active>.box {transform: translateY(200px) rotate(720deg) scale(0.5);background-color: #0f0;}</style>
</head><body><div class="box-container"><div class="box"></div></div>
</body><script>let boxContainer = document.querySelector('.box-container')boxContainer.addEventListener('mouseenter', () => {if (!boxContainer.classList.contains('active')) {boxContainer.classList.add('active')}})boxContainer.addEventListener('mouseleave', () => {if (boxContainer.classList.contains('active')) {boxContainer.classList.remove('active')}})// 初始 box 盒子let html = ''for (let i = 0; i < 20; i++) {html += `<div class="box" style="transition-delay: ${i * 0.5}s"></div>`}boxContainer.innerHTML = html
</script></html>4.2.2 效果图
5. transform 和transition使用
使用transform和transition原理制作一个时钟的表盘，分别给钟表添加指针，并让指针转动，具体实现代码如下
<!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>Document</title><style>.clock {width: 400px;height: 400px;background-color: #000;border-radius: 50%;border: 20px solid #808080;position: relative;}.bg {width: 100%;height: 100%;position: relative;}.point {position: absolute;width: 10px;height: 10px;border-radius: 5px;background-color: #fff;left: calc(50% - 5px);top: 10px;transform-origin: center 190px;transform: rotate(0deg);}.hour {position: absolute;width: 20px;height: 30px;background-color: #00f;top: 170px;left: calc(50% - 10px);transform-origin: center bottom;transform: rotate(0deg);/* transition: all 1s linear; */}.hour::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 70px 10px;border-color: transparent transparent #00f transparent;position: absolute;top: -140px;}.minute {position: absolute;width: 12px;height: 70px;background-color: #0f0;top: 130px;left: calc(50% - 6px);transform-origin: center bottom;transform: rotate(0deg);transition: all 1s linear;}.minute::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 70px 6px;border-color: transparent transparent #0f0 transparent;position: absolute;top: -140px;}.second {position: absolute;width: 8px;height: 150px;background-color: #f00;top: 90px;left: calc(50% - 4px);transform-origin: center 110px;transform: rotate(0deg);transition: all 1s linear;}.second::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 70px 4px;border-color: transparent transparent #f00 transparent;position: absolute;top: -140px;}.cover {width: 32px;height: 32px;border-radius: 50%;background-color: #f00;position: absolute;left: calc(50% - 16px);top: calc(50% - 16px);}</style>
</head><body><div class="clock"><div class="bg"><div class="point"></div></div><div class="hour"></div><div class="minute"></div><div class="second"></div><div class="cover"></div></div>
</body><script>// 查询元素const bg = document.querySelector('.bg')const hEl = document.querySelector('.hour')const mEl = document.querySelector('.minute')const sEl = document.querySelector('.second')// 画点function drawPoint() {let html = ''for (let i = 0; i < 60; i++) {// 高度样式let height = i % 5 === 0 ? 'height: 20px;' : ''html += `<div class="point" style="transform: rotate(${i * 6}deg); ${height}"></div>`}bg.innerHTML = html}drawPoint()// 时间let hour = 11let minute = 30let second = 50// 指针套圈的圈数let hRound = 0let mRound = 0let sRound = 0// 渲染当前时刻function render() {// 计算每根针的旋转角度hEl.style.transform = `rotate(${30 * hour + 30 * (minute / 60) + 360 * hRound}deg)`mEl.style.transform = `rotate(${6 * minute + 360 * mRound}deg)`sEl.style.transform = `rotate(${6 * second + 360 * sRound}deg)`}render()setInterval(() => {// 计算时钟逻辑second++if (second >= 60) {second = 0sRound++minute++if (minute >= 60) {minute = 0mRound++hour++if (hour >= 12) {hour = 0hRound++}}}// 渲染时钟render()}, 1000)
</script></html>效果图：
二、jquery
1.jquery的作用：
jquery有以下主要功能：针对页面元素，jquery提供了很多操纵页面元素的函数，还有一些工具函数，方便一些运算，jquery可以充当发起网络请求的客户端工具。
2.基础用法
// 1. 查询并存储元素// 2. 操作元素，包括修改元素样式，绑定事件等let box = document.querySelector('.box')// 查询并构造一个jquery对象let $box = $('.box')console.log($box);// 修改样式$box.css('background-color', '#f00')3.eq() ,index() , get() , find() ,closest() 方法的使用
Eq(): 返回一个对应索引的jquery对象 $(‘li’).eq(0) 查询第一个li标签所代表的jquery对象
Index(): 返回一个jquery对象在另一个jQuery对象中的索引 $(‘li’).index( $(‘li:nth-child(2)’) )
Get(): 等价于用索引取值，获取一个指定索引位置的dom对象 $(‘li’).get(0) 等价于 $(‘li’)[0] 代表的是索引为0的dom对象
Find(): 查找一个jquery对象中的子元素的jquery对象 $(‘ul’).find(‘li’)
Closest(): 查询最近的父元素 $(‘li’).closest(‘ol’)
代码如下：
// 查询一个jquery对象let $boxs = $('.box')console.log($boxs);// eq() 该函数将返回对应索引位置的jquery对象let $box = $boxs.eq(0)console.log($box);// 用索引获取到的是dom对象let box = $boxs[0]console.log(box);// jquery对象类似一个数组，可以获取上述jquery对象的dom对象，如下：// 也可以通过函数get来获取，box = $boxs.get(0) // 与 $boxs[0]等价console.log(box);// index() 查询某个节点在集合中的索引console.log($boxs.index($box2));// find() 查询某个节点的后代节点let boxList = document.querySelector('.box-list')let box3 = boxList.querySelector('.box:nth-child(3)')console.log(box3);console.log($('.box-list').find('.box:nth-child(3)'));// closest 查询最近的父节点console.log($box2.closest('.box-list'));4.创建元素和插入元素
jquery中通过append、prepend、after、before添加元素，具体用法如下列代码所示：
let $box = $(`<div class="box box-yellow"></div>`)console.log($box);// 查找被插入的元素对象let $body = $(document.body)let $box2 = $('.box:nth-child(2)')console.log($box2);// append// prepend// 在元素内追加另一个元素$body.append($box)$body.prepend($box)// appendTo// prependTo// 将一个元素插入到另一个元素的子节点中$box.appendTo($body)$box.prependTo($body)// after// before// 一个元素的后面或前面添加另一个元素$box2.after($box)$box2.before($box)// insertAfter// insertBefore// 一个元素被插入到另一个元素的前或后面$box.insertAfter($box2)$box.insertBefore($box2)三，canvas画布
canvas是浏览器提供的一个标签，该标签可以用来绘制图像。canvas我们通常称为画布
1.canvas基础使用
在body中添加canvas标签，在js中查询canvas，获取获取画布上下文对象(所谓的上下文对象，就是用来直接控制画布绘画的对象)
注意：canvas 通过 width 和 height 来条件画布的宽高 ，不要使用样式设置画布宽高，通过样式修改后的宽高，不是真实的像素比例
<body>
<canvas width="800" height="600"></canvas>
</body>// 查询canvasconst canvas = document.querySelector('canvas')// 获取画布上下文对象(所谓的上下文对象，就是用来直接控制画布绘画的对象)const ctx = canvas.getContext('2d')
2.示例
canvas实现降雪动画练习：练习中通过canvas.width = window.innerWidth设置画布的宽度，高度也是通过类似的方法设置，使用Math.round（）函数控制雪球的大小，下落速度等。用到了动画函数requestAnimationFrame() ，会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
具体实现代码如下：
<!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>Document</title><style>body {margin: 0;overflow: hidden;}</style>
</head><body><canvas></canvas>
</body>
<script>const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')canvas.width = window.innerWidthcanvas.height = window.innerHeight// 配置对象// 用于方便的调整参数let config = {// 半径的最小和最大值r: {min: 5,max: 10},// 速度的最大值和最小值v: {min: 50,max: 200},// 生成小球的时间间隔spawnTime: {min: 0.1,max: 1},// 读取一个随机生成小球的间隔时间getSpawnTime() {return this.spawnTime.min + Math.random() * (this.spawnTime.max - this.spawnTime.min)}}// 雪球class SnowBall {// 坐标xy// 半径r// 速度 单位: px/sv// 是否活着life = trueconstructor() {// 随机雪球的属性this.r = Math.round(config.r.min + Math.random() * (config.r.max - config.r.min))this.x = Math.round(-this.r + Math.random() * (window.innerWidth + this.r - (-this.r)))this.y = -this.rthis.v = Math.round(config.v.min + Math.random() * (config.v.max - config.v.min))}// 渲染// 渲染自己到canvas上render() {if (!this.life) return// 设置颜色ctx.fillStyle = '#fff'// 设置路径ctx.beginPath()ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)ctx.closePath()// 填色ctx.fill()}// 每帧更新对象的逻辑写在update方法中update(deltaTime) {if (!this.life) returnthis.y += this.v * deltaTime// 判断雪球是否超出屏幕if (this.y >= canvas.height + this.r) {// 设置雪球让他死掉this.life = false}}}let lastTime = 0let deltaTime// 当前时间，用于计时let currentTime = 0// 雪球数组let balls = []// 生成小球的时间间隔let spawnTime = config.getSpawnTime()// 动画循环requestAnimationFrame(render)// 动画主循环function render(time) {// 计算时间deltaTime = (time - lastTime) * 0.001lastTime = time// 计时currentTime += deltaTime// 当前时间大于等于创建雪球的间隔时间if (currentTime >= spawnTime) {// 时间递减currentTime -= spawnTime// 创建雪球balls.push(new SnowBall())// 重新随机一个生成雪球的间隔时间spawnTime = config.getSpawnTime()}// 执行动画逻辑balls.forEach(sb => {sb.update(deltaTime)})// 清洗死掉的雪球balls = balls.filter(sb => sb.life)// 清空画布// 修改颜色ctx.fillStyle = '#000'ctx.fillRect(0, 0, canvas.width, canvas.height)balls.forEach(sb => {sb.render()})requestAnimationFrame(render)}
</script></html>效果图：
四.微信小程序
微信小程序是一个基于微信app为开发和运行环境的一个小性软件。
1.微信小程序基础
1.1常用标签：
<!-- page 标签相当于 html 中的 body -->
<page></page><!-- view 标签相当于 html 中的 div -->
<view></view><!-- text 相当于 html 中的 span -->
<text></text><!-- image 相当于 html 中的 img -->
<image></image><!-- block 是一个自身不会显示的标签 -->
<block></block>1.2 单位rem和rpx
rem：rem 是 html 中的长度单位，代表相对根节点(html)上字体的大小
rpx: rpx 是 微信wxml中的长度单位，rpx 真实大小的计算是参考的 750px 的屏幕宽度进行的,1rpx 的物理大小 = 750px 宽度屏幕上 1px 的大小.
若希望某个元素再不同的机型下能够等比例缩放，则请使用 rpx 作为单位，rpx和px的换算公式如下：
px的尺寸 = rpx下的尺寸 * (当前机型的屏幕宽 / 750)
rpx的尺寸 = px的尺寸 / (当前机型的屏幕宽 / 750)
2.微信api
2.1Page参数
data 数据存储
onload() 当页面加载中
onPullDownRefresh 下拉刷新回调函数
onReachBottom 触底回调函数
2.2 wx.xxx
wx.stopPullDownRefresh(); 停止下拉刷新
wx.showToast({}) 消息提示框
wx.showLoad() 显示消息加载框
wx.showModal() 显示对话框
...
3.模板语法
3.1条件渲染
可以根据条件判断，选择性的渲染页面
<view wx:for="{{table}}" wx:key="name"><text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text><!-- wx:if 指令的值为布尔表达式，为true是渲染该节点，否则不渲染 --><text wx:if="{{item.sex==='male'}}">男</text><!-- wx:if 可以和 wx:elif、wx:else 连用 --><text wx:elif="{{item.sex==='female'}}">女</text><text wx:else>其他</text>
</view>3.2 循环渲染
可以将数组数据循环显示到页面中
<!-- wx: 开头的写在标签头部的东西 称为指令 -->
<!-- array: 来自js data中的数组 -->
<!-- 使用 wx:for 一定要加上 wx:key，wx:key的值是array对象中的不可重复的属性 -->
<view wx:for="{{array}}" wx:key="id"><!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 --><!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前数组成员 -->{{index}}: {{item}}
</view>4.事件
4.1 事件的使用
bind：普通的绑定事件，并且事件可以冒泡
catch：绑定事件，但不会冒泡
capture-bind：捕获事件并可以冒泡
capture-catch：捕获事件并不冒泡
4.2 事件绑定语法
<!-- key: bind catch capture-bind capture-catch 中的任意一个 -->
<!-- eventName: 事件名称 -->
<!-- eventHandler: 事件处理程序，值是一个字符串，代表对应js文件的方法名 -->
<button key:eventName="eventHandler">btn</button><!-- 例如绑定点击事件 -->
<button bind:tap="btnClick">click</button><!-- bind 和 catch 后面的冒号可以省略 -->
<button catchtap="btnClick">click</button>5.生命周期
5.1 APP生命周期
onLaunch()：小程序初始化完成时触发，全局只触发一次。参数也可以使用wx.getLaunchOptionsSync 获取。一般在这个生命周期函数中执行 全局数据 的初始化操作。
onShow()：小程序启动，或从后台进入前台显示时触发，可以触发多次。
也可以使用 wx.onAppShow 绑定监听。
onHide()：小程序从前台进入后台时触发，可以触发多次。也可以使用 wx.onAppHide 绑定监听。
5.2 page的生命周期
打开页面的加载顺序：onLoad，onShow，onReady切换页面时只会加载onShow，onHide
onLoad(options)：页面加载时触发。只触发一次，可以在 options中获取到界面跳转的参数。
onShow()：页面显示时触发，可触发多次。
onReady()：页面初次渲染完成时触发。只触发一次
onHide()：页面隐藏时触发。 如wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等，可触发多次。
onUnload()：页面卸载时触发。如wx.navigateBack 到其他页面时。 一般在这个生命周期函数中执行清除定时器、closeSocket等操作。
总结
以上就是今天的总结内容，简单介绍了css动画、jquery、canvas以及微信小程序的基础用法和一些例子。
华清远见重庆中心——移动互联应用学习总结
目录
一、css动画
1.动画原理：
2.css代码中如何理解动画：
3. transform
3.1 translate 平移
3.2 rotate: 旋转元素
3.3 scale 缩放
3.4 skew 倾斜
3.5 设置多个变换属性
4.transition
4.1 使用方法
4.2 transition 盒子下落
5. transform 和transition使用
二、jquery
1.jquery的作用：
2.基础用法
3.eq() ,index() , get() , find() ,closest() 方法的使用
4.创建元素和插入元素
三，canvas画布
1.canvas基础使用
2.示例
四.微信小程序
1.微信小程序基础
1.1常用标签：
1.2 单位rem和rpx
2.微信api
2.1Page参数
2.2 wx.xxx
3.模板语法
3.1条件渲染
3.2 循环渲染
4.事件
4.1 事件的使用
4.2 事件绑定语法
5.生命周期
5.1 APP生命周期
5.2 page的生命周期
总结
一、css动画
1.动画原理：
连续的播放多张图片，形成一个连贯的动画
2.css代码中如何理解动画：
一个元素存在多个css状态，连续的播放改元素的这些css状态，将形成一组动画，这就是css动画
3. transform
3.1 translate 平移
第一个参数: x轴的平移量，正方向向右
第二个参数: y轴的平移量，正方向向下
transform: translate(100px, 200px);transform: translateY(300px);transform: translateZ(300px);3.2 rotate: 旋转元素
参数代表旋转的角度，角度的单位是 deg、代表弧度的单位是 rad
transform: rotate(180deg);
/* 左右镜像 以Y为中心旋转 */
transform: rotateY(180deg);
* 上下镜像 */
transform: rotateX(180deg);3.3 scale 缩放
参数代表的是缩放比例，值为1 则为原始大小
transform: scale(1, 0.5);/* 参数只写一个，代表的是水平和竖直方向缩放相同的比例 *//* 在原来的基础上都放大3 */transform: scale(3);/* 负数代表的就是在指定轴上的镜像 */transform: scale(-0.5, 1);/* 在X的方向上 变胖*/transform: scaleX(2);/* 变高 */transform: scaleY(2);transform: scaleZ(2);/* 隐藏元素 */transform: scale(0);3.4 skew 倾斜
第一个参数: 水平轴的倾斜度数， 第二个参数: 竖直轴的倾斜度数
transform: skew(0, 30deg);/* 只设置一个参数 则只有水平轴倾斜有效 */transform: skew(30deg);/* 水平轴的倾斜度数 */transform: skewX(30deg);transform: skewY(30deg);
3.5 设置多个变换属性
同时设置多个变换属性，用空格隔开
transform: rotate(180deg) translateX(100px) scale(0.5);/* transform 的实现原理类似于矩阵，先旋转后平移和先平移后旋转结果是不同的 */transform: translateX(100px) rotate(180deg) scale(0.5);/* 设置transform的原点 变换原点还会影响缩放的位置*//* 值的带选项：center, top, bottom, left, right, 还可以写具体的长度值 */transform-origin: right bottom;/* 原点若x值和y值都为0，代表的是元素左上角的位置 *//* 第一参数值代表横向移动的距离，正数代表向右移动，负数代表向左移动 *//* 第二参数值代表纵向移动的距离，正数代表向下移动，负数代表向上移动 */transform-origin: 50px 100px;4.transition
是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态
/* all: 代表所有属性、none: 没有任何属性 *//* 带选项：linear: 匀速播放动画ease-in: 慢进匀速出ease-out: 匀速进慢出ease-in-out: 慢进慢出steps(n): 声明有n个过渡阶段*//* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */transition: all 3s linear 2s;4.1 使用方法
<!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>Document</title><style>.box {width: 200px;height: 200px;background-color: red;position: absolute;top: 0;left: 0;opacity: 1;transform: translateX(0px);/* 什么是transition？ *//* transition是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态 *//* 参考： *//* 使用过渡属性 */transition: all 2s linear;/* transition复合属性可以拆解成以下属性 *//* 过渡属性：声明一个需要产生过渡动画的属性 *//* 可以同时声明多个属性，属性之间用逗号隔开 *//* 待选项：all: 代表所有属性none: 没有任何属性*/transition-property: opacity, transform;transition-property: all;/* 补间动画的时长 */transition-duration: 1s;transition-duration: 1000ms;/* 补间动画的速度曲线 *//* 带选项：linear: 匀速播放动画ease-in: 慢进匀速出ease-out: 匀速进慢出ease-in-out: 慢进慢出steps(n): 声明有n个过渡阶段*/transition-timing-function: linear;/* 除了使用预制带选项，也可以手动赋值如下： */transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);/* steps 函数 */transition-timing-function: steps(5);/* 延迟播放动画的时间 */transition-delay: 1s;/* 使用transition属性设置所有的过渡动画属性 *//* 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 */transition: all 3s ease-in-out 2s;}.box:hover {/* opacity: 0; */transform: translateX(200px);}</style>
</head><body><div class="box"></div>
</body></html>4.2 transition 盒子下落
点击页面，让盒子依序下落
4.2.1 代码
<!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>Document</title><style>.box-container {display: flex;}.box {width: 30px;height: 30px;/* 初始值 */transition: all 2s linear;background-color: pink;transform: translateY(0px) rotate(0deg) scale(1);}.box-container.active>.box {transform: translateY(200px) rotate(720deg) scale(0.5);background-color: #0f0;}</style>
</head><body><div class="box-container"><div class="box"></div></div>
</body><script>let boxContainer = document.querySelector('.box-container')boxContainer.addEventListener('mouseenter', () => {if (!boxContainer.classList.contains('active')) {boxContainer.classList.add('active')}})boxContainer.addEventListener('mouseleave', () => {if (boxContainer.classList.contains('active')) {boxContainer.classList.remove('active')}})// 初始 box 盒子let html = ''for (let i = 0; i < 20; i++) {html += `<div class="box" style="transition-delay: ${i * 0.5}s"></div>`}boxContainer.innerHTML = html
</script></html>4.2.2 效果图
5. transform 和transition使用
使用transform和transition原理制作一个时钟的表盘，分别给钟表添加指针，并让指针转动，具体实现代码如下
<!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>Document</title><style>.clock {width: 400px;height: 400px;background-color: #000;border-radius: 50%;border: 20px solid #808080;position: relative;}.bg {width: 100%;height: 100%;position: relative;}.point {position: absolute;width: 10px;height: 10px;border-radius: 5px;background-color: #fff;left: calc(50% - 5px);top: 10px;transform-origin: center 190px;transform: rotate(0deg);}.hour {position: absolute;width: 20px;height: 30px;background-color: #00f;top: 170px;left: calc(50% - 10px);transform-origin: center bottom;transform: rotate(0deg);/* transition: all 1s linear; */}.hour::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 70px 10px;border-color: transparent transparent #00f transparent;position: absolute;top: -140px;}.minute {position: absolute;width: 12px;height: 70px;background-color: #0f0;top: 130px;left: calc(50% - 6px);transform-origin: center bottom;transform: rotate(0deg);transition: all 1s linear;}.minute::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 70px 6px;border-color: transparent transparent #0f0 transparent;position: absolute;top: -140px;}.second {position: absolute;width: 8px;height: 150px;background-color: #f00;top: 90px;left: calc(50% - 4px);transform-origin: center 110px;transform: rotate(0deg);transition: all 1s linear;}.second::before {content: '';display: block;width: 0;height: 0;border-style: solid;border-width: 70px 4px;border-color: transparent transparent #f00 transparent;position: absolute;top: -140px;}.cover {width: 32px;height: 32px;border-radius: 50%;background-color: #f00;position: absolute;left: calc(50% - 16px);top: calc(50% - 16px);}</style>
</head><body><div class="clock"><div class="bg"><div class="point"></div></div><div class="hour"></div><div class="minute"></div><div class="second"></div><div class="cover"></div></div>
</body><script>// 查询元素const bg = document.querySelector('.bg')const hEl = document.querySelector('.hour')const mEl = document.querySelector('.minute')const sEl = document.querySelector('.second')// 画点function drawPoint() {let html = ''for (let i = 0; i < 60; i++) {// 高度样式let height = i % 5 === 0 ? 'height: 20px;' : ''html += `<div class="point" style="transform: rotate(${i * 6}deg); ${height}"></div>`}bg.innerHTML = html}drawPoint()// 时间let hour = 11let minute = 30let second = 50// 指针套圈的圈数let hRound = 0let mRound = 0let sRound = 0// 渲染当前时刻function render() {// 计算每根针的旋转角度hEl.style.transform = `rotate(${30 * hour + 30 * (minute / 60) + 360 * hRound}deg)`mEl.style.transform = `rotate(${6 * minute + 360 * mRound}deg)`sEl.style.transform = `rotate(${6 * second + 360 * sRound}deg)`}render()setInterval(() => {// 计算时钟逻辑second++if (second >= 60) {second = 0sRound++minute++if (minute >= 60) {minute = 0mRound++hour++if (hour >= 12) {hour = 0hRound++}}}// 渲染时钟render()}, 1000)
</script></html>效果图：
二、jquery
1.jquery的作用：
jquery有以下主要功能：针对页面元素，jquery提供了很多操纵页面元素的函数，还有一些工具函数，方便一些运算，jquery可以充当发起网络请求的客户端工具。
2.基础用法
// 1. 查询并存储元素// 2. 操作元素，包括修改元素样式，绑定事件等let box = document.querySelector('.box')// 查询并构造一个jquery对象let $box = $('.box')console.log($box);// 修改样式$box.css('background-color', '#f00')3.eq() ,index() , get() , find() ,closest() 方法的使用
Eq(): 返回一个对应索引的jquery对象 $(‘li’).eq(0) 查询第一个li标签所代表的jquery对象
Index(): 返回一个jquery对象在另一个jQuery对象中的索引 $(‘li’).index( $(‘li:nth-child(2)’) )
Get(): 等价于用索引取值，获取一个指定索引位置的dom对象 $(‘li’).get(0) 等价于 $(‘li’)[0] 代表的是索引为0的dom对象
Find(): 查找一个jquery对象中的子元素的jquery对象 $(‘ul’).find(‘li’)
Closest(): 查询最近的父元素 $(‘li’).closest(‘ol’)
代码如下：
// 查询一个jquery对象let $boxs = $('.box')console.log($boxs);// eq() 该函数将返回对应索引位置的jquery对象let $box = $boxs.eq(0)console.log($box);// 用索引获取到的是dom对象let box = $boxs[0]console.log(box);// jquery对象类似一个数组，可以获取上述jquery对象的dom对象，如下：// 也可以通过函数get来获取，box = $boxs.get(0) // 与 $boxs[0]等价console.log(box);// index() 查询某个节点在集合中的索引console.log($boxs.index($box2));// find() 查询某个节点的后代节点let boxList = document.querySelector('.box-list')let box3 = boxList.querySelector('.box:nth-child(3)')console.log(box3);console.log($('.box-list').find('.box:nth-child(3)'));// closest 查询最近的父节点console.log($box2.closest('.box-list'));4.创建元素和插入元素
jquery中通过append、prepend、after、before添加元素，具体用法如下列代码所示：
let $box = $(`<div class="box box-yellow"></div>`)console.log($box);// 查找被插入的元素对象let $body = $(document.body)let $box2 = $('.box:nth-child(2)')console.log($box2);// append// prepend// 在元素内追加另一个元素$body.append($box)$body.prepend($box)// appendTo// prependTo// 将一个元素插入到另一个元素的子节点中$box.appendTo($body)$box.prependTo($body)// after// before// 一个元素的后面或前面添加另一个元素$box2.after($box)$box2.before($box)// insertAfter// insertBefore// 一个元素被插入到另一个元素的前或后面$box.insertAfter($box2)$box.insertBefore($box2)三，canvas画布
canvas是浏览器提供的一个标签，该标签可以用来绘制图像。canvas我们通常称为画布
1.canvas基础使用
在body中添加canvas标签，在js中查询canvas，获取获取画布上下文对象(所谓的上下文对象，就是用来直接控制画布绘画的对象)
注意：canvas 通过 width 和 height 来条件画布的宽高 ，不要使用样式设置画布宽高，通过样式修改后的宽高，不是真实的像素比例
<body>
<canvas width="800" height="600"></canvas>
</body>// 查询canvasconst canvas = document.querySelector('canvas')// 获取画布上下文对象(所谓的上下文对象，就是用来直接控制画布绘画的对象)const ctx = canvas.getContext('2d')
2.示例
canvas实现降雪动画练习：练习中通过canvas.width = window.innerWidth设置画布的宽度，高度也是通过类似的方法设置，使用Math.round（）函数控制雪球的大小，下落速度等。用到了动画函数requestAnimationFrame() ，会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
具体实现代码如下：
<!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>Document</title><style>body {margin: 0;overflow: hidden;}</style>
</head><body><canvas></canvas>
</body>
<script>const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')canvas.width = window.innerWidthcanvas.height = window.innerHeight// 配置对象// 用于方便的调整参数let config = {// 半径的最小和最大值r: {min: 5,max: 10},// 速度的最大值和最小值v: {min: 50,max: 200},// 生成小球的时间间隔spawnTime: {min: 0.1,max: 1},// 读取一个随机生成小球的间隔时间getSpawnTime() {return this.spawnTime.min + Math.random() * (this.spawnTime.max - this.spawnTime.min)}}// 雪球class SnowBall {// 坐标xy// 半径r// 速度 单位: px/sv// 是否活着life = trueconstructor() {// 随机雪球的属性this.r = Math.round(config.r.min + Math.random() * (config.r.max - config.r.min))this.x = Math.round(-this.r + Math.random() * (window.innerWidth + this.r - (-this.r)))this.y = -this.rthis.v = Math.round(config.v.min + Math.random() * (config.v.max - config.v.min))}// 渲染// 渲染自己到canvas上render() {if (!this.life) return// 设置颜色ctx.fillStyle = '#fff'// 设置路径ctx.beginPath()ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)ctx.closePath()// 填色ctx.fill()}// 每帧更新对象的逻辑写在update方法中update(deltaTime) {if (!this.life) returnthis.y += this.v * deltaTime// 判断雪球是否超出屏幕if (this.y >= canvas.height + this.r) {// 设置雪球让他死掉this.life = false}}}let lastTime = 0let deltaTime// 当前时间，用于计时let currentTime = 0// 雪球数组let balls = []// 生成小球的时间间隔let spawnTime = config.getSpawnTime()// 动画循环requestAnimationFrame(render)// 动画主循环function render(time) {// 计算时间deltaTime = (time - lastTime) * 0.001lastTime = time// 计时currentTime += deltaTime// 当前时间大于等于创建雪球的间隔时间if (currentTime >= spawnTime) {// 时间递减currentTime -= spawnTime// 创建雪球balls.push(new SnowBall())// 重新随机一个生成雪球的间隔时间spawnTime = config.getSpawnTime()}// 执行动画逻辑balls.forEach(sb => {sb.update(deltaTime)})// 清洗死掉的雪球balls = balls.filter(sb => sb.life)// 清空画布// 修改颜色ctx.fillStyle = '#000'ctx.fillRect(0, 0, canvas.width, canvas.height)balls.forEach(sb => {sb.render()})requestAnimationFrame(render)}
</script></html>效果图：
四.微信小程序
微信小程序是一个基于微信app为开发和运行环境的一个小性软件。
1.微信小程序基础
1.1常用标签：
<!-- page 标签相当于 html 中的 body -->
<page></page><!-- view 标签相当于 html 中的 div -->
<view></view><!-- text 相当于 html 中的 span -->
<text></text><!-- image 相当于 html 中的 img -->
<image></image><!-- block 是一个自身不会显示的标签 -->
<block></block>1.2 单位rem和rpx
rem：rem 是 html 中的长度单位，代表相对根节点(html)上字体的大小
rpx: rpx 是 微信wxml中的长度单位，rpx 真实大小的计算是参考的 750px 的屏幕宽度进行的,1rpx 的物理大小 = 750px 宽度屏幕上 1px 的大小.
若希望某个元素再不同的机型下能够等比例缩放，则请使用 rpx 作为单位，rpx和px的换算公式如下：
px的尺寸 = rpx下的尺寸 * (当前机型的屏幕宽 / 750)
rpx的尺寸 = px的尺寸 / (当前机型的屏幕宽 / 750)
2.微信api
2.1Page参数
data 数据存储
onload() 当页面加载中
onPullDownRefresh 下拉刷新回调函数
onReachBottom 触底回调函数
2.2 wx.xxx
wx.stopPullDownRefresh(); 停止下拉刷新
wx.showToast({}) 消息提示框
wx.showLoad() 显示消息加载框
wx.showModal() 显示对话框
...
3.模板语法
3.1条件渲染
可以根据条件判断，选择性的渲染页面
<view wx:for="{{table}}" wx:key="name"><text>{{index}}: 姓名 = {{item.name}}; 年龄 = {{item.age}}; 性别 = </text><!-- wx:if 指令的值为布尔表达式，为true是渲染该节点，否则不渲染 --><text wx:if="{{item.sex==='male'}}">男</text><!-- wx:if 可以和 wx:elif、wx:else 连用 --><text wx:elif="{{item.sex==='female'}}">女</text><text wx:else>其他</text>
</view>3.2 循环渲染
可以将数组数据循环显示到页面中
<!-- wx: 开头的写在标签头部的东西 称为指令 -->
<!-- array: 来自js data中的数组 -->
<!-- 使用 wx:for 一定要加上 wx:key，wx:key的值是array对象中的不可重复的属性 -->
<view wx:for="{{array}}" wx:key="id"><!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 --><!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前数组成员 -->{{index}}: {{item}}
</view>4.事件
4.1 事件的使用
bind：普通的绑定事件，并且事件可以冒泡
catch：绑定事件，但不会冒泡
capture-bind：捕获事件并可以冒泡
capture-catch：捕获事件并不冒泡
4.2 事件绑定语法
<!-- key: bind catch capture-bind capture-catch 中的任意一个 -->
<!-- eventName: 事件名称 -->
<!-- eventHandler: 事件处理程序，值是一个字符串，代表对应js文件的方法名 -->
<button key:eventName="eventHandler">btn</button><!-- 例如绑定点击事件 -->
<button bind:tap="btnClick">click</button><!-- bind 和 catch 后面的冒号可以省略 -->
<button catchtap="btnClick">click</button>5.生命周期
5.1 APP生命周期
onLaunch()：小程序初始化完成时触发，全局只触发一次。参数也可以使用wx.getLaunchOptionsSync 获取。一般在这个生命周期函数中执行 全局数据 的初始化操作。
onShow()：小程序启动，或从后台进入前台显示时触发，可以触发多次。
也可以使用 wx.onAppShow 绑定监听。
onHide()：小程序从前台进入后台时触发，可以触发多次。也可以使用 wx.onAppHide 绑定监听。
5.2 page的生命周期
打开页面的加载顺序：onLoad，onShow，onReady切换页面时只会加载onShow，onHide
onLoad(options)：页面加载时触发。只触发一次，可以在 options中获取到界面跳转的参数。
onShow()：页面显示时触发，可触发多次。
onReady()：页面初次渲染完成时触发。只触发一次
onHide()：页面隐藏时触发。 如wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等，可触发多次。
onUnload()：页面卸载时触发。如wx.navigateBack 到其他页面时。 一般在这个生命周期函数中执行清除定时器、closeSocket等操作。
总结
以上就是今天的总结内容，简单介绍了css动画、jquery、canvas以及微信小程序的基础用法和一些例子。