- 博客(16)
- 收藏
- 关注
RSS订阅原创 今天分享一个比较有意思的项目
想要实现这个效果很简单，只需要用到css属性中的 mix-blend-mode: screen;动态的火焰效果其实是一个视频，把三国演义覆盖在视频上。然后给上mix-blend-mode: screen;链接: https://caiyun.139.com/m/i?有兴趣的小伙伴可以尝试尝试，想要火焰视频的可以自行去移动云盘下载。复制内容打开中国移动云盘手机APP，操作更方便哦。让字体背景有动态火焰效果。
2024-06-24 14:22:15
200
原创 监听dom元素发生变化
我最近做一个项目，利用原生js自己封装下拉框组件时遇到一个问题。当下拉框的数据发生改变时我得把改变的数据显示在一个span标签内展示。而我封装的下拉框没有用到input标签，我是利用一个div元素做了一个。这是我自己用来监听我封装的下拉框的组件的函数。MutationObserver不仅可以监听DOM对象的子节点的变化（childList。当时我在网上搜了一下，发现可以用 MutationObserver这个构造函数进行监听。），还可以监听属性的变化（attributes。上面的代码，大家可以参考参考。
2024-03-18 10:41:21
443
1
原创 css自定义checkBox的样式
2.我搜了一下发现，用css来直接处理input标签只能进行简单的设置，比如改变框的大小。像那些背景颜色之类的是改变不了的。这就需要我们换个思路了，我们可以自己用容器自己写一个复选框样式，然后和checkbox进行脚本的绑定。这里的容器我们可以使用label标签，在用label的for属性和checkbox进行绑定。在把一开始的checkbox给隐藏起来，就可以实现自定义checkbox。1.最近在写项目的时候碰到要对checkbox的复选框的样式进行修改。想要什么样的样式，可以修改对应的css代码。
2024-01-02 16:06:35
623
原创 uniapp利用内置组件live-pusher和video实现app端的简单视频聊天功能
完成上面的操作之后，就可以配置我们的nginx了，找到nginx.conf文件。然后在live-pusher输入我们的rtmp地址就行自己电脑的ip地址加上配置好的端口 1935（这样我们的单项视频聊天就实现了，要想实现双向的，就重复上面的操作，再建一个组件进行推流和拉流就可以了。网上有很多的搭建流媒体的软件。我这里用的是nginx搭建的流媒体服务。2.当我们把前端页面搭建之后，就得考虑到推流的视频流放在哪里，拉流从哪里拉到视频流。js代码的方法都是uniapp官方提供的，用来控制推流的。
2023-09-20 10:57:36
2186
1
原创 使用svg标签 解决实现图片的放大，缩小，和拖拽效果的问题。
viewBox的前两个属性是截图框的位置，而后面的两个属性是”截图框“的大小。只要后面监听鼠标的滚动事件，向上就是把viewBox的后两个属性变小就会实现放大效果，线下就是把viewBox的后两个属性变大。拖拽的实现只需要改变我们的viewBox前两个属性就可以了，viewBox的第一个属性是svg框的距离图片左上角的x，第二个是y。A点到放大后的图片的最左边的距离就是我们viewBox中的第一个属性x ，距离最上边那就是第二个属性y。1.首先我们要实现放大，缩小，和拖拽的前提是把图片利用svg显示。
2023-08-11 17:37:24
3398
1
原创 vue3页面跳转遇到 Discarded invalid param(s) “message“ when navigating
后来我查找了一下资料，发现从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取。vue Router也提供了解决方法。query传参是可以正常传参数的，但是传的参数会显示在url地址栏上。我在使用useRouter时，发现使用params传参，会使得跳转的页面接受不到参数，会报错，显示。最近写了一个vue3的项目，在使用路由跳转的时候发现了一个问题，记录分享一下。这样你就可以正常的接受参数了。代码如下：页面a跳转到页面b。这个错误，无效参数。
2023-07-31 14:49:29
1773
2
原创 uniapp中使用TweenMax和three.js ,renderjs实现模型根据实时数据移动，
先下载依赖，然后把three.js的依赖包单独拿出来放入uniapp的项目的static文件夹。在我们使用render.js时，我们用props获取父组件的值时，是拿不到的。uniapp引入three.js，我们需要先下载three.js的压缩包，可以创建一个空文件夹用。解决了uniapp获取dom元素之后，就是我们都熟悉的，加入灯光，渲染器，控制器，相机等等。首先我们得重新写个script，我们在这里是可以正常的接受父组件的值。uniapp官网给了例子，感兴趣的可以去看看，我这边就直接介绍了。
2023-06-09 14:12:32
1455
原创 three.js 的动画，不同设备的动画效果不同。
在做项目时，加载模型之后，给位移动画效果时，在我自己的电脑上没问题（自己电脑配置不好）。但是在我们公司的电脑上（配置比较好）会出现位移不到指定的位置。一开始我自己也是满头雾水，这不是硬件方面的问题吗?，再渲染期间，他是要不停的调用的，硬件好的电脑你不会出现掉帧的问题，也就是画面可以很流畅的执行并到达指定位置，硬件不好的就眼泪直流。近期在做vue3加three.js的项目时，遇到一个问题，记录一下。的调用次数减少，这样就会是两台电脑达到相差无几的效果。最后还是我们组里的大佬解决了。自己的部分代码，仅供参考。
2023-03-17 16:29:32
202
原创 vue3子组件获取父组件传过来的异步数据不能实时响应在页面中。
vue3使用的是组合式API，他的setup函数是执行在beforeCreate这个生命周期之前的。父组件正常赋值传给子组件是不会发生数据不实时响应。但是当数据是请求后端获取的数据时，就会出现数据不实时响应。所以这个时候接受父组件的异步数据不会实时更新。要解决这个问题就得用到watch监听函数了，利用watch监听父组件传过来的值，当值发生变化时，执行相应的操作。第二步，在父组件页面给子组件绑定数据，把result这个获取到的异步数据变量传给子组件。第三步，子组件接受这个异步数据。
2023-03-14 18:06:22
2903
原创 换个思路看待uniapp跳转页面出现闪白的问题
我们在进入非常简单的页面时，就不会出现闪白的问题。但是一但页面复杂起来之后，渲染的时间就会变长，从而导致在跳转页面的时候，页面还没渲染完成，就会出现闪白的问题。就像vue那样，都在一个页面上实现，其他的页面，采用组件的方式引入页面中，这样我们每次跳转到页面就相当于显示这个页面，而把其他页面给隐藏掉，这样就不会有渲染页面时间长的问题。额，之前在写一个用uniapp的项目时，遇到的uniapp跳转闪白问题，自己也找了很多解决方法，像那些在page.json里设置背景色的等等，都解决不了。
2022-12-22 16:50:25
3502
3
原创 vue3路由跳转方法
vue3.0要注意，setup组件是在初始化之前执行，所以this还不是实例对象。vue3.0的处理方法就是，从vue-router中引入useRouter。利用useRouter来进行路由的跳转。首先，vue3.0跳转和vue2.0跳转方式差别不大，但是还有需要注意的地方。这里我介绍两种比较常见的路由跳转方法。name值是你在路由配置中的name属性。to 是你要跳转的路径，也就是接口。绑定点击事件的时候传入参数，进行判断跳转到哪个页面。1.利用router-link标签来进行跳转。
2022-09-20 09:48:37
43604
原创 ES6中class类的创建
下面我们创建一个学生类来看一下class是怎样创建的。利用class来创建对象很明显比之前的四种创建对象的方法更加的方便，而且更加的简洁。constructor里面放的都是属性。extends:继承的是父类，也就是继承父类的方法和属性注意：在对父类继承时，我们也是可以根据需求去重构父类的一些方法的。super()方法代表的是父类的构造函数2.class的私有属性class的私有属性利用闭包的方式来实现3.class的静态属性class静态属性：用过类直接使用的方法和属性，在属性或者
2022-06-15 21:26:24
329
原创 ES6新增的一些方法和数据类型
reduce:将数组中的元素进行整合，返回一个性的内容。reduce方法一共有四个参数。prev:上一次操作所返回的结果，没有设置默认参数的话，那么数组的第一个元素，作为数组 的第二个元素的prev。item:当前进入的元素。index:进入元素的索引值。array:当前操作的数组上面的代码就是利用prev在没有默认参数时，会将数组的第一个元素作为第二个元素的prev。最中实现数组求和。例1：数组的去重在处理一些其他操作，比如数组的去重，这时候我们就要用到默认参数。而默认参数的类型，我们要根据返回的值
2022-06-15 20:50:52
421
原创 对象的继承和ES6的一些基础知识整理
对象的继承方法一共有三种，当时各有优点和缺点。下面我会用一个例子来介绍三种继承方法创建一个人类的对象，然后分别继承学生类以及教师类1.原型继承：把学生对象以及教师对象传入人类对象的原型中缺点：传入的参数是根据学生对象以及教师对象所传入的参数决定的，是不能更改的上面的代码是利用原型继承，继承了Student对象的属性和方法，注意：我在创建人类对象的时候传入的参数“里斯”是显示不出来的。2.冒充继承：把学生对象以及老师对象直接传入人类对象的构造函数内，通过改变其this的指向性，指向人类对象优点：解决了传
2022-06-13 21:17:27
130
原创 原型方法和对象的检测问题
1.原型方法和对象的检测问题（1）：isPortotypeOf():检测当前对象是否是基于对应构造函数创建出来的从代码中可以看到 s1对象是由Student这个函数而创建的对象，所以最后的输出的值是true（2）：判断属性方法 hasOwnProtperty()判断当前的属性和方法是否源于对象构造函数内部，也就是不在对象的原型数中输出的数据类型是boolean类型上面的代码中 t 输出的是true，因为name属性是在Student对象构造函数的内部而不在原型中。S输出的就是fals
2022-06-11 20:29:43
80
原创 js创建对象的几种方法以及优缺点
1.直接创建对象优点：非常的简单缺点：不能进行相同对象的量产，他只能一个对象一个对象的创建2.工厂模式创建对对函数进行封装，每调用一次就创建一个对象优点：解决了第一种直接创建对象方法不能对相同对象的量产的问题，他可以对相同对象进行量产缺点：但是他无法确定类型，就是他只能创建相同对象比如要我们用下面的代码去创建一个学生对象和一个老师对象，这时候我们的工厂模式就创建不了3.构造函数创建构造一个函数，利用this的指向性。这里的new的作用：1.先创建一个空的对象
2022-06-08 21:20:05
242
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人