前端开发
文章平均质量分 67
guanguan0_0
学着学着就会了
展开
-
Emmet-HTML速写
框架横行的时代,vue和react写多了,你是不是都忘了html基础结构是怎样的了?一个"!"键就可以解决,输入英文感叹号,然后回车或者tab,即可看到下面的基础html结构Emmet常用语法! —— 生成Html结构 # —— 元素id . —— 元素class > —— 子节点 + —— 兄弟节点 ^ —— 父节点 *n—— 重复n次指令 $ —— 计数编号 () —— 分组 [] —— 属性 {} —— 文本内容 隐式标签:在不输入标签名的时候默认是d.原创 2021-09-24 17:24:49 · 295 阅读 · 0 评论 -
怎么判断ios设备、移动设备、浏览器
NavigatorNavigator接口表示用户代理的状态和标识。允许脚本查询它和注册一些自己的服务我们可以通过window.navigator来访问Navigator对象常用属性Navigator.appVersion:浏览器版本Navigator.appName:浏览器官方名称Navigator.connection:设备网络连接信息Navigator.geolocation:可访问设备的地址位置信息Navigator.language:浏览器用户界面的首选语言Na原创 2021-09-16 18:23:55 · 495 阅读 · 0 评论 -
如何把本地项目上传到gitee远程仓库
这只是一个简洁的操作步骤说明书:登录你的Gitee账号,并创建一个合适的仓库,简单的写一下描述信息,不写也行,最好给你的仓库起一个有礼貌的名称,可以看看我的仓库。guanxuerong (guanguan0_0) - Gitee.com 在你本地的代码文件中,打开git bash。 执行 git init 命令,这是在初始化git本地仓库,会发现多了一个.gitignore文件,用于配置忽略文件等。 执行 git remoteadd origin xxx ,xxx是你的远程仓库的名称,为了互通.原创 2021-09-16 15:56:49 · 174 阅读 · 0 评论 -
你不知道的javascript
1、数组和对象都是有属性的,都不相等2、+ 'a'=NaN3、NaN 与其他数值进行比较的结果总是不相等的,包括它自身在内4、js加法运算符:做数据类型转换为可以计算的类型5、min() 方法返回参数中最小的值。如果没有参数,则返回 Infinity。如果有某个参数为 NaN,或是不能转换成数字的非数字值,则返回 NaNmax() 方法参数中最大的值。如果没有参数,则返回 -Infinity...原创 2020-12-18 14:32:32 · 100 阅读 · 0 评论 -
前端开发必须知道的分辨率(手机、电脑、平板)
你知道手机、电脑、平板的分辨率都有哪些吗?我们以屏幕的比例做维度来统计一下,那些名词啥的也没必要知道了,也看不懂,直接列分辨率吧常见移动端分辨率320*480480*800640*960768*12801024*768 (这里之后都是平板)1280*8001366*7681920*10801920*12002048*15362560*1600移动端的分辨率需要mark一下,做移动端适配需要考虑4:3 最常见的屏幕比例640*480800*6原创 2020-12-17 10:42:20 · 4568 阅读 · 0 评论 -
js条件语句的优化
一、优化if/else条件语句满篇的if/else语句是每个程序员在阅读老代码时最头疼的了,那么优化条件语句就成为了不可抗拒的使命。增加代码可读性,让你的js代码看起来更优雅。1、多条件筛选遇到多条件筛选,我们经常会使用"||"运算符,但是如果条件过多就显得非常冗杂,例如:const handleFile = (fileType) => { if (fileType === 'png' || fileType === 'jpg' || fileType === 'jpeg') {原创 2020-12-08 17:25:46 · 207 阅读 · 0 评论 -
2020最全的前端面试大全
一、HTML和CSS1、css动画实现:animation(动画):keyframes提供了更多的控制;可以指定播放次数或是无限循环;可以定义动画的中间状态transition(过渡):需要事件来触发;是一次性的,不能重复发生;只能定义开始和结束状态,不能自定义中间状态;transform(变形):元素的缩放、旋转、移动和倾斜translate(移动):transform的...原创 2020-04-06 13:44:27 · 620 阅读 · 0 评论 -
vue封装图片滑块验证组件
滑块验证组件整体不难,主要在于设置图片的样式问题,想要让背景图充满div,就需要滑块图片也跟随等比放大,效果与代码如下:HTML:<template> <section class="slider-section"> <div class="img-box"> <img :src="'data:image/png;ba...原创 2020-03-16 18:33:43 · 1613 阅读 · 0 评论 -
安装node库时报错[email protected] postinstall: `node scripts/build.js`
最近安装node库经常遇到这种报错:[email protected] postinstall: `node scripts/build.js`可以设置一下npm淘宝镜像,然后用cnpm来重新安装库$ npm install -g cnpm --registry=https://registry.npm.taobao.org...原创 2020-02-19 18:32:18 · 3410 阅读 · 0 评论 -
解决移动端vue项目资源缓存问题
我们希望每次进入项目都会重新加载资源配置,以防配置文件修改而导致页面没有更新问题我们习惯通过在资源路径加上时间戳等参数来保证每次进入的正常刷新但是,vue中要怎么处理呢,代码如下:index.html:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &...原创 2019-12-18 16:01:32 · 2231 阅读 · 0 评论 -
axios封装简明的request请求
下面以Vue为例来封装request请求request.js:import axios from 'axios'import { getToken } from '@/utils/auth'import { Message } from 'element-ui'import store from '@/store'import router from '../router'c...原创 2019-12-17 18:20:32 · 1892 阅读 · 0 评论 -
base64图片展示
<img :src="'data:image/png;base64,'+codeUrl" alt />想要设置图片尺寸,直接设置img尺寸即可原创 2019-10-16 16:00:08 · 381 阅读 · 0 评论 -
封装搜索框组件
后台管理系统多是以表格和表单为主,有列表就一定会有列表的筛选功能,所以在此把列表头部的搜索功能拆分出一个公共组件,方便使用。大致样式如下图:这里我使用的是ng-zorro蚂蚁金服的angular组件库index.html:<div nz-form class="ant-advanced-search-form"> <nz-row [nzGutter]="...原创 2019-01-23 15:14:15 · 1326 阅读 · 0 评论 -
移动端设置适配font-size
移动端设置适配font-size根据屏幕的大小设置不同的根节点font-size,开发时即使用rem来使其达到自适应@media screen and (min-width:287px) and (max-width:320px) { html { font-size: 10px !important }}@media screen and (min-width:321px)...原创 2018-12-07 09:35:19 · 1025 阅读 · 0 评论 -
wangEditor上传本地视频
wangEditor是一个轻量级web富文本编辑器,一般可以满足用户需求,但是有特殊要求的可以对其进行修改源文件是上传Html视频格式,如果想要变成上传本地视频需要做以下修改:/* 上传视频 */// 构造函数function UploadVideo(editor) { this.editor = editor;}// 原型UploadVideo.prototy...原创 2018-12-05 15:56:15 · 16282 阅读 · 16 评论 -
H5页面调用扫一扫功能
想要实现H5页面调用微信扫一扫功能,必须先了解微信JS-SDK接口企业号开发接口文档地址:https://qydev.weixin.qq.com/wiki/index.php?title=%E9%A6%96%E9%A1%B5我们来看下使用的大概步骤1、在页面引入js文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js2、通过config接口...原创 2018-12-17 14:16:29 · 16877 阅读 · 10 评论 -
微信公众号获取用户地址
JS-SDK获取用户地区经纬度getArea() { this.doConfig(); let that = this; //创建百度地图控件 wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02' success: function (res) { ...原创 2018-12-17 16:43:21 · 1661 阅读 · 2 评论 -
MVC和MVVM设计模式
1、MVC:Model-View-Controller设计模式Model(模型):负责存储、定义、操作数据、 从网络中获取数据(Struts中Service和Form);View(视图层):用来展示给用户,和用户进行操作交互;Controller是Model和View的协调者,Controller把Model中的数据拿过来给View使用。 流程:用户与View交互 =>...原创 2018-10-15 18:13:43 · 381 阅读 · 0 评论 -
前端必识书写规范
命名规则:1、项目命名:全部采用小写,以下划线分割my_project_name2、目录命名:参照项目命名规则,有复数结构时,要采用复数命名法scripts,styles,images,data_models3、JS命名:参照项目命名规则list_table.js4、css,scss命名规则:参照项目命名规则list_table.css5...原创 2018-10-15 18:12:03 · 375 阅读 · 0 评论 -
angular使用echart示例
echart官网地址:http://www.echartsjs.com/examples/ 以柱形图为例,具体视图如下,x轴和y轴可以收缩,用于展示多条数据具体实现步骤:1、下载echart包$ npm install echarts$ npm install ngx-echarts2、在shared.module.ts中注册echartimport { N...原创 2018-12-07 09:37:16 · 3171 阅读 · 0 评论 -
移动端上传图片和视频文件
手机拍摄的视频文件一般是mp4格式的,ios系统拍摄的视频是mov格式上传图片功能是直接调用的摄像头,并且可以选择本地图片大概页面设计如下:具体实现功能:1、可以调用摄像头上传图片2、上传本地视频3、预览已上传的图片和视频4、删除已上传的图片和视频文件具体代码如下:<!DOCTYPE html><html><head&g...原创 2018-12-17 16:41:35 · 7267 阅读 · 1 评论 -
forEach无法跳出循环,引发的关于map、every、some、forEach循环return false break不起效的总结
先看下面这段代码:在for循环中想要调出整个循环是break;但是在forEach中使用break不仅不能调出整个循环,还会报错,使用return也不行;其实这个问题是由一道编程题引发的,使用循环判断数组中是否包含某个值;当我想用forEach来循环时,发现在找到该值之后没法提前调出循环,就会造成时间复杂度的浪费,增加冗余计算,除了用for循环语句来代替forEach,还有什么...原创 2019-08-30 11:42:17 · 3185 阅读 · 0 评论 -
ios12微信H5输入框软键盘关闭后,页面无法回到正常位置
IOS12在开发微信公众号时遇到input输入框,失去焦点,键盘收回后,input框的位置改变的情况,需要监听失焦事件,并重新设定高度来解决这个问题:$("input").blur(() => { setTimeout(() => { let ua = navigator.userAgent.toLowerCase() let u = na...原创 2019-07-02 16:05:39 · 1535 阅读 · 0 评论 -
培养优秀的JS代码风格
尽管技术一般,但是也要写一手好代码让人看起来有大神风范;好代码不仅要精炼,更要易读。一、变量(努力做一个干净的小变量好嘛)(1)变量的数量控制避免滥用变量:数据只使用一次或不使用就无需装到变量中,例let temp = 2; // 定义好了之后就没有用过function func() { var a = 1; var b = 2; var c = a +...原创 2019-01-22 18:07:43 · 221 阅读 · 0 评论 -
H5页面使用vuejs
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>xxxxx</title&a原创 2018-12-17 11:36:49 · 4925 阅读 · 0 评论 -
前端开发——Chrome浏览器调试
1、alert 弹出框警告2、consoleconsole.log("normal"); // 用于输出普通信息console.info("information"); // 用于输出提示性信息console.error("error"); // 用于输出错误信息console.warn("warn"); ...原创 2018-09-14 16:59:01 · 1217 阅读 · 0 评论