前端
文章平均质量分 64
与前端相关的任何东西,一般是js css 和html
towrabbit
hi大家好,我叫角角,是兽圈的一员,种族是兔子,普通的前端工程师,知道一点点WebGL,喜欢和平,但是如果有人扰乱了我平静的生活的话,我也会奉陪到底
展开
-
vscode 移动到末尾并且换行快捷键
ctrl+enter原创 2020-07-14 10:12:01 · 4887 阅读 · 2 评论 -
js 奇怪的面试题出现了
题目A、B、C 是 3 个字符串。把 A 中包含的所有 B 都替换为 C,如果替换以后还有 B 就继续替换,直到 A 不包含 B 为止。请编写程序实现以上功能。不允许使用系统提供的字符串比较、查找和替换函数。以上程序是否总是能正常输出结果?如果不是,列出哪些情况下无法正常输出结果,尽可能详细和全面。完全不会这样的题目, 但是可以看出是个算法题, 不能查找字符串是很艰难的一部分解决方案字符串替换需要 用KMP或者BF算法js// KPM算法// 获取部分匹配值表fu原创 2020-06-16 01:01:50 · 642 阅读 · 0 评论 -
js随机颜色生成
function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color;}//返回字符...原创 2020-01-03 15:41:20 · 225 阅读 · 0 评论 -
检测一个已经排序好的数组中任意两个元素的和是否存在等于某个值
检测一个已经排序好的数组中任意两个元素之和是否等于某个值题目的要求是检测一个已经按照从小到大的方式排序的数组中,检测任意两个数的和是否存在某个值,多个也可,只有一个存在就成立。例子这有一个数组:var arr = [1,2,3,4,5,6,7,8,9]现在需要检测该数组的任意两个元素中是否存在两个值相加等于5 如果存在直接返回true否则返回false自己想到的第一个方案: ...原创 2018-10-30 15:32:32 · 826 阅读 · 0 评论 -
使用Web Audio与three.js实现音乐可视化
简介HTML5可以不借助其他的插件仅仅通过浏览器实现非常酷炫的事情,而这篇文章就是关于借助three.js以及Web Audio接口来实现声音可视化的。Web Audio允许你在浏览器端操作音频,需要了解更多关于Web Audio的相关信息请移步至这 MDN Web Audio API。而关于THREE.JS,官网上说是一个让创建WebGL应用变得简单的javascript 3D库。这篇文章的...翻译 2018-10-10 12:01:15 · 6491 阅读 · 0 评论 -
vue <slot></slot> 插槽用于展现使用模板时候 内部的内容
起因在vue组件使用的过程中,出现在模板的内部的内容会被默认替换,比如下面的例子 <div id="app4"> <temp1>在模板使用的时候内部写的内容</temp1> </div> <script> Vue.component('temp1',{ data:...原创 2018-10-14 21:05:32 · 959 阅读 · 0 评论 -
javascript map函数的用法
map()函数根据一个回调函数创建一个新的函数,它会遍历数组中的每一个值例子 var arr1 = [1,3,5,6,8,19] const map1 = arr1.map(function(singleEl){ return singleEl*2; }) console.log(map1) //返回的map1函数数组为[1,6,10,12,16,38]回调函数可用的参数...原创 2018-10-14 08:15:07 · 13155 阅读 · 2 评论 -
【font-spider】网页中引用字体文件过大的解决办法,网页字体文件压缩
font-spider(字蛛)官网:字蛛github源码安装先要安装npm与node安装好之后就可以直接安装字蛛我用了centos的服务器 用npm全局安装font-spider# npm install font-spider -g安装之后输入# font-spider看到下面的就说明安装成功了使用方式首先要有项目中的html文件 在其外联的css样式中要规定字体文...原创 2018-09-27 10:46:11 · 5169 阅读 · 3 评论 -
关于逻辑时间与渲染时间的小点子 增量时间 逻辑与渲染
在看别人代码的时候看到这么一段:var delta;function loop(){ var now = new Date() - 0; var d = (now - delta)/(1000/60);//此处delta为上一帧的时间点 delta = now; update(d); render(); requestAnimationFram...原创 2018-09-09 08:34:23 · 712 阅读 · 0 评论 -
改装vue-element-admin
问题与需求公司需要重做一个erp系统,所以个人想根据已有的框架改一个,自己是前端,对于vue熟悉一些于是找了一个vue后台管理系统框架。最后选择了vue-element-admin选择原因vue-element-admin在github上有23kstar 超出了其他同类型的资源,而且功能已经较为齐全了,所以只要选择部分功能改装一下,加上接口,应该就可以使用了。遇到的问题这个是一个个人项...原创 2018-11-30 21:50:58 · 2787 阅读 · 0 评论 -
es6 对象合并 class类中的默认参数 对象默认属性
问题我想要创建一个类,生成的对象有默认属性,同时也可以通过传入参数的形式修改其默认属性。例如:我有一个person类 他有age 和 name两个属性 初始化的时候属性分别为18 和 towrabbit。但是创建新的person对象的时候,我可以重新定义对象的属性 比如 我可以只把age改了,改成22,或者 只改名字 改成’角角兔’。解决Object.assign(target, …s...原创 2018-12-19 17:41:09 · 4088 阅读 · 0 评论 -
阿里云oss对象存储图片预处理
点子最近发现阿里云oss对象存储还有图片处理技术,只要图片链接附加一些参数信息,可以将处理之后的图片发送过来,相比起先发送再处理要有很多好处。优点不需要本地处理图片了发送的图片是处理过的比如假如是缩小版的话就能减少带宽使用图片可以加水印费用图片处理费用如下也就是说每个月处理的图片在10TB以下是免费的,大于10GB的部分按照0.025元/GB进行计算,计算的时候按照图片原有大...原创 2018-12-14 21:46:28 · 4533 阅读 · 0 评论 -
【小东西】 字符串形式的加载条
加载条一般来说,加载条就是可以让用户看到目前的加载情况,最重要的是知道当前状态所需要加载的总量,以及目前加载的量。在网页加载的过程中,可以让某样东西在加载之后完成一个回调,使加载的总数+1。直到所有的东西都加载完毕(100%)这小段代码的目的输入0-1之间的数字(加载情况),并且输入所需要的加载条的最高字数,返回一个字符串形式的加载条let logProgress = (progress...原创 2019-05-12 23:09:03 · 349 阅读 · 0 评论 -
web端如何获取笔压 web端获取笔压的js库
web端为什么要获取笔压这是我一直以来的一个疑问,在web端可以获得笔压么,比如一个如果开发一个web端的画板,使用canvas制作,假如客户端所用的设备是一个手绘板,能够获取笔压的话肯定可以让其效果更好。事实上我在之前找了好久都没有找到过已经成熟的解决方案,直到一天我找到了pressure.js什么是pressure.js...原创 2019-08-04 22:34:30 · 2154 阅读 · 0 评论 -
VScode注释与取消注释快捷键
// 注释Ctrl+K+C取消//注释Ctrl+K+U/* */ 多行注释Alt + Shift +A原创 2019-08-08 17:44:14 · 27346 阅读 · 0 评论 -
如何在webpack项目中添加文件夹映射绝对路径
要求(针对的情况)在webpack项目中有很多的引入是需要加一个特定的前缀的那么怎么映射文件位置呢例如我需要把import { xxx } from "src/components/bar/slideBar.vue'改成更为简单的import { xxx } from "@bar/slideBar.vue'需要怎么做呢?解决办法webpack配置文件中加入module.exp...原创 2019-09-30 12:35:08 · 1582 阅读 · 0 评论 -
【three.js学习笔记】06 自定义几何体的创建 对象克隆
three.js可以生成几种已经设定好的几何体,比如锥体,球体,圆柱体等,three.js也提供了工具可以自己通过顶点来创建自定义的几何体创建自定义顶点var vertices = [ new THREE.Vector3(0,2,0), new THREE.Vector3(-1,0,0), new THREE.Vector3(0,0,1), new THRE...原创 2018-08-08 22:49:06 · 2764 阅读 · 2 评论 -
【freecodecamp】更新仓库 Inventory Update
题目要求freecodecamp 上面的一个练习题 题目要求是: 依照一个存着新进货物的二维数组,更新存着现有库存(在 arr1 中)的二维数组. 如果货物已存在则更新数量 . 如果没有对应货物则把其加入到数组中,更新最新的数量. 返回当前的库存数组,且按货物名称的字母顺序排列.当你遇到困难的时候,记得查看错误提示、阅读文档、搜索、提问。问题分析1.更新的顺序要按照后面的数组来...原创 2018-08-11 15:02:10 · 309 阅读 · 0 评论 -
webstorm 移动到末尾并且换行快捷键
起因webstorm编译器经常用到,比如下面function(){ console.log(&quot;fuck&quot;);}我刚写完fuck光标在fuck后面,那么我要换行以前一直是先end 再enter,后来发现有个快捷键可以快速地直接移到第二行 就是:shift+enter哇 成功地从一行代码的中间直接换到第二行,完美!...原创 2018-08-07 08:34:58 · 5312 阅读 · 3 评论 -
【three.js学习笔记】03 物体的运动
在上一章中,我们已经完成场景,物体的创建并且添加光影,在这一章中我们尝试让物体运动起来 众所周知动画是一帧帧的静态图像构成的,因此在浏览器中的3d绘制也是类似的,每一帧中物体位置、大小等情况发生变化,并且串联在一起就变成了动画。 现代浏览器中提供了高效的重新渲染场景的解决方案,就是requestAnimationFrame()这个方法,用这个方法可以定义所有的绘制操作,浏览器会进行高效平滑地绘...原创 2018-05-04 22:25:02 · 3220 阅读 · 0 评论 -
【freecodecamp】练习题Where art thou 对象数组比较 返回有相同属性值的数组
题目需求:写一个 function,它遍历一个对象数组(第一个参数)并返回一个包含相匹配的属性-值对(第二个参数)的所有对象的数组。如果返回的数组中包含 source 对象的属性-值对,那么此对象的每一个属性-值对都必须存在于 collection 的对象中。例如,如果第一个参数是 [{ first: “Romeo”, last: “Montague” }, { first: “Mercu...原创 2018-05-17 13:16:27 · 245 阅读 · 0 评论 -
three.js 用中文字作为贴图
闲来无事,把three.js其中有一个例子改了一下,变成从一个中心点喷射出中文字的例子,下面直接贴代码好了 html:&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;t原创 2018-04-21 13:52:15 · 7137 阅读 · 0 评论 -
【自己的整理】Vue入门使用
为什么要用vue写这篇博客的时间,2018年4月20日。我们为什么要用vue 前端框架层出不穷的今天,选择一个较为主流同时能让自己事半功倍的框架是必不可少的,同时vue作为三大主流框架之一发展迅速,如果还没有选择好用哪个框架,那不如稍微考虑一下,只要选定一个 好好做下去就好了,即便是选angular或者react都是一样的,他们都是非常不错的前端框架。 在这想吐槽一下,angular1...原创 2018-04-20 21:09:11 · 824 阅读 · 2 评论 -
使用聚合数据获取当地天气 天气接口
也是freecodecamp的一个任务,要获取通过天气接口获取天气 html:<div ng-app="Weather"> <div class="container" ng-controller="MainCtrl"> <div class="row"> <header class="c原创 2018-04-23 21:12:03 · 2141 阅读 · 7 评论 -
【freeCodeCamp】 random quote machine 随机格言显示器 json调用
喵的,这个随机格言显示器用了我好长的时间,因为不想做的那么简单,怎么也要酷炫一点对不对。然后在改了一个星空插件的基础上做出了这玩意 星之语 做这个需要完成完成:功能#1: 点击一个按钮就生存一个新的随机引用短语。功能#1: 点击一个按钮就把这个引用短语发到twitter中。其实就这两点来说还是比较简单的,第一个是对于在freeCodeCamp前面知识的综合复习 第二个是对于分享...原创 2018-04-23 20:10:36 · 864 阅读 · 1 评论 -
【自己的整理】页面滚动时触发动画特效 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果,虽然动画效果就像ppt里面的动画效果一样。。。环境设置添加动画效果,首先要设置环境,第一步就是先要引入相应的js 和css 需要引入的js:wow.js 本案例中建议在头部引入这个js不然可能会出现页面先加载然后动画再出现的情况,这样显...原创 2018-04-18 20:07:01 · 3243 阅读 · 0 评论 -
css3 flex布局的使用 图片文字垂直居中排列 图文混排垂直居中 display:flex
遇到的问题在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法;css代码display:flex;flex的是Flexible的缩写,意为弹性。可以在单行或者多行的盒状模型中提供很好的灵活性,所以它也是自适应友好的。图文混排垂直居中基本用法用flex实现文字和图片在同一行的时候的垂...原创 2018-03-20 21:41:10 · 27250 阅读 · 0 评论 -
【three.js学习笔记】04 dat.gui 组件使用
dat.gui组件使用dat gui组件可以方便地改变某些值,并快速预览这些值的改变所产生的变化 远程调用: https://threejs.org/examples/js/libs/dat.gui.min.js在加入这个script之后 对这个进行初始化,这样我们才能知道需要更改哪些变量://创建一个需要进行改变的控制变量对象var guiControl = new fun...原创 2018-05-05 22:33:27 · 2419 阅读 · 1 评论 -
swiper的基本使用
swiper是什么?swiper是一款轻量级的轮播图插件,不仅支持pc端更是为移动端而生,用它可以快速地做出一个轮播图,或者扩展使其做出复杂的轮播效果。基本用法swiper使用需要两个文件,一个是swiper.css,里面规定了一些在这个滑动轮播插件中常用的样式,当然如果你愿意的话可以自己定义样式 另外一个是swiper.js这个是插件的主体部分。 在页面中引入这两个文件之后首...原创 2018-06-10 11:12:06 · 42732 阅读 · 6 评论 -
node.js 处理ajax get和post信息
node.js 处理get请求要做的准备工作1.express依赖包 2.url模块 用于对url格式的字符串进行解析,返回一个对象。根据不同的url进行处理,返回不同的数据。创建js文件:getApi.js/*引用模块*/var express = require('express');var app = express();var url = require('url...原创 2018-08-14 16:05:28 · 4213 阅读 · 1 评论 -
将html内容转为canvas内容的实现方法 将html转为图片的方法 html2canvas.js的使用
介绍因为要做记录将html的内容转成canvas并且作为图片显示。 其实是因为要做一个H5页面,类似于小测试,最后的测试结果是以图片输出的(其实canvas也能直接长按保存)。在网上找到了一个js库可以把html的元素转为canvas,特此记录以免自己忘记了html转为canvas的库: html2canvas.js官网 意思就是 html to canvas (html 转 can...原创 2018-07-31 18:07:15 · 20492 阅读 · 2 评论 -
【freecodecamp】 简易计算器项目
freecodecamp上的项目习题,制作一个简易的计算器。因为有eval()这个函数。所以做起来非常简单eval():传入一个表达式字符串计算并且输出结果; 例如 console.log(eval("1+1"));//2按照freecodecamp中国站上面的例子改版 自己做了一个: html:<div class="block640" id="...原创 2018-07-31 10:57:48 · 312 阅读 · 0 评论 -
【freecodecamp】 Exact Change 收银机程序
要求设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) 作为第三个参数.cid 是一个二维数组,存着当前可用的找零.当收银机中的钱不够找零时返回字符串 “Insufficient Funds”. 如果正好则返回字符串 “Closed”.否则, 返回应找回的零钱列...原创 2018-07-31 08:04:27 · 663 阅读 · 0 评论 -
【freecodecamp】多个数组求对等差分数组 Symmetric Difference
该题目的要求创建一个函数,接受两个或多个数组,返回所给数组的 对等差分(symmetric difference) (△ or ⊕)数组.给出两个集合 (如集合 A = {1, 2, 3} 和集合 B = {2, 3, 4}), 而数学术语 “对等差分” 的集合就是指由所有只在两个集合其中之一的元素组成的集合(A △ B = C = {1, 4}). 对于传入的额外集合 (如 D = {2...原创 2018-07-29 15:55:27 · 284 阅读 · 0 评论 -
【freecodecamp】Validate US Telephone Numbers 验证是否为美国电话
//Validate US Telephone Numbersfunction telephoneCheck(str) { // 祝你好运 //过滤掉有特殊符号以及不对称括号的 以及对括号内不是包含三个数的 if(str.indexOf(")") &gt;= 0 &amp;&amp; str.indexOf("(") &lt; 0)return false;原创 2018-07-29 15:43:30 · 509 阅读 · 0 评论 -
【freecodecamp】Arguments Optional add(1)(2) 闭包与参数
function add() { var args = arguments; var args1 = args[0]; function add2(){//一个闭包 console.log("add2函数触发,arguments[0]:"+arguments[0]+"类型:"+typeof(arguments[0])); ...原创 2018-07-29 08:54:25 · 267 阅读 · 0 评论 -
【自己的整理】【jQuery插件】 使用canvas创建折线图
使用canvas创建折线图一个网友的很常规的需求,要根据数据在一个canvas画布元素上画一个折线图,最开始做了一个很土的版本,现在自己想想还是弄个插件吧于是就有了这篇文章。创建jquery插件标准模板既然是一个插件就要按照基本法来,所以先要创建一个标准的jquery插件模板:html> head> title>用canvas根据数据创建折线图ti原创 2017-12-05 22:08:00 · 1632 阅读 · 0 评论