Rattenking 的前端笔记
文章平均质量分 61
在实际开发中遇到的一些CSS兼容性、不常用特性的特殊效果、以及利用CSS实现一些特殊效果。
Rattenking
迎接着黎明的曙光前行!
展开
-
Rattenking 的前端笔记 系列文章 - 总目录
前端笔记文章总目录原创 2024-09-20 14:36:21 · 828 阅读 · 0 评论 -
【JavaScript】---- 禁止浏览器打开 F12调试
禁止浏览器打开 F12调试原创 2024-06-25 10:40:22 · 482 阅读 · 0 评论 -
【JavaScript】---- 使用 Tween 实现转盘抽奖
使用现有的算法库,减少了我的工作量;在不考虑异步中奖的时候,我觉得这个实现是比较便捷的方法,当然如果需要异步中奖结果,就需要多个动画配合实现,这个功能准备将这个算法库移植到微信小程序后再实现;同一个需求,实现的方法很多,找到最适合自己的,多关注大佬的博客,学习,感觉收获满满!!!原创 2024-05-14 15:01:32 · 405 阅读 · 0 评论 -
【JavaScript】---- 浏览器图片下载
实现下载图片的方法比较多,找到适合的最快方式完成功能!!!原创 2024-04-16 09:45:00 · 612 阅读 · 0 评论 -
【webpack】----错误解决【Cannot read properties of undefined (reading ‘tap‘)】
安装 webpack-obfuscator 后,进行 js 代码混淆编译的时候报错。通常是由于版本不兼容或配置错误引起的。原创 2024-03-22 10:04:38 · 1120 阅读 · 0 评论 -
【JavaScript】---- 纯 js 实现返回页面顶部
由于直接设置 scrollTop 为 0,因此执行过程不够平滑,直接返回顶部,体验不好!实现了平滑滚动到顶部;在滚动完成后执行回调函数。原创 2024-03-19 10:15:00 · 1945 阅读 · 0 评论 -
【JavaScript】 ---- 数组元素的添加和删除
将操作数组的模式集中到一个工具类中,方便后期统一处理操作!原创 2023-12-29 10:15:00 · 439 阅读 · 0 评论 -
【解决问题】---- 解决 avue-crud 表格勾选数据翻页后界面保持选中
通过测试可以看到,页面的选择项会影响到其他页面的选择;点击保存,返回的数据却是真真选择的数据;数据在选择渲染的时候出现了混乱。由于配置属性太多,开发的时候都是需要什么,再去找什么,所以此篇博客作为一个记录,方便后期出现相同或类似问题进行查找;分析出现问题的原因,去查找文档对应的设置,完善配置;开发的时候,查看文档细心一点阅读,可以避免开发中遇到的大多数问题。原创 2023-11-08 15:43:22 · 1123 阅读 · 1 评论 -
前端笔记 ---- TerserWebpackPlugin 配置
指向剥离文件的标语文本将被添加到原始文件的顶部。 可以为 false (无标题), String 或一个函数:Function String> ,该函数将被使用存储剥离的注释的文件名来调用。 标语内容将被合并到注释中。转载 2023-05-18 09:28:15 · 6195 阅读 · 0 评论 -
前端笔记 ---- Chrome 浏览器不能跨域访问解决方案
谷歌浏览器跨域--disable-web-security无效解决办法原创 2023-04-13 20:36:35 · 3936 阅读 · 3 评论 -
前端笔记 ---- document.execCommand 函数整理
备注: 在调用一个命令前,不要尝试使用返回值去校验浏览器的兼容性。原创 2023-01-05 09:05:52 · 783 阅读 · 0 评论 -
防抖和节流(详解) 使用场景和区别
防抖策略(debounce)是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。作用: 高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间。防抖:防止抖动,单位时间内事件触发会被重置,避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯,只要有一个人进来,就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。转载 2022-11-08 14:01:47 · 8897 阅读 · 0 评论 -
【CSS3】---- 纯 css 控制 html5旋转音乐图标,控制背景音乐
2. 无限旋转3. 停止动画4. 实现className的切换1. JS 实现播放和暂停的切换HTMLJS2. JQUERY 实现3. VUE 实现JS5. 总结注意:此文章只是单纯实现音乐图标的旋转和暂停的切换,没有对背景音乐的暂停和播放进行处理;css3 的动画功能很强大,但是同时需要我们处理好不同浏览器的兼容性处理!WXRUI体验二维码我的博客,欢迎交流!我的CSDN博客,欢迎交流!微信小程序专栏前端笔记专栏微信小程序实现部分高德地图功能的DEMO下载微原创 2022-07-07 10:59:16 · 1532 阅读 · 2 评论 -
火狐浏览器安装插件步骤
基本准备 安装火狐浏览器安装插件的基本步骤 打开火狐浏览器—>右上角的面板展开—>打开面板中的【附件组件】—>选择左侧的【扩展】选项—>在右侧输入框输入需要安装的插件名称,例如:RESTClient—>搜索完成如果找到该插件点击【+添加到Firefox】—>安装完成(在浏览器的右上角有对应的插件图标)安装步骤图文展示...原创 2018-05-17 13:46:12 · 53922 阅读 · 1 评论 -
正则表达式验证手机号码是否正确
使用场景 在需要手机登录,验证等场景时,需要先在前端对输入手机号码进行验证!验证的正则表达式let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;应用实例function codeVerification(phone){ let phoneCodeVerification = /^[1...原创 2018-05-02 17:22:19 · 25098 阅读 · 3 评论 -
图片在线转换base64
DEMO预览图片在线转换base64图片在线转换base64—-实现方法 采用 FileReader 对象的 readAsDataURL 方法进行图片的转换!JS实现获取上传按钮,文字按钮,显示base64的结果,预览按钮,预览图片显示;判断当前浏览器是否支持 FileReader 对象;给上传按钮绑定 onchange 事件,判断上传的是图片文件;清...原创 2018-04-28 17:05:39 · 2995 阅读 · 0 评论 -
打乱数组顺序的三种方法
sort排序法(最简单的打乱数组顺序的方法)原理: 利用sort用法:arr.sort(compareFunction) 如果 compareFunction(a,b) 返回的值大于 0 ,则 b 在 a 的前边; 如果 compareFunction(a,b) 返回的值等于 0 ,则a 、b 位置保持不变; 如果 compareFunction(a,b) 返回的值小...原创 2018-03-16 11:20:12 · 70828 阅读 · 14 评论 -
百度地图----浏览器定位API
浏览器定位API Geolocation第一步 引入 script type=”text/javascript” src=”http://api.map.baidu.com/api?v=2.0&ak=你的密钥”>第二步 放地图的div盒子 div id=”l-map”>第三步 js代码// 百度地图API功能var point = null;var map = new BMap.Ma原创 2017-10-23 16:57:33 · 940 阅读 · 0 评论 -
百度地图----解析经纬度
解析经纬度 Geocoder步骤直接js代码 // 百度地图API功能 var point = null; var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.395645,39.929986), 7); map.enableScrollWheelZoom(true);原创 2017-10-23 17:06:48 · 2598 阅读 · 0 评论 -
百度地图----浏览器定位获得详细地址
浏览器定位获得详细地址 // 百度地图API功能 var point = null; var map = new BMap.Map("l-map"); map.centerAndZoom(new BMap.Point(116.395645,39.929986), 7); map.enableScrollWheelZoom(true); //获取浏览器定位原创 2017-10-23 17:13:03 · 4278 阅读 · 1 评论 -
Uncaught SyntaxError: Unexpected token :
json格式错误Uncaught SyntaxError: Unexpected token :该错误是由于返回的结果格式错误导致,我出现这个错误的原因是由与jsonp的跨域请求,但是返回的json而导致的错误。在这里由于jsonp的跨域请求返回的应该是callback(json);但是接口返回的是json,所以错误。解决方法:1、改造后台的接口,让后台将json放在你jsonp发给后...原创 2017-06-16 16:58:44 · 3520 阅读 · 0 评论 -
throw er; // Unhandled 'error' event
错误:throw er; // Unhandled 'error' event发现是nodejs的过程中遇到了如下的运行错误 events.js:72 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE at errnoException (net.js:9...原创 2017-10-10 15:36:55 · 4672 阅读 · 0 评论 -
如何在HTTPS 网页中引入HTTP资源: Mixed Content?
错误:this request has been blocked;the content must be served over https解决方案相对协议 对于同时支持HTTPS和HTTP的资源,引用的时候要把引用资源的URL里的协议头去掉,浏览器会自动根据当前是HTTPS还是HTTP来给资源URL补上协议头的,可以达到无缝切换。iframe方式 使用iframe的方式引入HTTP资源,原创 2017-10-23 10:20:30 · 16834 阅读 · 7 评论 -
git常用命令
1、初始化仓库 $ git init 初始化在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹. $ git add 仓库跟踪 在提交之前,Git有一个暂存区(staging area),可以放入新添加的文件或者加入新的改动. commit时提交的改动是上一次加入到staging are...原创 2017-05-10 17:09:56 · 432 阅读 · 0 评论 -
三十秒的小习惯,一辈子的大影响
没有什么快速见效的办法,我知道这一点。作为一个社会科学迷,读了无数关于这个主题的书和博客,并且尝试了其中的很多建议 —— 然而大部分都是徒劳的。因此,我可能没有资格如此的轻描淡写。经过了数月的实践验证,我写这个主题仅仅是因为我已确信,在我听过的所有建议中,这条是最简单的之一,也是最好的之一。它不是来自一本畅销书 —— 事实上没有出版商想要出版它:即使是最能说会道的管理思想家也很难围绕它写出一本...转载 2017-06-16 16:08:05 · 416 阅读 · 0 评论 -
this request has been blocked;the content must be served over https
1、错误:this request has been blocked;the content must be served over https2、遇到错误的情况:在github page搭建自己写的页面时。搭建成功后,访问自己的页面返回的错误。我的页面阻止的是jQuery的官网引入的jQuery。<script src="http://code.jquery.com/jqu...原创 2017-07-19 10:15:32 · 26712 阅读 · 0 评论 -
github page搭建自己的页面
在github上创建一个公开的项目,这个就不用解释了。按照箭头的顺序,创建一个公开的项目。2.进入项目 ----> setting3、打开settings,有一个Github Pages 的设置,点击 source 中的本来的 None ,使其变成 master 分支,也就是作为部署github pages 的分支,然后点击 save。4、页面刷新之后,再看 gi...原创 2017-07-19 10:48:56 · 847 阅读 · 0 评论 -
道破人性
搜狐新闻《朋友圈最火的8张图片,道破人性》 1,懒惰与行动没有行动,懒惰就会生根发芽;没有梦想,堕落就会生根发芽;时间越长,根就越来越深,到时候想站起来就会是件很困难的事。人与人之所以拉开距离,不在其它,就在于行动力。不行动,梦想就只是好高骛远;不执行,目标就只是海市蜃楼;不动手去做,理想生活就只是镜花水月,只能在幻觉里空欢喜一场。如果你喜欢一件事,并且确认这件事非常...转载 2017-08-25 10:40:26 · 409 阅读 · 0 评论 -
前端笔记列表
基础知识神奇的position:sticky双飞翼布局的原理圣杯布局的原理Browser 对象(一、history)JS获取当前网址信息前端常见面试题前端自适应—-单位remnode.js 获取url中的各个参数nodejs之url模块nodejs之querystring模块如何写出优美的 JavaScript 代码?获取某个数内的质数github page搭建自己的...原创 2018-01-30 16:58:21 · 3097 阅读 · 0 评论 -
ES6学习之路1----变量的声明
1、var 它是variable的简写,可以理解成变量的意思。在ES6之前,JS声明变量都是采用的var。实例1:var str = "Hello World!";console.log(str);//Hello World!实例2:var a=2;if(true){var a=3;}console.log(a);//3实例3:for(var i=0;i<10;i++){console原创 2017-11-28 17:41:36 · 479 阅读 · 0 评论 -
ES6学习之路2----变量的解构赋值
什么是解构 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。简单的解构赋值实例:let [a,b,c] = [1,2,3];等同于:let a = 1,b = 2,c = 3;数组的解构赋值 数组的元素是按次序排列的,变量的取值由它的位置决定。1.只要等号两边的模式相同,左边的变量就会被赋予对应的值。 2.如果解构不成功原创 2017-11-29 16:20:10 · 321 阅读 · 0 评论 -
ES6学习之路3----rest参数与扩展运算符
什么是rest参数(…rest) ES6引入rest参数(形式为“…变量名”),用于获取函数的多余参数。rest参数之后不能再有其他参数(即只能是最后一个参数)。函数的rest参数ES5写法:function fn(){ for(var i = 0; i<arguments.length ; i++){ console.log(arguments[i]); }原创 2017-11-30 16:17:55 · 2941 阅读 · 0 评论 -
ES6学习之路4----字符串模版
什么是字符串模板(`) ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings)。特点: 除了使用反撇号字符 ` 代替普通字符串的引号 ’ 或 ” 外,它们看起来与普通字符串并无二致。 实例:let str = `ES6引入了一种新型的字符串字面量语法`;let str0 = 'ES6引入了一种新型的字符串字面量语法';console.l原创 2017-12-01 17:05:56 · 372 阅读 · 0 评论 -
ES6学习之路5----数组方法
1. Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。实例1:let obj = {'0':1,'1':2,'2':3,length:3};ES5:console.log([].slice.call(obj))原创 2017-12-04 16:23:26 · 383 阅读 · 0 评论 -
ES6学习之路6----箭头函数
什么是箭头函数 ES6允许使用“箭头”(=>)定义函数。ES5:var add = function(param){console.log(param);}add(9);//9ES6:let add = param => console.log(param);add(9);//91.如果箭头函数只有一句话并且返回值ES5:var sum = function(a,b){return原创 2017-12-07 13:45:55 · 1273 阅读 · 0 评论 -
ES6学习之路7----set数据结构
什么是set ES6提供了数据结构Set。类似于数组,但是没有重复值。1.Set本身是一个构造函数,用来生成Set数据结构对set数据结构进行操作的方法add(value):添加某个值,返回Set结构本身。delete(value):删除某个值,返回一个布尔值,表示删除是否成功。has(value):返回一个布尔值,表示该值是否为Set的成员。clear():清除所有成员,没有返回值。原创 2017-12-07 16:08:45 · 369 阅读 · 0 评论 -
ES6学习之路8----WeakSet数据结构
什么是WeakSet WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。1.WeakSet 的成员只能是对象,而不能是其他类型的值。let weakSet = new WeakSet();weakSet.add({a:'first',b:'one'});//WeakSet {{a:'first',b:'one'}}weakSet.add(1);//原创 2017-12-08 17:46:19 · 302 阅读 · 0 评论 -
ES6学习之路9----Map数据结构
什么是Map数据结构 Map数据结构类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。原创 2017-12-14 13:29:22 · 532 阅读 · 0 评论 -
ES6学习之路10----Symbol
什么是Symbol ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。 JavaScript 语言的七种数据类型:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)、Symbol。 作用:Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字原创 2017-12-14 14:52:07 · 837 阅读 · 0 评论 -
getTime()方法在苹果系统的bug
前几天我在测试苹果系统的一个秒杀页面时发现,“yyyy-MM-dd HH:mm:ss”这种格式的时间在苹果系统中直接用getTime()方法会返回NaN。 我们先来看看在安卓系统中的倒计时写法,实例1:时间格式:2016-12-30 23:59:59 <html lang="zh-CN"><head> <meta charset="utf-...原创 2017-04-18 10:40:57 · 2121 阅读 · 0 评论