- 博客(868)
- 资源 (32)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 类型“EventTarget”上不存在属性“clientHeight”。
类型“EventTarget”上不存在属性“clientHeight”。
2022-07-11 11:05:18
2983
原创 安装zsh后报错【env: node: No such file or directory】
安装zsh后报错【env: node: No such file or directory】
2022-07-11 10:27:34
1331
1
原创 Ts数组遍历报错：this expression is not callable
Ts数组遍历报错：this expression is not callable
2022-05-17 15:27:46
2617
1
原创 Login.js:33 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘push‘)
Login.js:33 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')
2022-05-17 08:51:24
1687
原创 Matched leaf route at location “/“ does not have an element. This means it will render an ＜Outlet /＞
Matched leaf route at location "/" does not have an element. This means it will render an <Outlet />
2022-05-16 16:46:55
2625
原创 export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-rou ter-dom‘ (possible exports:
export 'Switch' (imported as 'Switch') was not found in 'react-rou ter-dom' (possible exports:
2022-05-16 16:43:45
661
原创 yarn：info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
2021-08-08 10:51:01
622
利用Swiper制作手机全屏相册
1. slideTo()：控制Swiper切换到指定slide。
2. touchMove：移动端触摸移动事件
3. watchSlidesProgress：开启这个参数来计算每个slide的progress(进度、进程)，Swiper的progress无需设置即开启。
4. swiper的progress值为0-1，当前展示的slide的progress值为0，下一个为-1，上一个为1，以此类推。
5. setTranslate()
当设置wrapper的偏移量时执行。可选swiper对象和wrapper的偏移量作为参数。
6. activeIndex。返回当前活动块(激活块)的索引。loop模式下注意该值会被加上复制的slide数。
2020-03-08
JavaScript实现像素鸟
下载后可以在webstrom中打开运行。
1. underscore中random产生随机数、without从数组中移除数据
2. 在游戏开发的时候，应该始终用面向对象的思想来做。有一个游戏管控大类（Game）。
3. 用一个json文件，保存我们需要的图片数据，方便在内存中创建每一张图片对象。
4. canvas的宽度和高度不能固定，根据电脑动态设置。
5. 使用ES6语法创建类。
6. FPS （每秒传输帧数(Frames Per Second)） 刷新率FNO 记录当前走过总帧数
7. 在每一次canvas绘制之前，都要进行清屏操作。ctx.clearRect(0, 0, canvas.width, canvas.height);
8. 资源加载。通过AJAX加载资源。静态资源类StaticResourceUtil.js用来加载本地图片。
9. 图片绘制，背景类BackGround.js，用来绘制背景。
通过图片的移动实现游戏的移动。
图片的移动即不断改变图片的X坐标，不断绘制。
图片的无缝移动：绘制图片的两倍，当全部图片宽度走完的时候，将图片X重新改为0.
背景图的速度设置，事物离得越近速度越快，越远速度越慢。
10. 取整、字符串转数字：parseInt(txt);
11. 管道绘制，管道类Pipe.js，用来绘制管道。
管道的高度、位置要随机生成。
但要有最小高度与最大高度。
需要一个管道数组来保存所有的管道。
当管道移出画布，需要将管道从管道数组中移除。
12. 用gameEnd来标志游戏是否结束。
13. 鸟的绘制，鸟类bird.js，用来绘制鸟。
根据帧率不断煽动翅膀。
14. 模拟重力加速度，利用dY，不断更新鸟的y值。导致鸟的下落越来越快。
15. 鸟的旋转。利用save和restore保存和恢复画布的状态。
利用translate旋转画布的x、y轴，旋转鸟恢复。
16. 鼠标点击事件，在鸟的上升过程中，固定值模拟阻力。
17. 边界检测。上边界ycanvas.height - 地板高度 - 鸟高度
18. 碰撞检测。利用管道进行检测。首先判断鸟有没有进到管道竖着的区域，再判断鸟是在空白天空区域还是管道区域，从而进行检测。
19. 小鸟死亡，在死亡的地方绘制鲜血。鲜血撒完游戏结束。
20. 分数类。根据几位判断分数显示基准线。判断小鸟是否飞到管道竖着的部分，如果飞过，则分数加一。
21. 求一个数字有几位。num.toString().length
22. 游戏初始化。设置背景及图片，点击开始后div隐藏。
2020-03-06
面向对象的方法实现贪吃蛇
利用面向对象的方法，实现贪吃蛇。
1. 利用面向对象的思想实现——一个食物对象、一个蛇对象、一个游戏总控对象。
2. 在使用××.prototype= {}重写原型对象的时候，一定要加上一句constructor:该对象。不然会造成实例化出来的实例的constructor为object。
3. 在underscore中，使用_.random(a,b)即可获得a-b中的一个随机数。
4. 在求食物的随机位置的时候，用到了panel.clientHeight/this.height - 1) * this.height。
原理是使用盒子的高度/小球的高度，可以算得最多放多少个小球。因为要控制小球不能超过边界，所以总数量要减去1，数量×高度即为随机位置的最大值。
5. 在蛇对象中，用body数组存放蛇身体每一个部分对象。蛇的绘制过程就是遍历body，在面板上绘制。
6. 蛇的移动分为两部分。
① 蛇节移动到前一个蛇节的位置。直到蛇头后一个蛇节移动到蛇头的位置。
② 根据direction判断蛇头如何移动。
注意：在游戏绘制的过程中，界面的每一次绘制都要**删除**之前的绘制，不然会叠加到一起。
7. 在蛇的闭包中建一个局部数组，存储蛇对象，可以更加方便的删除操作。
8. 只有在原型对象中的方法和属性，外界是可以调用的。
9. 蛇的移动（动画）必然需要定时器协助。定时器的时间，即象征着刷新速度，也就是难度。
10. this所在的函数在哪一个对象中，this就指向谁。单独写一个函数的时候，如果调用之前对象的this，需要备份指针（将对象的this赋值给另一个变量）。
11. JavaScript原生的键盘按下事件（keydown） 中，事件有一个keyCode属性，其值代表按下的键。其中：37—left、38—top、39—right、40—bottom。
12. 边界控制。通过判断蛇头与最大X和Y的关系，判断是否碰到边界。
13. confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
14. window.location.reload(); 重新加载当前文档
15. window.close() 方法用于关闭浏览器窗口。
16. 与食物的碰撞检测：如果蛇头和食物坐标重叠，将蛇尾添加到body中。并重新绘制一个食物点，将之前的食物删掉。
2020-03-04
通过面向对象利用JS实现五彩小球
利用js实现五彩小球特效
通过面向对象的方法实现
underscore库的使用：without数组，将制定元素从数组中删除
时器中要清除上一帧中产生的动画效果
2020-02-18
CSS模拟实现QQ浏览器
1. 结合fullpage.js实现全屏滚动
2. CSS中linear-gradient() 函数用于创建一个线性渐变的 "图像"。
3. 背靠背效果：
4. 圆环旋转效果
5. 落空效果
2020-02-15
CheckWeather.zip
利用Python和PyQt5实现天气查询小系统，实现了简单的查找一个城市的天气并显示，显示最近五天的最高、最低温度、风向、风力以及天气状况，同时显示一条温柔的建议
2019-11-13
React前后端项目实战.zip
安装一下依赖，配置好数据库即可运行
项目分为三端
① Web服务器 ② 客户端 ③ 后台管理系统
这里主要做了后台管理系统和服务器
前后端分离的项目中，后端Web服务器的作用是：给客户端提供接口，和数据库进行连接。
2021-01-06
hk-todo-react版本
1. 日程表案例无论是在react中，还是在vue中都是十分经典的入门级Demo，非常有助于帮助我们理解和吸收脚手架开发思想，以及vuex或者react-redux状态管理。
2. 我们先不用redux状态管理方式实现, 而是采用传统的方式实现, 看看多组件数据如何传递和回传?
2020-12-18
使用vuex实现todoList改造
深度监视
概念：为了发现对象内部值的变化，可以在选项参数中指定 deep: true ；注意监听数组的变动不需要这么做
方法使用
第一个handler：其值是一个回调函数；即监听到变化时应该执行的函数
第二个是deep：其值是true或false；确认是否深入监听（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数
插槽使用
概念：和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的 元素可以很愉快的帮助我们实现
2020-07-12
vue实现TodoList.zip
深度监视
概念：为了发现对象内部值的变化，可以在选项参数中指定 deep: true ；注意监听数组的变动不需要这么做
方法使用
第一个handler：其值是一个回调函数；即监听到变化时应该执行的函数
第二个是deep：其值是true或false；确认是否深入监听（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数
插槽使用
概念：和 HTML 元素一样，我们经常需要向一个组件传递内容，Vue 自定义的 元素可以很愉快的帮助我们实现
2020-07-07
部分美团静态首页代码
好久没写html界面了，一个工作的朋友让我帮他写一下，写了写，果然生疏的很，不过还是完成了。 < > <div class="main-middle-conten
2020-04-22
部分美团静态首页.zip
好久没写html界面了，一个工作的朋友让我帮他写一下，写了写，果然生疏的很，不过还是完成了。 <div class="main-main-content-top-left">
<div class="main-main-content-top-left-prev"><</div>
<div class="main-main-content-top-left-next">></div>
</div>
<div class="main-main-content-top-right"></div>
</div>
<div class="main-middle-content-foot">
<div class="main-middle-content-foot-left"></div>
<div class="main-middle-content-foot-middle"></div>
<div class="main-middle-content-foot-right"></div>
</div>
</div>
</div>
<div class="main-right">
<div class="main-right-content">
<div class="main-right-content-top">
<div class="main-right-content-top-img"></div>
<div class="main-right-content-top-content">Hi！你好</div>
<div class="main-right-content-top-login">注册</div>
<div class="main-right-content-top-register">立即登录</div>
</div>
<div class="main-right-content-foot">
<div cl
2020-04-22
Node实战—幼教平台
项目初始化
初始化项目结构
配置babel
新建main.js
babel高阶语法转化演示
配置项目依赖
新建public，views文件夹, 引入静态资源
集成静态资源文件
配置全局路径
配置新的模板引擎
配置全局路由
配置nodemon
配置公共代码模板
前提
配置基础模板文件
配置404界面
配置前台界面
轮播图版块
接口处理
新增一张轮播图
获取轮播图数据
查询一条轮播图数据
修改轮播图
根据id删除一条录播图记录
添加轮播图处理
后台
后台添加轮播图
后台修改轮播图
后台删除轮播图
formData
前台
用户中心版块
用户模型
接口处理
后台管理员生成
用户名和密码登录
退出登录
权限控制
分页插件：twbsPagination
2020-04-17
Node实现留言板功能
1. 执行`npm init` 初始化包
2. 安装所需依赖`>npm i body-parser ejs express moment morgan --save`
3. 格式化时间`moment(new Date()).format('YYYY-MM-DD HH:mm:ss')`
4. ejs 模板引擎的运用
```javascript
// 注册模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
```
5. 设置用户表单提交数据的接收中间件
```javascript
// 设置用户表单提交数据的接收中间件,所有提交的信息都会保存在req.body
app.use(bodyParser.urlencoded({extended:false}));
```
6. 界面重定向
```javascript
// 回到主界面 重定向
res.redirect('/');
```
2020-03-22
bootstrap响应式布局
1. CSS 相邻兄弟选择器 +
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
2. 手机字体图标：`content: '\e958';`
电话字体图标：`content: '\e942';`
3. bootstrap最外层伸缩容器：`class="container"`
4. bootstrap伸缩布局并居中：`d-flex justify-content-center align-items-center`
5. `jQuery.data(element,[key],[value])`：在元素上存放数据,返回jQuery对象。
例如：在index界面中
```javascript
<div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div>
<div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" data-lg-img="images/slide_02_2000x410.jpg"></div>
<div class="carousel-item" data-sm-img="images/slide_03_900x410.jpg" data-lg-img="images/slide_03_2000x410.jpg"></div>
```
在 js中，可以通过
```javascript
$('.carousel-item').data('lg-img')
```
获取路径值。
6. bootstrap中圆角`rounded-circle`
7. 可以使用`order-*`调整显示顺序
8. 伸缩布局两步走`container+row`
```javascript
<div class="container">
<div class="row">
***
</div>
</div>
```
9. 可以利用`offset`设置偏移量调整位置
10. 将jQuery对象转换为js对象可以直接通过下标取
11. 轮播图可以通过`.carousel('prev')`和`.carousel('next')`触发前后滑动事件
12. jQuery中缩小元素查找范围
```javascript
let $ul = $("#lk_product .nav");
let $allLis = $(".nav-item", $ul);
```
2020-03-19
利用Swiper制作手机新闻界面
1. 做移动端开发需要适口
2. freeMode：默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
3. freeModeSticky：使得freeMode也能自动贴合。与freeMode一般配合使用。
4. slidesPerView：设置slider容器能够同时显示的slides数量(carousel模式)。
可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 'auto'目前还不支持多行模式（当slidesPerColumn > 1）
5. 绑定分页器
6. text-indent 规定首行缩进
7. 自动轮播设置autoplay中delay
8. 去除移动端点击产生的高亮事件
9. slideChangeTransitionStart()：回调函数，swiper从当前slide开始过渡到另一个slide时执行。
在这个方法中，activeIndex代表当前滑动的下标
10. jQuery中直接用index获取当前元素下标
11. eq获取当前兄弟元素中第几个
2020-03-08
腾讯云服务器Nginx配置启动后输入IP之后无法访问到Nginx的首页
2021-08-03
TA创建的收藏夹 TA关注的收藏夹
TA关注的人