![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
学而时习之不亦说乎。
学海无涯
展开
-
javascript常用代码片段及函数,验证及判断的方法
29.el是否包含某个class。10.是否undefined。17.是否Promise对象。30.el添加某个class。31.el去除某个class。16.是否Symbol函数。34.el是否在视口范围内。28.根据url地址下载。7.是否boolean。19.是否是微信浏览器。21.是否是QQ浏览器。25.去除html标签。18.是否Set对象。26.获取url参数。32.获取滚动的坐标。原创 2022-12-30 15:22:29 · 815 阅读 · 1 评论 -
vue内嵌iframe跨域通信
1、Vue组件中如何引入iframe?2、vue如何获取iframe对象以及iframe内的window对象?3、vue如何向iframe内传送信息?4、iframe内如何向外部vue发送信息?原创 2022-12-01 15:50:12 · 6219 阅读 · 3 评论 -
mp4,m3u8,rtsp,rtmp,flv,直播流在线测试地址
西瓜播放器测试视频: https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv。前端做直播视频展示的时候,很多时候播放不出来,不是因为自己代码的问题,而是因为网上很多源。现在已经播放不出来了,所以源头都有问题,那自己的前端肯定就放不出来。以上是我测试目前可以用的,如果大家有补充可以告诉我,互帮互助!下面放我当前测试可以用的几个在线视频流。原创 2022-11-29 09:54:17 · 5889 阅读 · 2 评论 -
JS检测客户端软件是否安装
通过浏览器打开某个客户端,需要检测看客户端是否已经安装过了,未安装则提示安装该客户端,已安装则直接打开打开客户端的方法通过客户端软件在注册表注册的自定义协议打开。例如js代码location.href='baseonline//';查看注册表方法在键盘上按“win+R”,打开运行窗口,在里面输入regedit,回车即可进入注册表编辑器实现方案1首先github上找到这个方案https对多个浏览器都实现了,基本都是hack方法。...原创 2022-07-21 15:30:47 · 2783 阅读 · 0 评论 -
lodash实现防抖和节流功能及原生实现
lodash实现防抖和节流功能及原生实现原创 2022-06-22 17:02:42 · 479 阅读 · 0 评论 -
网页鼠标点击特效案例收集(直播间红心同理)
2. 鼠标点击出随机设置的文字 3. 鼠标点击出现烟花波纹 4. 鼠标移动出现星星拖尾 5. 鼠标粒子拖尾 6. 鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果 7. 樱花飘落背景特效 8. 蜘蛛网背景特效......原创 2022-06-22 10:39:51 · 46399 阅读 · 2 评论 -
web调起客户端
直接上效果上代码<!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"> .原创 2022-04-11 16:07:03 · 488 阅读 · 0 评论 -
vue项目使用阿里云播放器(aliyun)
1、在项目的components的文件夹下新建AliPlayer.vue文件,将sdk插件的代码放入其中,代码如下:<template> <div class="prism-player" :id="playerId" :style="playStyle"></div></template><script> export default { name: "Aliplayer", props: { ...原创 2022-04-11 13:56:09 · 8025 阅读 · 10 评论 -
axios终止网络请求
1.axios中止单个网络请求 const CancelToken = axios.CancelToken config.cancelToken = new CancelToken((cancel) => { // 存储并使用cancel })axios中止所有的网络请求使用CancelToken 在axios的请求拦截中,使用store存储每个请求的cancelToken实例 拦截路由,调用cancelToken()方法终止请求原生j原创 2022-01-24 14:29:26 · 5408 阅读 · 0 评论 -
使用countup.js让数字动起来
直接使用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>数字动起来原创 2022-01-19 15:32:17 · 410 阅读 · 0 评论 -
前端人脸识别解决方案
最近业务功能需求开发中Web端需要接入人脸识别,于是做了技术预演1.第三方解决方案现有的云服务商解决方案:市场还有很多类似的解决方案,这里不一一列举,下面是某云服务商的报价Web API中有个MediaDevices.getUserMedia()的方法,调用后会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道。 旷世 - 人脸识别 face++[1] 腾讯云神图.原创 2022-01-17 10:11:13 · 6703 阅读 · 0 评论 -
原生js-Ajax封装
Ajax 说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。 ajax的应用场景有:(地图)实时更新,表单验证等等.... ajax的优缺点: 优点:1.实现局部更新(无刷新状态下),2.减轻了服务器端的压力 缺点:1.破坏了浏览器前进和后退机制(因为ajax自动更新机制) 2.一个Ajax请求多了,也会出现页面加载慢的情况。 ...原创 2022-01-12 16:40:07 · 1362 阅读 · 0 评论 -
vscode+eslint 的配置规则和自动修复
全局安装eslint 打开终端,运行npm install eslint -g全局安装ESLint。 vscode安装插件 vscode 扩展设置 依次点击文件 > 首选项 > 设置{ "workbench.iconTheme": "material-icon-theme", "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": fal...原创 2022-01-12 13:49:28 · 632 阅读 · 0 评论 -
Vue中监听键盘事件及自定义键盘事件
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题:我们必须知道某个按键的keyCode值才能完成匹配,使用起来十分不便。方案:在Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。<input @keyup.enter="function">另外,Vu..原创 2022-01-11 15:05:59 · 5214 阅读 · 0 评论 -
vue 登录页记住密码保留7天。
<FormItem > <Checkbox v-model="isRemember" > <span>记住密码</span> </Checkbox></FormItem>data里默认false// 设置cookie setCookie(username, password, exdays) { var exdate =.原创 2022-01-05 10:01:30 · 325 阅读 · 0 评论 -
H5调用摄像头拍照并下载照片
类似需求基本粘贴复制就能用调用摄像头拍照转成base64格式后下载图片,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video)<html ><style> body{ text-align: center; } button{ width: 100px; height: 40px; background-color: #d35555; border-radius: 5px; border:non原创 2022-01-04 10:55:01 · 1515 阅读 · 4 评论 -
响应式网站-媒体查询
1、什么是响应式网站响应式是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面计算机显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现 。2、响应式网站的核心逻辑优雅降级,内容优先。响应式:一个网站去兼容多个终端,而不是为每个终端做特定版本。优点:面对不同分辨率,设备灵活性比较高;快捷解决很多设备的适应问题适合中小型网站 缺点:因为要兼容各种设备,工作量很大,效率不高代码冗余,会出现很多隐藏无用的元素,加载时间长 原理:通过css3新增的媒原创 2021-12-31 14:16:11 · 751 阅读 · 0 评论 -
15个 Vue 技巧使用的总结经验
1、将一个 prop 限制在一个类型的列表中我们在使用 prop 时,可能会有时候需要判断该 prop 是否在我们规定的范围内(或者说规定的值内),此时可以使用 prop 定义中的 validator 选项,将一个 prop 类型限制在一组特定的值中。export default { name: 'Test', props: { name: { type: String, }, size: { type: String, valid...原创 2021-12-30 13:52:52 · 375 阅读 · 1 评论 -
基于element实现文件(资源)上传 - 好用
自定义上传规则按需定义:1.总大小不可超出200M2.文件上传不重复3.支持文件格式("mp4","MP4","mov","MOV","mp3","MP3","jpg","JPG","png","PNG","jpeg","JPEG","bmp","BMP","txt", "TXT","text","TEXT","doc","DOC","docx","DOCX","xls","XLS","xlsx","XLSX","ppt","PPT","pptx","PPTX",...原创 2021-12-28 10:42:28 · 989 阅读 · 0 评论 -
使用video.js重新封装视频播放器支持点播及直播
一、安装指定版本是正常命令后加‘@版本号’npm install videojs@7.15.4 --save二,组件封装的代码<template> <div class="live-video-wrapt"> <div id="videoUpdate" class="video-show" v-show="!isError"> <video id="videoTV" class="video-j原创 2021-12-13 10:54:30 · 3986 阅读 · 0 评论 -
web移动端vw rem适配各种尺寸,手机基于 vw 单位的移动端适配方案
1"head"里添加"meta"<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />2 计算 html 的"font-size"在utils里创建rem.jsexport const setFontSize = (designWith = 750) => { // 设计稿宽度, 750|640|520 .原创 2021-12-10 10:35:55 · 211 阅读 · 0 评论 -
vue项目导出页面为pdf格式照片截图
1、安装html2canvas和jspdf依赖npm install html2canvas --savenpm install jspdf --save 2、在utils中创建htmlToPdf.js文件,// 导出页面为PDF格式import html2canvas from "html2canvas"import JSPDF from "jspdf"export default { install (Vue, options) { Vue.prototype.Ex原创 2021-12-08 17:41:29 · 525 阅读 · 1 评论 -
Vue中使用websocket(即时通讯)
websocket是一个双向通行工具,解决了原来的http单向通信的弊端,可以让服务器主动向客户端推送数据// 安装客户端的socketnpm i socket.io-client --save/* 安装Vue配置socket的工具 注意:需要安装3.0.7版本的包,最新的包会有问题*/npm i vue-socket.io@3.0.7 --save// 在main.js中引入设置import VueSocketIO from 'vue-socket.io.原创 2021-12-08 16:57:47 · 6965 阅读 · 0 评论 -
闭包的思想和实现逻辑
闭包闭包就是能够读取其他函数内部变量的函数。在js中,可以将闭包理解成“函数中的函数“闭包的作用:A、可以读取函数内部的变量B、让这些变量的值始终保存在内存中。这是因为闭包的执行依赖外部函数中的比那辆,只有闭包执行完,才会释放变量所占的内存使用闭包的注意事项由于闭包会使得函数中的变量都被保存在内存中,内存消耗大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能会造成内存泄露。 解决方法:在退出函数之前,将不使用的局部变量全部删掉闭包会在父函数外部,改变父函数内部变量的值原创 2020-11-30 08:27:46 · 248 阅读 · 0 评论 -
JS事件类型有哪些
JS事件类型有哪些?分别是什么?JavaScript可以处理的事件类型为:鼠标类型、键盘类型和HTML类型!注意:所有的事件处理函数都由两个部分组成,on+事件名称。例如:click事件,处理函数就是onclick!鼠标事件。click:单击鼠标按钮时触发;dblclick:当用户双击主鼠标按钮时触发;mousedown:当用户按下鼠标还未弹起时触发;mouseup:当用户释放鼠标按钮时触发;mouseover:当鼠标移到某个元素上方时触发;mouseout:当鼠标移.原创 2020-10-29 08:28:51 · 2958 阅读 · 0 评论