- 博客(43)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 解决npm报错Unexpected token ‘ ‘问题
nvm版本过低导致的libnpmfund报错，解决npm报错Unexpected token '.'报错问题
2023-03-07 13:54:14
3238
1
原创 浏览器录音发送二进制流案例(websocket通信)
var begin = document.getElementsByClassName('start-button'); var wsUrl = 'wss://ws-rtasr.hivoice.cn/v1/ws';//服务地址 var wstime = '1626325549809'//访问时间戳 var appkey = '45gn7md5n44aak7a57rdjud3b5l4xdgv75saomys'//用户的appkey var sign = 'EE1CB17678086F0ED..
2022-01-21 17:33:18
4981
原创 vue3中emit使用方法（新）
vue3中子组件向父组件传值分以下几步1、定义emits,emits的定义是与component、setup等这些属性是同级。例如emits此时是作为数组，它也可以接收一个对象2、方法中使用与之前的用法不同的是，现在需使用ctx.emit，其中ctx是setup中第二个参数，也就是上下文对象3、在父组件上定义同名方法接收4、父组件接收方法的参数为子组件传递的参数...
2021-09-15 14:48:26
29589
原创 elementplus标签页标题提示文字
在含标签页项目中,由于标题过长往往会设置溢出隐藏的效果,所以当鼠标停留在标题时需要有该标题完整信息的提示文字,才有好的体验,具体效果如下图.对于提示文字elementplus也提供了Tooltip组件.关键:使用标签页中提供的Tab-pane Slots(插槽)可很好的实现,具体代码如下 <el-tab-pane v-for="item in editableTabs" :key="item.name" lazy > <t
2021-09-07 10:33:06
4010
1
原创 vue3聊天定位到最下面
vue3聊天定位到最下面在vue中做聊天功能时,消息模块通常是固定高度后设置overflow:auto;但当消息过多后,会产生滚动条,这时将消息默认定位到底部可以利用scrollIntoView()方法。关键代码如下；nextTick(() => { chatRoom.value.lastElementChild.scrollIntoView() })scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。nextTick()是将回调
2021-08-25 16:38:44
2096
1
原创 vue3实现录音及发送等功能
vue3中实现录音发送等功能在vue项目中做聊天功能中涉及到语音发送功能,搭配js-audio-recorder插件的使用,能很好的帮助我们开发，下面是具体使用步骤。第一步npm安装js-audio-recorder插件包npm i js-audio-recorder第二步在需要使用的组件中导入插件import Recorder from 'js-audio-recorder'第三步在setup中定义响应的方法const data = reactive({ //用于存储创建的语
2021-08-25 11:41:26
11253
7
原创 nodejs获取表单数据的方法
nodejs获取表单数据的方法nodejs作为服务端语言，在开发中注册登录等需通过form表单向后端发送数据进行判断，那作为服务端语言的nodejs通过哪些方法可以接收调用form表单的post请求值呢。常见的会用到以下三种，让我们对着例子看看具体用法。后端我们使用express插件，需要对express有所了解的才便于阅读哦~1、首先npm初始化，下载express包，导入模块后创建服务对象//导入express模块const express = require("express");//
2021-05-29 19:04:47
6770
5
原创 es6三个点（...）扩展运算符用法
扩展运算符用法扩展运算符（ spread ）是三个点（…），是ES6新增的一种运算符，其作用很多，例如可以将一个数组转为用逗号分隔的参数序列等作用。应用场景中通常使用在对象的扩展运算符和数组的运算符两种类型。对象中的扩展运算符扩展运算符在对象对象中用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上述简单的例子可以看出…后面为对象，则将该对象的所有属性变量赋值
2021-05-27 18:48:52
369
1
原创 express中间件详解
概念一个请求发送到服务器，要经历一个生命周期，服务端要： 监听请求-解析请求-响应请求，服务器在处理这一过程的时候，有时候就很复杂了，将这些复杂的业务拆开成一个个子部分，子部分就是一个个中间件。对于处理请求来说，在响应发出之前，可以对请求和该级响应做一些操作，并且可以将这个处理结果传递给下一个处理步骤中间件就可以理解成一个对请求进行过滤和预处理的东西中间件分类有：应用级中间件、路由级中间件、错误处理中间件、内置中间件、第三方中间件。中间件运行机制，例如var express = require
2021-05-24 21:10:41
375
1
原创 Nodejs中mongodb的基础语法封装
Nodejs中mongodb的基础语法封装mongodb介绍mongoDB是一个介于关系数据库和非关系数据库之间的开源产品，是最接近于关系型数据库的NoSQL数据库。它的特点:高性能、易部署、易使用，存储数据非常方便。特点1、一个mongodb中可以建立多个数据库。MongoDB的默认数据库为"db"，该数据库存储在data目录中。MongoDB的单个实例可以容纳多个独立的数据库，每一个都有自己的集合和权限，不同的数据库也放置在不同的文件中。2、集合就是 MongoDB 文档组，类似于 RDBM
2021-05-22 12:24:39
386
1
原创 Cookie、LocalStorage和SessionStorage区别详解
Cookie、LocalStorage和SessionStorage区别详解概念理解Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。sessionStorage 与 localStorage
2021-05-21 21:17:07
1447
2
原创 判断一个对象是真数组的几种方法
判断一个对象是真数组的几种方法在js中对对象进行判断时需了解到它是否是一个真数组，例如arguments等类似的虽然以数组的样式（下标值）在存储，但它是一个类数组对象。下面列举几种常见的判断是否为真数组的几种方法起手式：定义一个类数组和真数组 <div></div> <div></div> <div></div> <script> var divs = document.getElementsByTa
2021-05-16 11:25:40
326
1
原创 js事件模型
js事件模型JavaScript事件使得网页具备互动和交互性，对js事件模型的了解可以帮助我们更加深入了解其中的原理，便于开发工作，在目前各种浏览器中，JavaScript的事件模型主要分为三种，DOM0级事件模型（原始事件模型）、DOM2事件模型、IE事件模型。DOM0级事件模型DOM0级事件模型是一种被所有浏览器都支持的事件模型，对于原始事件而言，没有事件流，事件一旦发生将马上进行处理。以点击事件为例，有两种常见的方法绑定事件。（1）在html代码中直接指定属性值,如下代码<button
2021-05-12 20:31:54
534
1
原创 输入url到页面显示经过哪几步
从输入url到页面加载完成都发生了什么当用户输入url地址时，大致发生以下几步：1、浏览器的地址栏输入URL并按下回车。2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。3、DNS解析URL对应的IP。4、根据IP建立TCP连接（三次握手）。5、发起HTTP请求。6、服务器处理请求，浏览器接收HTTP响应。7、渲染页面，构建DOM树。8、关闭TCP连接（四次挥手）。这个过程是十分复杂的，大致完全过程总结为以上八个步骤。下面详细说一下每个步骤中的详细介绍URLURL就如同
2021-05-11 19:54:27
950
5
原创 js的事件循环
剖析js的事件循环机制众所周知， JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求，那么到底是为什么呢？其中的原理与事件循环机制大有关系。在探索事件循环之前，我们得先了解浏览器执行线程~~浏览器的渲染进程是多线程的，浏览器每一个tab标签都代表一个独立的进程，其中浏览器内核属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等。其包含的线程有以下几种GUI 渲染线程：负责渲染页面，解析 HTML，CSS 构成 DOM 树；JS 引擎线程：解释执行代码、用户输入和网
2021-05-10 21:02:35
302
3
原创 ES6方法实现两个数组的交集、并集和差集
ES6全称 ECMAScript 6.0 ，是 JavaScript 的一个版本标准。其中新增很多方法。如何使用ES6中的一些方法完成两个数组的交集 并集 差集(不能出现重复项)呢？首先然我们看看需要使用到哪些方法…1、模板字符串需要输出字符串时传统做法需要使用大量的“”（双引号）和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。于是ES6中提供了模版字符串，用`（反引号）标识，用${}将变量括起来。下面是几种应用场景。console.log(`string text`);cons
2021-05-06 20:33:03
2714
原创 ES6中的symbol是什么
ES6中的symbol是什么最近学习es6语法过程中发现一种从未见过的数据类型。在js中常见的有六种数据类型，分别是 undefined 、number 、boolean、string、object、function。在ES6里面引入一种新的数据类型用来表示独一无二的值，就是symbol类型。它可用作对象的唯一属性名，这样其他人就不会改写或覆盖你设置的属性值。symbol的声明symbol和其他几种数据类型不同，symbol没有字面量的写法也不可以使用new关键字创建。具体声明方法如下。var s
2021-04-28 21:00:21
1344
2
原创 详解ajax使用步骤
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。ajax的使用使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。ajax的使用并不难，可分为以下大步1、实例化对象（创建请求对象）var xhr=new XMLHttpRequest();这里一般使用xhr作为请求对象名，在开发中看到xhr的变量就可以知道是一个ajax请求对象。使用到的XmlHttp可以理解为更新网页是部分内容而不需要刷新整个页面2、调用ope
2021-04-25 19:22:56
341
1
原创 bootstrap取消15px边距沟槽的方法
bootstrap取消15px边距沟槽的方法在利用bootstrap栅格布局时，container容器下的col如果有多个，他们之间分别有15px的左右内边距。这是bootstrap插件在底层封装时为了不出现内容紧接边框造成的不美观，所以设置了15px的内边距。在开开发中我们有时并不需要它存在内边距，这个时候改怎么办呢？bootsrap3的方法在我们预定义的网格类中，列之间的沟槽可以用删除。没有沟槽。这将删除.row的负边距和所有直接子列的水平填充。下面是创建这些样式的源代码。请注意，列重写的作用域
2021-04-19 12:42:30
3671
2
原创 原生js模拟jQuery选择器功能及方法
模拟jQuery选择器功能及方法查看jQuery源码可以发现，jQuery中没有使用new操作符来创建新对象，而是采用调用jQuery原型中init()函数的方式返回一个新对象。熟悉jQuery的人应该知道，几乎jQuery所有操作，都是从$符号开始，当作为元素选择器的时候，操作结果返回的是一个jQuery对象。以下是个人模拟的写法：//模拟jQuery选择器功能 (function () { function jQuery(selector) { return n
2021-04-04 22:01:42
1961
3
原创 jQuery入口函数
jQuery入口函数根据需要在js代码执行前，需等待加载再执行js代码，原生js和jQuery中有两种常见的入口函数的写法，以下是他两的区别：原生的js和jquery的区别1、原生的js和jquery入口函数的加载模式不同原生的js会等到dom元素加载完毕，并且图片也加载完毕才会执行jquery会等到dom元素加载完毕，但不会等到图片加载完毕2、原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的但是jquery后写的不会覆盖先写的，而且还会按顺序加载jQuery入口函数的四种写法 /
2021-04-04 21:55:14
473
1
原创 H5的video标签
H5的video标签video作为在开发中实现播放的控件，在不同的浏览器也存在视频格式能否播放的兼容问题。视频格式webM ,OGG,MP4chrome6+yes , yes , yesie9+no , no , yesopera10.6+yes , yes , nofirefox3.6+yes , yes , nosafarino , no , yes
2021-03-24 19:43:27
401
2
原创 location的常用方法
location的常用方法location作为BOM对象的属性对象，包含有关当前 URL 的信息。以一个百度网页为例。location.protocal获取当前url协议HTTPS是一种全新的安全协议，对网站本身以及访问网站的网友都有着更好的安全性，防止隐私泄露。location.host获取当前域名即当前 URL 的端口号url：统一资源定位器location.pathname获取文件路径名location.search获取当前url参数它将返回从问号 (?) 开始
2021-03-20 11:32:35
1250
1
原创 常见的四种原型继承
常见的四种原型继承1、最原始的继承 子类原型继承父类的实例 function Father() { this.firstName = '三' } var father = new Father(); Father.prototype.lastName = '张'; function Son() { this.firstName = '四'; this.sex = '男'; } // 子类原型继承父类的实例 S
2021-03-09 20:27:56
1850
原创 JS闭包的实现与缺陷解决办法
JS闭包的实现与缺陷解决办法总所周知局部变量（函数变量）在外部不能直接访问，但有需求要它在全局访问而又不定义为全局变量，这里就需要使用到闭包。闭包的实现例如使用js想要实现点击一下计数器加一的效果。可以用如下代码实现。 <button type="button" onclick="add()">计数</button> <div id="div">0</div> <script> var count = 0; function a
2021-03-06 22:28:28
348
原创 js函数参数传递基本数据类型和引用数据类型的不同
js函数参数传递基本数据类型和引用数据类型的不同之前提到函数的参数分为形参、实参两种，形参是用来函数定义是设接收调用传入，实参是用来函数调用时传入小括号里面的真实数据。函数在传递参数时，可以传入两种数据类型，一种是基本数据类型，另一种是引用数据类型，其不同表现形式如下。1、参数传入基本数据类型是按值传递 var a = 10; var b = 20; function test(a,b){ // a,b 形参 将全局下的a,b 复制一
2021-03-01 20:58:37
771
3
原创 数组常用方法详解
数组常用方法详解 数组概念：数组可以把一组相关的数据存放在一起，并提供方便的访问方式，就是一株数据的几个，每一个单独的数据叫做元素，数组中可以存放任意类型的元素。数组创建常见的两种创建方式有两种：1.new关键字创建：var arr = new Array();2.字面量创建：var arr1 = [ ];数组长度返回数组元素个数的值：arr.lenght数组遍历数组遍历：forEach()，用法如下： var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
2021-01-27 20:16:36
205
原创 JS函数递归案例
JS函数递归案例在学习案例前先了解下JavaScript中函数的用法有哪些。1.函数的概念：函数是封装了一段可被重复调用执行的代码块。2.常用的声明方式（字面量创建）为：function 函数名(){ 代码块}调用方式为：函数名();3.函数的参数分为形参、实参两种，形参是用来函数定义是设接收调用传入，实参是用来函数调用时传入小括号里面的真实数据。4.函数的返回值：return 返回值;之前在循环的案例中例子中利用for循环实现斐波拉契数列1、1、2、3、5…（第三项开始，前两项和等于
2021-01-21 20:49:33
638
原创 JS逻辑训练题--循环
JS逻辑训练题–循环前篇循环中介绍了while、do…while、for循环，如何利用循环实现数学逻辑呢，看看下面几道题训练一下。1.求S = a + aa + aaa + aaaa + aaaaa + aaaaaa + aaaaaaa +…… a和n从键盘输入,例如用户输入的a是2,n是5,则要求将2+22+222+2222+22222的和计算出来 var a = Number(prompt("请输入a值")); var n = Number(prompt("请输入n值,1-9"));
2021-01-18 19:44:23
852
1
原创 JS条件选择switch语句案例
JS条件选择switch语句案例switch 语句用于基于不同条件执行不同动作，使用 switch 语句来选择多个需被执行的代码块之一，基本语法如下：switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块} 执行的规则是：1、计算一次 switch 表达式。2、把表达式的值与每个 case 的值进行对比。3、如果
2021-01-14 20:50:31
1395
原创 JS条件判断语句案例--输入三个数从大到小输出
输入三个数从大到小输出（JavaScript）在 JavaScript 中，最普通的条件语句就是if语句了，基础语法是if (条件) {如果条件为 true 时执行的代码}else{如果条件为false 时执行的代码}在练习js条件判断语句时碰到一个很好的题目，如下：用户依次输入三个数，并从大到小输出。 alert("请依次输入三个数"); var num1 = Number(prompt("请输入第一个数")); var num2 = Number(prompt("请输入
2021-01-13 20:46:31
3163
原创 Javascript数据类型
详解Javascript数据类型在编程过程中，数据类型是重要的概念。为了能够操作变量，了解数据类型是很重要的。下面让我们看看在JavaScript中常用的原始数据类型有哪些在此之前介绍一下常用的两种判断和检测数据类型的两种方法1、 isNaN() 用来判断 一个变量是否为非数字的类型（返回是布尔变量）2、 typeof() 检测变量的数据类型数字类型–Number数字类型包括整数和 小数例如12、12.35。 var a = 12; console.log("a
2021-01-11 20:36:09
147
1
原创 CSS3弹性布局常用属性详解
flex弹性布局常用属性详解CSS3弹性布局，可以轻松的排控制元素的排列、对齐和顺序的控制。上篇利用css弹性布局中的justify-content和align-self属性很便捷的完成了骰子点数的布局。在flex弹性布局中还有很多常用的属性，下面来依次看看吧~声明弹性盒子定义为弹性盒子（容器）display: flex;定义为内联级弹性盒子display:inline-flex;在不定义弹性容器宽度时，在弹性容器受到缩小时，容器里的元素也会缩小。内联级盒子与弹性盒子不同在容器大小会根据容器内容（
2021-01-05 20:11:33
817
1
原创 详解flex布局做骰子案例
详解flex布局做骰子案例上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中
2020-12-26 17:19:08
6019
7
原创 CSS3简单特效--transform实现翻书效果
CSS3简单特效–transform实现翻书效果上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步：1、父级中加入视距：perspective:800px;2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d;3、设置观看视角：perspe
2020-12-23 20:34:53
2691
3
原创 CSS3简单特效--animation实现流光按钮
CSS3简单特效–animation实现流光按钮在学习css3的过程中，发现很多看着炫酷的效果，利用css3的属性能很简单的实现，animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这个属性做出以下鼠标停在按钮上有流光按钮效果~在此之前简单介绍一下animation属性的用法。animation：[ animation-name(检索或设置对象所应用的动画名称) ] || [ animation-duration(检索或设置对象动画的持续时间) ] || [ animatio
2020-12-19 16:32:35
5653
7
原创 示例详解CSS3属性选择器
示例详解CSS3属性选择器CSS3中使用了很多的属性选择器，通过这些属性选择器，对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。可以根据我们自己的设计来定义元素的样式，制作精美的网页。下面让我们看看有哪些属性选择器~以下用E代表要选择的标签（可以为标签名、类名、id名等）；用attr代表属性名；val代表属性值。E[attr~=“val”]选中条件：1、标签内有这个属性，属性值只有"val"。2、标签内有这个属性，属
2020-12-16 20:20:57
1049
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人