前端小基础
就一些小基础
我乃小神神
这个作者很懒,什么都没留下…
展开
-
moment.js 获取某个日期当天的0点的时间缀和24点的时间缀
时间戳原创 2022-10-18 12:16:48 · 4381 阅读 · 0 评论 -
ant design 3.x中upload组件 上传图片压缩
不想描述多余的,直接看代码简单直接const [defaultFileList, setDefaultFileList] = useState([]); <Upload accept="image/*" customRequest={uploadImage} onChange={handleOnChange} listType="picture-card"原创 2021-09-13 10:58:37 · 1539 阅读 · 0 评论 -
base64图片压缩并转换二进制流
base64 压缩function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWi.原创 2021-07-28 17:44:07 · 750 阅读 · 0 评论 -
获取当前base64的大小
const getImgSize = str => { var strLength = str.url.length; var fileLength = parseInt(strLength - (strLength / 8) * 2); var size = ''; size = (fileLength / 1024).toFixed(2); return parseInt(size);};原创 2021-07-28 17:40:22 · 994 阅读 · 0 评论 -
移动端H5页面中1px边框的解决办法
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的 移动端1px像素问题。简书中描述很好的文章,细节可以点击进去看,如果直接想看代码实现,请看下面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="ini.原创 2021-03-25 23:35:53 · 998 阅读 · 0 评论 -
删除URL中指定参数
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script> /** * 删除当前url中指定参数 * @param names 数组或字符串 * @returns {string}原创 2020-12-11 22:32:42 · 1451 阅读 · 0 评论 -
笔记记录,不定时更新
赋值运算符原创 2020-11-28 00:03:04 · 137 阅读 · 0 评论 -
Promise.all 踩坑记录
分享一个近期自己遇到的一个小问题。感觉自己真的是脑壳打铁,当时竟然卡壳了,特地记录一下需求是这样的,一个数组列表里面需要一些特地的数据,这个数据可能有很多,然后拿到特定数据的id,去请求了当前特定id 的详情,然后拿到里面的数据,再渲染回来到页面上思路大概就是拿到特定的数据,然后拿到id 去循环请求接口,嗯,由于是紧急需求,所以当前并不考虑性能的问题,然后后面这个模式其实已经修改了,因为如果数据很多的话,可能会涉及到性能问题,所以,当时就后来后端进行处理了数据let dataA=[{id:1,原创 2020-09-14 20:15:00 · 370 阅读 · 0 评论 -
手动实现一个防抖(deboumce)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>防抖</title> </head> /* * 需要利用定时器, * 当我们执行这个函数时,会生成一个定时器, * 但是如果你重复执行这个函数,每次执行函数的第一步是清除上一次的定时器, * 这样就可以达成只有触发操作后超过指定的间隔说明这一次触发才有效,否则就要重新计时等待原创 2020-05-08 18:35:41 · 448 阅读 · 0 评论 -
手动实现函数节流(throttle)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> /* * 函数节流 * 简单地讲,就是让一个函数无法在很短的时间间隔内连续调用,只有当上一次函数执行后过了你规定的时间间隔,、 * ...原创 2020-05-08 17:06:18 · 544 阅读 · 1 评论 -
Web Notification桌面推送消息
有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app,如果下载不了它,也是非常糟糕的体验。如今虽然已经有很多种技术去尝试着解决这一问题。而随着离线页面的出现,一些问题已经得到了解决。原创 2020-04-27 19:15:13 · 375 阅读 · 0 评论 -
3d 旋转(摘抄)
实现代码<cube> <side></side> <side></side> <side></side> <side></side> <side></side> <side></side></cube>cs...原创 2020-04-17 11:51:08 · 153 阅读 · 0 评论 -
input 只能输入数字和小数点,并且指定小数点后几位
let quantityScale =‘2’ let re = new RegExp('^(0|[1-9][0-9]*)(\\.[0-9]{0,' + quantityScale + '})?$'); if (re.test(e.toString()) || e === '') { /* * 满足条件 */ }原创 2020-04-13 16:44:33 · 1249 阅读 · 0 评论 -
人民币数字转大写
你是不是也遇到过这样的一个需求,就是将 人民币数字转为 大写汉字,例如下面这样其实这个很简单的,思路如下首先定义一个函数 let money=1314520const moneyTransfer=(money)=>{/** 先将传入值进行一次转换,确保是传入是数字* 不知道 parseFloat 是咋用的,看下面第一张图片,虽然我也经常忘记,哎,*/ ...原创 2019-11-12 23:48:34 · 419 阅读 · 0 评论 -
HB法币交易头像实现
正巧最近我在做OTC 项目,我就肯定要看一下龙头大哥,hb的做法呀,简单页面如下一开始我想到的用户头像是根据随机数来实现的,然后我就稀里糊涂的写了一个随机数实现背景颜色,代码如下/* - 背景颜色随机*/ function randomBackground(){ var r = Math.floor( Math.random()*256); ...原创 2019-11-12 00:17:03 · 442 阅读 · 0 评论 -
React中引入less
2019年4月27 21:16坐标成都22岁的你,一定要努力原创 2019-04-27 21:18:21 · 19725 阅读 · 3 评论 -
网易云信IM讲解
本按钮只针对H5版本讲解,前端部分网易云信H5地址下载1 demo下载首先下载当前当前demo,并本地运行,由于网易云信提供的是采用的是node中间件的模式,所以你如果直接运行 npm run dev 是运行的打包命令,你需要运行 npm run server,来运行他当前的demo首先去网易云信控制端注册 注册完成之后,进入控制台,获取APPkey,因为这个是需要进行唯一通信的...原创 2019-04-08 08:55:58 · 4302 阅读 · 1 评论 -
基于vue2.0x 的即时通讯(云信版本)
即时通讯听着很难,但是了,其实也的确不简单,websocket 可以多了解一下网易云信 vue版本 https://github.com/netease-im/NIM_Web_Demo_H5可以先看看网易写的代码,的确写的很好,接下来步入正题,如果想直接用,引入例子,向下看准没有错先下载demo,中间有部分代码我都省略,到时候可以去我的github上看,直接引入自己项目,其实最容易...原创 2018-12-17 14:36:21 · 5837 阅读 · 2 评论 -
Node.js基础搭建服务测试
首先确保安装node,下载地址 node.js下载地址 还是下长期维护版本的比较好,建议不要下载新版本,此案例,针对windows下的哈然后你就是傻瓜式的安装了,一步步的安装,然后一直下一步,这个安装是全局安装,判断安装成功之后是否存在就打开命令行windows +R 然后再输入 cmd ,然后再输入下面图片中的命令 node -v接下来的就更有意思了(我这个是针对没有基...原创 2018-11-09 16:38:42 · 226 阅读 · 0 评论 -
使用js替换数组中元素
js替换数组元素记得我最近刚刚做的一个项目,后端返回的一个数组对象,里面的图片的地址有问题,一个在这个ip上一个在另一个ip 上,我问他咋办,他说,你要自己把那个返回的数据重新修改一下就是下面这种,只替换a 中的http后面的ip 地址为当前ip地址其他保留,我去。这个要求可真烦,但是没有办法,谁叫我刚刚入职了,没办法,好吧我就来实现吧 let conter...原创 2019-03-17 21:13:37 · 25913 阅读 · 4 评论 -
ES6的小总结
es6是新一代的JavaScript 的标准,尤其你要学习React,那就必须要学es6啊,因为不然,你压根就是蒙的,我后续也会更新react 的博客,es6的几个常用的更新一下**ForEach ** var conlors = ["red", "123", "789"] conlors.forEach(function (r) { con...原创 2018-12-21 17:17:49 · 355 阅读 · 0 评论 -
JavaScript charAt() 方法运用
一个关于取字符串中的值的方法 charAt今天偶然同事问了一个问题,如何取到字符串中的每个值,我第一瞬间反应的是,用下标撒,循环打印撒,不就行了,然而并不行,因为是字符串并不是数组,一瞬间就尴尬了,竟然不会做,后面就查阅了一下资料,看来自己的虽然做了这么久了,但是有些基础都忘了,好尴尬,接下来就介绍解决问题的流程,先来说问题给定字符串J 代表石头中宝石的类型,和字符串 S代表你拥有的石头。 ...原创 2018-11-07 11:40:25 · 3621 阅读 · 0 评论 -
关于一个最简单的Javascript算法,给定一个整数数组和一个目标值,找出数组中和为目标值的两个数
关于一个最简单的Javascript算法给定一个整数数组和一个目标值,找出数组中和为目标值的两个数,你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。得到对应值的下标组合有一个数组值 let num= [ 2 ,3 ,5 ,7]给出值const A=9其实这个的思路就是去循环判断num数组,然后每次依次循环当前的值,而且不能被重复利用,就执行for循环去重...原创 2018-11-06 16:04:02 · 4041 阅读 · 2 评论 -
vue 打包桌面应用 并发布
vue 打包桌面应用程序你说为啥现在前端这么累,一会做h5网页,一会pc网站,一会又是服务端渲染,一会又来一个桌面应用,一会又是App,是不是就差操作数据库了,不,不对,如果你是走的node 方向,那你就做到了,哈哈哈vue 打包这些流程我相信大家都已经知道了吧,不管你是vue cli 2 还是vue cli 3 打包出来都是有dist 文件的,至于前面的操作不懂的这些可以百度,多得很,我就...原创 2019-03-22 16:32:30 · 1424 阅读 · 0 评论 -
vue2.x的几种通信方式
vue其实就是一个二个组件组成的,但是太多层级之后如何去通信,当组件 A 和组件 B 中间隔了数代(甚至不确定具体级别)时,以往会借助 Vuex 或 Bus 这样的解决方案,父子组件传值通信 <template> <view> <cartime :cartimebao="cartimebao"></car...原创 2018-12-25 17:30:24 · 450 阅读 · 1 评论 -
vue2.0的三种路由传参方式
为了方便自己查看,也许也能方便你学习,所以写一下vue路由跳转不外乎就三种,其实还有一种就是js 的跳转方式https://router.vuejs.org/ vue-router官网文档,相信有些同学不喜欢看官网,觉得说的云里雾里的第一种,这个用的比较少,因为需要在路由配置对应的路由配置如下 this.$route.params.sessionId ...原创 2018-12-05 12:05:10 · 1169 阅读 · 0 评论 -
vue 的上拉加载,下拉刷新(基于better-scrol)
我先吐槽下,这个vue 的上拉刷新前几次都是有现成的框架,来做的,这个better-scroll的我是真的一开始没有看懂,可能是自己太笨了吧,不过 写这个的真的是大神,很厉害,个人项目做的这么厉害,666附上地址https://github.com/ustbhuangyi/better-scroll好了步入正题,这博客仅针对不是很熟悉vue 的上拉刷新的小白,虽然我也是小白,嘿嘿,大神请...原创 2018-11-14 14:59:01 · 8399 阅读 · 2 评论 -
vue2.0的简单搭建
vue作为前端三大主流框架之一,没有ng早,也没有React的完善,但是vue的好处是集众家之所长(关键还是中国人自己开发的)这里介绍的是最基础的vue-cli的搭建,仅对小白提供,大神请绕过,谢谢首先你得了解vue 的基本文档 地址 https://cn.vuejs.org/全局配置安装脚手架 文档地址 https://cli.vuejs.org/guide/creating...原创 2018-10-31 18:07:03 · 331 阅读 · 0 评论 -
关于mui开发的APP自动更新的问题
关于APP自动更新的问题,可是有点坑啊,以下就是我遇到的问题话不多说,直接上代码1.先进行获取手机APP当前的信息 const wgtVer = null;//获取当前版本号plus.runtime.getProperty(plus.runtime.appid, function(inf) { wgtVer = inf.version; 这里这个...原创 2018-09-15 14:56:02 · 6304 阅读 · 7 评论 -
关于mui 中开发App中fire事件的使用
想解决的问题 你是不是想在混合开发中子页面返回父页面中触发父页面的事件首先你得对mui开发混合app有所了解,然后你就会知道,其实坑特别多先创建一个H5+APP就是下面这样样子然后就按照你一般的操作新建一个.html的文件,中间内容省略,直接来问题下面这句代码最好还是写上,虽然不写也可以,但是好习惯是养成的 document.addEventListener...原创 2018-09-14 18:36:42 · 2013 阅读 · 1 评论 -
React父子组件传值
其实react和vue传值是一样的,都是属性传值,最近技术栈都开始用react 了,第一个就是基于环信做一个即时通讯,到时候我也会上传代码进行分享第一步搭建最简单的react环境,搭建最简单的环境我也写过 地址在这里以下是基本的创建react 的代码import React, { Component, Fragment } from 'react';import './style.cs...原创 2019-04-11 22:19:43 · 1458 阅读 · 1 评论 -
React脚手架搭建
React 是目前公认的前端三大框架巨头之一,也是相对学习成本高框架之一,但是为了涨工资,还是多学习一点吧React 学会了可以做很多事情,但是了,建议,如果你在做项目,大项目,建议用react,中小型项目用 vue,虽然不喜欢用angular,但是pc网站可以用,接下来开始搭建React.js 的Demo React中文网 http://react-china.org/...原创 2018-12-18 11:27:08 · 504 阅读 · 0 评论