前端学习总结
关注
分享
扫一扫
文章平均质量分 68
27℃凉白开
csdn已变成爱奇艺，博客将会退出，以后不会更新
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ie8兼容总结
背景虽然好些年不用jquery了，不过以前学jquery源码的经验还是历历在目。最近维护老项目，需要开发一个兼容ie6的jquery插件，遇到了一些兼容性的问题，记录一下。需求需要做一个多种类型的验证码(图片拖拽，随机字符)的业务功能，因为是在多个平台上都要用且这些平台都是许多年前开发的，所以考虑做成一个jquery插件，方便维护。问题css3的兼容因为第一个版本没考虑到要兼容低版本Ie，以为只要做一个jquery插件即可，毕竟都快2022了，谁还用ie呀。所以圆角和阴影都是用了css3。但原创 2021-11-18 16:03:27 · 789 阅读 · 0 评论 -
vscode学习入门
1 vscode的结构2 vscode常用的快捷键隐藏侧边栏 command+B （增加内容区面积）zen model command+K Z折叠全部command+K command+0折叠层级command+K command+数字全部展开command+K J切换打开的文件 command+[ (切换到左边文件) tab command+] (切换到右边文件)切换终端 command+J打开侧边搜索栏 command+shift+Fvscode git原创 2021-06-19 16:42:55 · 376 阅读 · 1 评论 -
vscode中自定义代码方法
vscode中自定义代码方法1 什么是自定义代码vscode中用户可以对常用的代码片段进行编辑和保存，在使用时输入关键字能进行提示，大大提高了我们的工作效率，也保证自己的风格以及习惯。、2 怎么自定义代码进入设置-用户代码片段选择代码的语言可以看到注释中有一个例子，具体如下: "Print to console": { //触发的提示信息 "prefix": "log", //触发的关键字 "body": [ //代码片段 "console.log('$1');原创 2021-06-18 11:43:35 · 1224 阅读 · 0 评论 -
vue-cli4项目引入sass的坑 Cannot read property ‘style-resources-loader‘ of undefined
尽管很久之前就用sass了，但是昨日用vuecli4创建项目后，引入sass一直失败，一开始是提示TypeError: Cannot read property ‘scss’ of undefined使用npm i sass sass-loader --save后依然不行依旧报错错误为TypeError: Cannot read property ‘style-resources-loader’ of undefined解决办法：npm install sass-resources-loa原创 2020-09-03 09:37:58 · 11150 阅读 · 6 评论 -
工作，项目，技术学习，开源项目的整理
开源项目一款很轻量的无所不能的工具集合公司内部搭建一个工具网兼博客平台，没有广告用着爽，同事还膜拜几乎每个前端开发都会用的Chrome插件，功能太全了100%原生的JavaScript多线程和并行执行库——Hamsters.js这个库收集 Web开发的各种 JavaScript 小工具，超过 300 个模块阿里跨终端的H5游戏开发解决方案——Hilo程序员的个人知识管理神器Java...原创 2020-01-05 19:31:01 · 718 阅读 · 0 评论 -
【原创】mock websocket链接的方法
第一步 可在全局安装安装依赖npm i nodejs-websocket -g第二步 将下面代码copy到一个index.js的文件中//如果没有该段代码，客户端主动断开连接的话，会抛出tcp.read()异常，导致程序挂掉。 process.on('uncaughtException', function (err) { console.log(err); cons...原创 2019-10-11 23:35:18 · 2203 阅读 · 0 评论 -
[原创] uniapp第三方登录（一）
app登录注册教程微信小程序的第三方登录支持微信登录，而app应用支持更多第三方的登录如何获取微信appid和密钥获取appid后，在manifest.json中配置小程序的appid配置后可在Hbuild中预览小程序项目...原创 2018-12-21 16:15:26 · 7297 阅读 · 0 评论 -
app用户注册、登录原理、注册页面
app端用户登录以及保持登录原理注册:1、app客户端填写注册信息:账号 密码 昵称 。。。。。。2、提交到服务器端2.1 验证用户是否已经注册2.2 记录到数据库2.3 返回注册信息用于登录登录1、app端判断是否登录2、APP端提交登录信息2.1 服务端验证账号密码2.2 成功后返回用户信息并在app端记录注销清空本地保存的用户数据即可完成注销工作...原创 2018-12-21 16:49:47 · 10847 阅读 · 0 评论 -
[原创] uniapp踩坑-伪类的使用
项目描述：项目是使用uniapp开发，开发一个跨平台的app，但是调试是在小程序开发工具中调试。问题描述：项目中使用字体图标，想实现的效果如下，一个简单的人头图标按照以往开发web的经验，只需要css中加上before，并加上自己的字体图标的编码即可，代码如下//图标后面的数字.actionInfo_number{ float: left; margin-left:20px;}/...原创 2018-12-27 18:48:21 · 8368 阅读 · 0 评论 -
图片上传预览的简单代码
效果如下图代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <tit原创 2018-12-25 12:05:06 · 456 阅读 · 0 评论 -
页面打开403问题(非鉴权)
在项目中，做了一个门户的各个链接引用，点击门户中各链接可调到不同的平台中，但是在打开的新页面中出现403的报错。url无问题，参数也没有问题，f5刷新页面即可。后来查资料找到解决办法 原因分析： 页面中引入外网的链接资源，会产生一个新的http请求。为了安全（URL里可能包含用户信息），浏览器一般都会给这写请求头加上表示来源的referrer 字段。 所以，此时我们需要隐藏...原创 2018-12-10 18:49:47 · 4981 阅读 · 2 评论 -
[原创]小程序的appid以及密钥获取
进入微信公众号平台注册或登录进入开发模块配置生成小程序密钥(新用户2箭头中的重置应该为生成)记录下来appid以及密钥，在自己的开发程序中引入....原创 2018-12-21 12:33:28 · 19665 阅读 · 0 评论 -
[原创] 阿里巴巴矢量图标库全选技巧
在阿里矢量库中找到一个喜欢的图标库，想要全部下载，但是发现需要挨个点击添加购物车中，如下图所示，居然没找一个可以全选的按钮！！总之不知道为啥要这样设计吧。但是确实很不方便。想要全选的话，操作如下按下 F12 或者 打开浏览器开发者模式进入console的窗口输入下列代码var iconList = document.querySelectorAll('.icon-go...原创 2018-12-13 17:17:32 · 1205 阅读 · 0 评论 -
html5绘图笔记 (四)
控制填充风格** 线性渐变**CanvasGradient 代表渐变填充CanvasPattern 代表位团填充使用渐变步骤step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient对象step2:调用CanvasGradient对象的addColorStop(offset,color)向线性渐变中添加颜色，offse...原创 2018-11-28 20:42:28 · 158 阅读 · 0 评论 -
html5绘图笔记 (三)
绘制贝塞尔曲线说明：贝塞尔曲线和弧线类似，弧线是三点确定两个相交的直线两边的，绘制以两点为切点的弧形而贝塞尔曲线是四点，创建两个切线之间的弧/曲线第一步ctx.moveTo(20,20) //第一个点 开始点第二步ctx.bezierCurveTo(20,100,200,100,200,20) //6个参数，分别是其余三个点的左边，三次贝塞尔曲线。或ctx.quadra...原创 2018-11-27 22:14:29 · 250 阅读 · 0 评论 -
html5绘图笔记 (二)
设置阴影shadowBlur:阴影模糊度，浮点数越大越模糊shadowColor:阴影颜色shadowOffsetX:x方向的偏移shadowOffsetY:y方向的偏移绘制路径以下四步1 调用ctx对象的 beginPath() 方法开始定义路径2 调用ctx的各种方法添加路径3 调用ctx的 closePath 方法关闭路径4 调用ctx的 fill() 或 strok...原创 2018-11-08 19:43:29 · 230 阅读 · 0 评论 -
html5绘图笔记 (一)
在html5之前，前端是无法再html页面上动态绘制图片html5新增了一个canvas元素，相当于一个画布，可以获取一个CanvasRenderingContext2D对象CanvasRenderingContext2D提供了很多画图API画图也主要是对这个对象的操作如何在html5上画图？有三步得到dom对象调用canvas对象的getContext()方法得到CanvasRed...原创 2018-11-02 22:19:24 · 1313 阅读 · 0 评论 -
[原创] uniapp第三方登录（二）
一般我们在进入登录页面的时候回选择登录方式，以按钮的方式进行选择触发第三方的登录类型。在小程序中的登录授权时，格式被确定为使用vue文件&amp;amp;amp;lt;!-- #ifdef MP-WEIXIN --&amp;amp;amp;gt; &amp;amp;amp;lt;button type=&amp;amp;quot;primary&amp;amp;quot; open-type=&amp;a原创 2018-12-23 19:50:48 · 4666 阅读 · 0 评论 -
微信openid和unionid的关系
同一个用户在小程序和公众号的下的两个openid肯定不一样如果小程序和公众号都绑定在同一个开放平台账号下的话，用户在小程序和在公众号下的unionid是一样的如果先有公众号并且积累了大量粉丝，然后才有的小程序，然后想在小程序下也能识别公众号粉丝怎么办呢？首先将公众号和小程序关联到同一个开放平台账号通过API将公众号粉丝列表全部拉一遍，同时计算这些粉丝的unionid并保存起来用户进入小程...转载 2018-12-23 19:52:09 · 13135 阅读 · 0 评论 -
【原创】表单提交之文本输入框(三)
输入框中光标位置控制 禁止文本框记忆功能自动选定文本内容原创 2016-12-14 16:21:18 · 319 阅读 · 0 评论 -
数组随机排序（洗牌）以及 数组去重方法
/*** 数组洗牌算法，返回随机排序之后的数组*/const shuffle = array => array.sort(()=> 0.5 - Math.random())export default shuffle原创 2019-09-18 20:21:17 · 538 阅读 · 0 评论 -
[原创] 实现SVG绘画动作的效果
背景:在网上看到别人的svg图片在显示的时候是画出来的线型图，感觉很不错。研究了一下，写出下面demo,可以直接拿来运行svg基础点stroke-dasharray: 用来描边的点划线的图案范式,数值越大，虚线越宽stroke-dashoffset：属性指定了dash模式到路径开始的距离。动画效果貌似只能在svg中的path标签有效，关键的实现就是上面两个属性的使用和css3中的anim...原创 2019-07-08 17:31:54 · 1035 阅读 · 0 评论 -
前端公共模块的创建和使用
在项目中，我们常常会用到一些可复用的全局变量，如ip，时间，或者工具函数，如果在使用的时候去定义，创建，获取，会使得代码变得冗余。所以，一个好的开发者应该首先一个好的共用模块。下面只是简介一下。首先，我们定义一个专用的模块，用来组织和管理这些全局变量，并在需要的页面进行引入。一般我们会在src下创建一个common目录，来存放共用模块的脚本。然后在common目录下新建一个common.js...原创 2018-12-26 12:46:17 · 1434 阅读 · 0 评论 -
[原创] 字体图标的使用
我一般是在阿里矢量图标库中寻找自己需要的字体图标。第一步：先登录，不登录的话是无法保存你的收藏记录的，第三方登录支持github和新浪登录，第二步：查找自己需要的图标，添加入库，第三步：打开购物车的图标，查看自己添加的图标第四步：添加至项目第五步：创建项目第六步：下载第七步：拷贝iconfont.css第八步 修改css内容，这里是将图标信息转换为base64了，...原创 2018-12-25 18:26:41 · 218 阅读 · 0 评论 -
[原创] HBuildX，微信小程序模拟器报错（如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目）
今天在学习使用uniapp,开发微信小程序时第三方登录时，HBuild编辑器报了一个错误，经过定位分析，确定代码是没有问题的，报错如下如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目经过在网上查询资料，得到解决方法，只需修改HBuild配置即可找到模拟器右上角的详情按钮，点击，弹出配置信息，把最下面的2勾选框选上，再次编译下项目，即可。...原创 2018-12-24 13:06:43 · 1693 阅读 · 0 评论 -
[原创] uniapp异常报错：检测到当前使用的ADB不是HBuilder内置或自定义ADB
在使用HBuild开发uniapp应用时，报出下面错误，16:48:13.326 注：检测到当前使用的ADB不是HBuilder内置或自定义ADB：16:48:13.326 PID为：11940，进程名称：kadb.exe16:48:13.326 路径为：d:\software\kgmusic\8.2.75.20951\kadb.exe16:48:13.326 可能存在adb冲突造成真机运...原创 2018-12-18 16:56:07 · 18674 阅读 · 4 评论 -
[原创] uniapp学习笔记（1）
1. 如果是h5开发app，适配平板和手机的话，建议高度使用像素单位，而宽度使用百分比，图片使用等比缩放 2. uniapp的基准宽度是750px，如果设备宽度不是750px，则会在运行环境中计算然后放大或者缩小每个像素的值。 3. pages.json是路由文件，可配置各页面的导航栏以及内容的样式 4. tabBar导航栏可配置页面跳转，默认未在底部...原创 2018-12-18 16:52:34 · 4856 阅读 · 0 评论 -
设计模式-装饰者 学习笔记
模拟传统面向对象预研的装饰模式 首先要说明的是，作为一门解释执行的语言，给js中的对象动态添加或者改变职责是一件再简单不过的事情，var obj = { name : 'testName'}obj.name = 'testName2'虽然这种做法改动了对象本身，跟传统定义中的装饰者模式并不一样，但是却更加符合js语言特色 实际上传统面向对象语言中的装饰者模式在js中的适...原创 2018-11-02 16:28:57 · 1146 阅读 · 0 评论 -
canvas 报错记录 (一)
在执行下面代码的时候报错 var can = document.getElementById(&quot;can&quot;); var ctx = can.getContext(); ctx.content.cfillRect(500,500,200,200); ctx.content.fillStyle='red';报错如下 Failed to ...原创 2018-11-02 16:09:25 · 2851 阅读 · 0 评论 -
[原创]jquery form表单提交及验证
工具类FinanceUtil.jsvar FinanceUtil = FinanceUtil || {} ;/* * 扩展validate组件的validate方法，支持form表单的自动验证 * @param {Object} targetEl 需要验证的对象，若为form，自动验证form内所有有auto-input类的表单元素(可用元素，没有disabled) * @param {Str原创 2017-01-10 16:39:43 · 1553 阅读 · 0 评论 -
[原创] sublime自定义一些nodejs开发的快捷键
发现sublime装了nodejs的开发环境会影响正常的js开发的代码补全提示,不知道怎么快速切换两种代码补全的提示,所以修改了一些代码提示的快捷键,在nodejs的安装路径中Sublime Text 3\Packages\Nodejs\Nodejs.sublime-completions打开这个文件在最下面修改就可以了,下面都是一些自定义的快捷键. //下面都是自定义 {原创 2017-01-10 15:06:58 · 1211 阅读 · 0 评论 -
[原创] 手风琴菜单
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #subView body,ul,li{margin: 0 auto;padding: 0;font-family: 'Microsoft Yahei',Arial, sans-serif} #subView ul,#subVie原创 2017-01-07 12:45:05 · 527 阅读 · 0 评论 -
[转]jquery 常用的选择器
元素选择器$("#box") //选择id值等于box的元素，id值是唯一的，如果出现多个相同id的元素，那么只获取第一个元素$("div") //选择所有的div标签元素，返回div元素数组$(".box") //选择使用box类的css的所有元素$("*") //选择文档中所有的元素$("p.intro") //选取所有 class="intro" 的 <p> 元素$("p#demo"转载 2016-12-06 10:17:58 · 515 阅读 · 0 评论 -
【原创】表单提交之文本输入框(二)
关闭输入法html: <div name="closeInputRule"> <label for="inputRule">关闭</label> <input id="inputRule" banInputMethod="1" type="text" value="关闭浏览输入法"> </div>js:$("#inputRule").bind("keyup"原创 2016-11-22 09:33:07 · 333 阅读 · 0 评论 -
【原创】表单提交之文本输入框(一)
去除字符串两边的空格输入框去空格并判断是否为空 禁止输入原创 2016-11-13 01:11:37 · 638 阅读 · 0 评论 -
[原创]js中阻止事件冒泡
先贴上html代码<form id="form1"runat="server"> <div id="divOne" onclick="alert('我是最外层');"> <div id="divTwo" onclick="alert('我是中间层！')"> <a id="hr_three" href="http://www.baidu.com" onclick="alert(原创 2016-11-21 15:08:06 · 317 阅读 · 0 评论 -
[原创]css3 学习笔记(一)
//旋转 rotate(10deg)代表 顺时针旋转10°//可以为scale-尺寸放大缩小 skew表示倾斜角度 translate表移动距离transform:rotate(10deg); -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); //阴影四个参数 //第一个参数表示水平偏移,原创 2016-11-19 18:14:28 · 590 阅读 · 0 评论 -
jquery中的prop()和attr()方法区别
什么时候使用attr()，什么时候使用prop()？1.添加属性名称该属性就会生效应该使用prop(); 2.是有true,false两个属性使用prop(); 3.其他则使用attr();下面是官方建议使用attr和prop的使用场景 Attribute/Property .attr() .prop() accesskey原创 2016-11-15 19:50:13 · 794 阅读 · 0 评论 -
[原创]js中判断checkbox,radio是否选中
checkBox demo html <input type="checkbox" checked="" name="checkTime"> <input type="checkbox" checked="" name="strCheckTarget"> <input type="checkbox" checked="" name="strCheckUnit">用j原创 2016-11-15 19:13:23 · 657 阅读 · 0 评论 -
Jquery小技巧
1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画：// Back to top$('.top').click(function (e) {e.preventDefault();$('html, body').animate({scrollTop: 0}, 800);});<!-- Create an anchor转载 2016-11-10 15:35:34 · 283 阅读 · 0 评论