js
Best_卡卡
一天不掉发,心里就空空的
展开
-
关于列表循环滚动的详解(js)
前言与思路需求图需求:针对以上列表进行无线滚动实现方式:一直滚动、单行单行滚动实现思路:1、基于scrollTop+定时器无限滚动的实现2、基于scrollTo+定时器实现单行一个个滚动2、基于margin-top+transition通过列表删除首项添加到末尾实现单行滚动列表循环滚动思路1、固定高度的父盒子:overflow:hidden2、根据内容适应高度的子盒子3、每隔0.02秒的频率移动父盒子的scrollTop达到无限滚动的效果4、注意:滚动条滚动到最下面无法再原创 2022-04-13 20:51:02 · 4312 阅读 · 0 评论 -
一些技术积累
函数组件没有options怎么获取路由携带的参数的// 页面的传递参数navigateTo({ url: `/pages/answerQues/index?index=${index}`, });// URL地址参数的获取useEffect(() => { const num = getCurrentInstance().router?.params.index console.log('num',num)})taro中微信授权用户昵称和头像 &l原创 2022-01-29 18:34:34 · 872 阅读 · 0 评论 -
一份试题解析
一、CSS 自适应搜索框要求右侧 button 固定宽度 80px,左侧 input 随页面宽度变化 始终占满剩余空间请尝试用不同的 CSS 布局方案,尽量多写出几种实现二、读代码写执行结果以下是一个页面的代码,请写出用户点击了后控制台的输出结果<body> <div id="i"/></body><script>document.body.addEventListener("mousedown", () => { consol原创 2022-01-27 01:42:52 · 2601 阅读 · 0 评论 -
react基础学习(一)
前言啊嘞,想去大厂了简介简单介绍react 构建用户界面的JavaScript库 与vue的区别:主要用于构建UI界面 特点: 1、声明式的设计 2、高效,采用虚拟dom来实现dom渲染,最大限度减少dom操作 3、灵活。 4、jsx,俗称js里面写html.(对JavaScript语法的扩展) 5、组件化、模块化。代码容易复用,大型项目非常喜欢react 6、单向数据流。没有实现数据的双向绑定。数据=>视图=>事件=>数据创建项目 1、通过cd原创 2021-09-01 16:55:17 · 100 阅读 · 0 评论 -
canvas学习(四):简单画板
前言canvas实现画板功能,有画笔、矩形、圆形、线段粗细、画笔颜色等功能是对canvas的综合学习回顾步骤基本样式<style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; display: flex; flex原创 2021-08-30 14:28:27 · 1494 阅读 · 0 评论 -
canvas学习(三):刮刮卡
前言使用canvas做一个一个刮刮卡;效果图如下:前置学习-globalCompositeOperation属性什么是源图像、目标图像ctx.globalCompositeOperation() :设置或返回如何将一个源(新的)图像绘制到目标(已有的)图像上源图像 = 你正打算放置到画布上的绘图目标图像 = 你已经放置到画布上的绘图绘制图像的叠加模式属性globalCompositeOperation我们可以通过ctx.globalCompositeOperatio原创 2021-08-27 15:38:31 · 392 阅读 · 0 评论 -
canvas学习(二):绘制时钟
需求绘制一个简单时钟,要求:1、时分秒、表盘 2、随真实时间进行变化结果图:步骤canvas基本对象<canvas id="canvas1" width="800" height="600"> 你的浏览器不支持canvas </canvas> <script> // 1、找到画布对象 /** @type {HTMLCanvasElement} */ var canvas= document.getElementById('原创 2021-08-27 11:40:34 · 385 阅读 · 0 评论 -
canvas学习(一):基础使用
canvas的学习.基本使用<!-- canvas三要素 id 宽 高 绘制内容必须要用js绘制 --><canvas id="canvas1" width="600" height="600"> 你的浏览器不支持canvas(正常是不显示的) </canvas> <script> // 1、找到画布对象 var canvas1= document.getElementById('canvas1') consol原创 2021-08-26 15:30:32 · 163 阅读 · 0 评论 -
多维数组转一维
前言之前在对象数组循环中写过reduce方法(https://blog.csdn.net/weixin_43909743/article/details/111034947),可以数组求和,转一维,查阅资料收获一些新的方法实现,记下笔记实现reduce实现// 高级用法2:将二维数组转化为一维let arr = [[0, 1], [2, 3], [4, 5]]let newArr = arr.reduce((pre,cur)=>{ return pre.concat(cu原创 2021-08-13 11:28:30 · 884 阅读 · 0 评论 -
网络图片访问不到,403的解决办法(详解)
前言富文本中复制百度百科的一份知识,在项目预览时发现图片显示不出来,报403问题,图片地址用新网址打开正常显示原因:403是防止盗链的错误(这种设计,是api厂商正常保证自己的服务器不被刷流量)解决方案一:使用no-referrer在head 中添加 <meta name="referrer" content="no-referrer" />防盗链的机制:通过页面的referrer信息,判断访问者来源,是否本站点,然后对图片等请求作出相应no-referrer:1原创 2021-07-27 10:57:01 · 7473 阅读 · 0 评论 -
vue静态资源引入错误——Uncaught SyntaxError: Unexpected token ‘<‘
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2021-07-16 17:47:58 · 1799 阅读 · 0 评论 -
用简单方法实现对象的深克隆封装js
前言浅度克隆 :基本类型为值传递,对象仍为引用传递。深度克隆 :所有元素或属性均完全克隆,并于原引用类型完全独立,即,在后面修改对象的属性的时候,原对象不会被修改。简单理解:对象保存在固定位置,浅克隆引用该位置,深克隆是新位置完全复制该对象实现// 判断arr是否为一个数组,返回一个bool值function isArray (arr) { return Object.prototype.toString.call(arr) === '[object Array]'; }//原创 2021-07-15 16:23:24 · 175 阅读 · 0 评论 -
【Vue】如何修改node_modules下的element-ui源码
前言element-ui中有一个上传组件el-upload,进度到100%,后台服务响应处理需要时间,所以不能显示进度条到100%,要显示为99%,如下图示改为改动不多,可以手写上传,也可以进行修改源码,这次我们修改element-ui直接修改替换就好了操作下载element-ui源码git地址:https://github.com/ElemeFE/element引入依赖npm install // 不引入依赖包一会是不能打包的修改组件的源码打包np原创 2021-07-14 17:53:30 · 2557 阅读 · 1 评论 -
vue+video.js实现前端视频流(hls、MP4、flv)
前言之前、写过关于西瓜播放器xgplayer可以实现各种视频流的前端直播,目前这篇关于video.js实现直播、视频,拓展下知识面使用下载相应插件npm install video.js --save npm install videojs-flash --save //rtmp格式//flv格式npm install flv.js --savenpm install videojs-flvjs-es6 --save//hls格式 video.js7.0以后版本默认支持hls(原创 2021-07-13 13:33:12 · 13010 阅读 · 10 评论 -
删除弹窗组件的封装使用
前言开发中,页面会有很多弹窗,设计上风格大体相似,所以弹窗框封装使用,便于开发、维护,以下是一个删除弹框的封装包括:提示标题、内容、按钮、关闭效果图封装创建confirm.vue<template> <div> <transition name="el-fade-in-linear"> <div id="u-cofirm" class="shade" v-show="show">原创 2021-06-23 17:09:35 · 428 阅读 · 4 评论 -
参数序列化
// 参数序列化 Vue.prototype.seParams = (obj) => { // 该方法会把值为0 的项过滤掉 // 如果所有项都会空 则不会返回 ‘?’ var str = '' for (var key in obj) { var item = obj[key] if (item !== null &&原创 2021-06-16 18:18:03 · 832 阅读 · 0 评论 -
移动端布局适配
前言接收一个之前的项目,这里的适配布局使用的是原生监听,重写登录页面存在,键盘弹起导致页面适配变形重写移动适配(function(win) { var tid; function refreshRem() { let designSize = 750; // 设计图尺寸 let html = document.documentElement; let wW = html.clientWidth;/原创 2021-06-10 18:34:35 · 106 阅读 · 0 评论 -
vue关于正则学习回顾
问题-正则使用不熟练 近期一直做表单项校验的工作,所以对正则使用进行一次整理正则:文本搜索与文本替换 语法:正则表达式主题/修饰符相关方法str.search()方法用于检索指定子字符串,并返回子字符串的起始位置,找不到返回-1,对大小写敏感(可以修饰符加i,忽略大小写)// 示例// 正则字符串方法var str = '这是一个寂寞的Day'// 正则表达式的search方法,用于检索指定字符串的子字符串,并返回子字符串的起始位置console.log(str.search(/da/)原创 2020-12-07 16:43:21 · 274 阅读 · 0 评论 -
音视频-Video标签整理(属性、方法、事件)
前言啊嘞啊嘞,没想到哎,video原生标签可以在手机端进行hls流直播(电脑端不可以,需要使用播放器),神奇使用<video id="video" :poster="imgurl" :src="url" autoplay controls="controls" ></video>标签可设置属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload原创 2021-06-07 15:02:08 · 2075 阅读 · 0 评论 -
关于敏感词的过滤js
前言关于直播讨论、以及弹幕中需要对一些敏感词过滤掉,文明发言实现1.简单删选 // 获取文字来源 var text = document.getElementById("contTextarea").innerHTML; // TODO 需要对text的敏感字符进行判断 text = text.replace(/我日|fuck|我操|我草/g, '**'); // 发送消息、弹幕 // TODO2、当数据过多时、可作封装处理harmonious原创 2021-06-07 11:58:39 · 474 阅读 · 0 评论 -
JS判断手机是安卓还是IOS
JS判断手机是安卓还是IOSfunction CheckIsAndroid() { var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac原创 2021-05-31 13:39:27 · 2897 阅读 · 0 评论 -
移动端h5问题定位工具-vConsole
前言近期做了一个关于手术直播的h5项目,做好后在pc端浏览器模拟测试没问题。部署上后用手机测试出现很多问题手机浏览器定位问题困难、存在兼容性问题、靠猜测特别难处理本篇文章:记录一个h5调试工具new Date(date).getTime()在苹果手机不兼容h5移动端调试工具-vConsole安装 npm install vconsole -D 在 main.js 中引用 import Vconsole from 'vconsole'; const vConsole原创 2021-05-25 11:02:05 · 502 阅读 · 1 评论 -
多个文件加载显示总体进度条js
前言需求是,进入页面加载多个vtk3d模型文件,因为文件特别大,从服务器下载就比较慢,需要做个进度条优化用户体验。如下图所示:思路1、事件总线传递值 (文件总大小、当前文件加载大小) 由于接口调用封装的太深,与组件难以关联,要么进行vuex保存,要么事件总线(事件监听,事件发布), 当前采用的是事件总线的方式处理(便于理解,后期可以用vuex优化性能)2、this.$set()动态保存每一个文件进度 多个文件都要分别保存文件总大小、当前文件加载大小,这里采用this.$set()进原创 2021-05-24 15:54:58 · 542 阅读 · 1 评论 -
对象中嵌套对象,求内层对象某个相同属性和 js
前言格式:求对像obj中所有load的和,所有total的和let obj = { 'ahahs':{ load:632, total:125050 }, 'cccdddd':{ load:132, total:1250 }, 'snags':{ load:1322, total:12508 },}操作Object.values()方法返回所有的值(数组)let a = Object.values(obj) //打印a//[{load: 632,原创 2021-05-24 14:53:54 · 616 阅读 · 0 评论 -
谷歌浏览器记住密码引发的input样式问题解决
前言最近写了个登录记住密码的功能,结果和浏览器自带的记住密码冲突,导致样式变得很糟糕处理使用过渡和过渡延时input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out原创 2021-05-18 14:01:33 · 553 阅读 · 0 评论 -
关于日期函数一些整理js
原生js仿钉钉做聊天时间处理原生js仿钉钉做聊天时间处理显示从当前时间记,过去7天时日期 效果:2021-04-06 - 2021-04-13 getDay(-7) + ' - ' + getDay(0)function getDay (day) { // 获取当前时间过去7天的时间段 var today = new Date() var needDay = today.getTime() + 1000 * 60 * 60 * 24 * day // 当前时间*(-7)向后减7天原创 2021-04-13 12:04:05 · 147 阅读 · 0 评论 -
数组的初始状态保存问题(数组深copy问题)
数组的初始值保存问题问题描述:添加收件人列表页与发消息页面导航条处于同步更新状态,绑定的同一个数组需求:用户选择后点击了取消的话,取消用户本次操作选中的收件人。逻辑:当用户点击图标打开添加联系人页面,保存数据初始值addmen(){ this.fristAddressee = this.addressee this.sendMan = true this.getMan() //获取联系人列表 }, selectPersion(item){原创 2020-12-14 19:32:55 · 100 阅读 · 0 评论 -
对象数组循环的方法总结(js)
map()let array = [ {name:'张三', age:12}, {name:'李四', age:22}, {name:'王五', age:32}, {name:'赵六', age:42}];let temp = array.map(item => { return item.age>30;});console.log(temp);// [false, false, true, true]console.log(array);// 0: {name: .原创 2020-12-11 15:27:50 · 5377 阅读 · 0 评论