前端开发
薛定谔的喵喵喵
在职前端工程师
展开
-
布局问题之-左侧宽度可变右侧内容自动充满空白部分
场景: 考虑要素: 城市切换处宽度可变,搜索框宽度需自适应解决方案: 父元素 display:flex: 左侧 min-width:100rpx; 右侧 flex:1;原创 2020-05-22 13:23:08 · 358 阅读 · 0 评论 -
CSS实现多行文字截断
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多行截断</title> <style> .line1{ white-space:nowrap;/*这行是干嘛的*/ over原创 2020-03-09 10:03:35 · 440 阅读 · 0 评论 -
node.js相关知识
nodejs : 事件驱动,非阻塞,单进程,单线程。 非阻塞IO + 异步编程curl下载:https://curl.haxx.se/download.html//使用node创建服务 停止服务器 ctrl + cvar http = require('http'); //require引用内置模块httpfunction process_request(req, res) {...原创 2020-03-09 10:02:39 · 152 阅读 · 0 评论 -
text-shadow兼容性问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{padding: 0;margin: 0;} a{text-decoration: none;} #links li a {...原创 2020-01-07 15:38:38 · 1283 阅读 · 0 评论 -
json与jsonp的区别
json: javascript object notation (JS 对象标记) 是一种数据传输的格式。jsonp : JSON width Padding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。原创 2017-12-20 16:09:24 · 184 阅读 · 0 评论 -
div模拟自定义下拉框
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>自定义select下拉框</title> <link rel="stylesheet" href="css/index.css" /&原创 2018-12-21 10:32:09 · 876 阅读 · 0 评论 -
hbuilder中less指定.css文件路径
工具 -- 预编译器设置 -- .less 设置项 : 触发命令地址: c:\Users\Administrator\AppData\Roaming\npm\lessc.cmd (这个不知道固定不固定) 命令参数 way1 %FileName% %FileBaseName%.css(默认,生成.css文件自动保存到.l...原创 2018-12-26 10:09:14 · 1624 阅读 · 0 评论 -
前端自适应布局-带文字图片的自适应
最近项目中需要实现一个banner,如图所示.(设计图稿为1680*412)当前实现的思路: div(position:relative;width:100%;height:412px;)>ul >li>a>img (width:100%;height:412px)问题:平铺桌面但文字会被挤压这个时候,产品给出了一个参考效果,见链接.https...原创 2019-06-19 13:35:45 · 3389 阅读 · 0 评论 -
微信小程序-定时器setTimeout的应用场景
这次开发小程序遇到一个聊天的场景:在聊天页时,用户收到消息后,页面并未自动滚动到页面最底部,而是需要手动滚动。但,聊天数据又是拉接口调用直接更改的聊天数据数组,怎么控制刷新聊天数据时只调用一次滚动到底部的方法scrollToBottom成为了问题。 这里就可以巧妙的应用setTimeout这个东西。代码如下var timer= falsefunction t...原创 2019-09-29 10:45:07 · 2163 阅读 · 0 评论 -
linear-gradient+animate实现动态进度条
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动态进度条</title> <style> .wrap{ width: 200px; height: 23px; border-r原创 2018-12-10 10:53:51 · 1723 阅读 · 0 评论 -
使用md5分块上传大文件
效果图: 代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><form method="POST" enctype="multipart/form-data" onsubmit="return false;" > <in原创 2018-02-28 16:23:23 · 2204 阅读 · 2 评论 -
正则表达式入门语法篇
正则表达式:使用单个字符串来描述,匹配一系列符合某个语法规则的字符串实例化RexExp语法 : 1. var reg = /此处为正则表达式/; eg: var reg = /\d{4}/ 2. var ref = new (‘此处为正则表达式’) eg: var reg = new(‘\d{4}’)正则表达式语法概念 正则表达式由原创 2017-12-16 17:43:03 · 215 阅读 · 0 评论 -
vue-cli生成项目下webpack运行测试数据
最近遇到一个这样的问题,最新版本的vue-cli生成的build文件夹下没有dev-server.js文件。压根不知道怎样运行测试数据,后来找到了解决方案,在文件webpack.dev.conf.js中增加如下代码,如下图:1.在 const portfinder = require('portfinder')这行后面加下面代码const express = require('expr原创 2018-01-16 13:37:24 · 623 阅读 · 0 评论 -
ES6兼容性测试及兼容包
ES6兼容包下载地址:https://github.com/paulmillr/es6-shimES6兼容性测试工具:http://kangax.github.io/es5-compat-table/es6/1.let的使用(1)let声明的变量只在只在let命令所在的代码块内有效。(2)let不存在变量提升。原创 2020-03-09 10:01:48 · 315 阅读 · 0 评论 -
ES6中export和import使用注意点
EXPORT1.ES6中Module功能主要由export和import两个命令构成。2.export : 规定模块的对外接口,需与模块内部的变量建立一一对应的关系。//以下为错误示例var a = 1;export a;//错误,未提供对外接口var a = 1;export a;//错误//以下为正确示例export var a = 2;//正确var a = 1;export {a}原创 2018-01-15 12:01:30 · 2252 阅读 · 0 评论 -
代码常用注释
TODO:+说明 :有功能代码待编写,待实现的功能在说明中会简略说明FIXME : + 说明:说明标识该处有代码待修正,甚至是代码错误,无法工作,如何修正会在说明中简述。XXX :+ 说明 : 说明该处代代码虽然实现了功能,但实现方法有待改善,要改进的地方会在说明中简述。原创 2017-12-31 19:57:10 · 309 阅读 · 0 评论 -
eaysui 子页面刷新父页面datagrid
近期碰到这样一个问题,子页面操作后需要刷新父页面datagrid元素,刚开始用这种方式刷新,$("#talbe",window.parent.document).datagrid("reload");因使用window.parent.document方法能得到父页面中的元素,想当然这种方法刷新datagrid组件当然可以....结果,报错~最后找到一种解决方案,即 父页面中定原创 2017-10-11 16:48:44 · 2002 阅读 · 5 评论 -
使用eval("("+data+")")转json格式
做项目途中生出一个疑问,后台方法返回的数据为json字符串,evla("("+data+")")这种方式为什么能将其转成json数组呢?该博文讲的很详细,大家可以参考一下。json解析为什么是eval("("+data+")")。转载 2017-10-09 11:35:50 · 850 阅读 · 0 评论 -
easyui中combobox 验证输入的值必须为选项框中的数据
easyui中combobox 验证输入的值必须为选项框中的数据转载 2017-08-24 11:51:44 · 1284 阅读 · 0 评论 -
元素页面水平垂直居中方法总结
页面布局经常遇到元素的居中问题,非常重要的点,不过有时有点怕怕的。最快的成长就是直面恐惧嘛,来一波清扫大总结。 定宽定高 (要点 left:50%;margin-left: -元素w/2)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><..原创 2018-05-21 10:37:19 · 1072 阅读 · 0 评论 -
CSS实现多行文字截断
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多行截断</title> <style> .line1{ white-space:nowrap;/*文字不换行*/ overf原创 2018-11-09 13:35:04 · 1514 阅读 · 0 评论 -
图片和文字垂直对齐
相信大家画页面时基本每页必有一个这样字的东西,图标和文字的组合体。直接用图标库里的图标还好,然而要是图片形式的图标,就碰到了一个垂直对齐问题。思路一. 分别给图和文字设置宽高,然后再让它们分别居中对齐不就好了,line-height和vertical-align结合使用。<!DOCTYPE html><html> <head> <meta char...原创 2018-06-19 13:57:02 · 6787 阅读 · 0 评论 -
前端嵌套页面的各种方法大总结
做为前端开发者,项目中应该经常会碰到这种的页面布局: 点击左侧一栏目,右侧即显示相应的不同页面内容。记得每次遇到这种时都头痛不已,不光考虑页面,还要考虑到之后怎么进行页面间的数据传递等事情。难的有心情,来一波以往实现方式大总结。 先写最近get到的方法,恍然大悟的赶脚。 way1: a标签+iframe 要点: target属性 iframe的id和name属性...原创 2018-05-16 10:40:09 · 16981 阅读 · 0 评论 -
LESS系统学习之知识点
1.less之于css <==> jq之于js2.less注释 : /**/会编译 //不会编译3.less变量: @xx;4.混合(mixins) : .test{ .border_01; } .border_01{ border:solid 1px pink; } //带参数.border_02(@border...原创 2018-05-16 09:46:20 · 274 阅读 · 0 评论 -
Axcure谷歌Chrome浏览器安装
方法一 Axcure文件夹-->resouces-->chrome-->axure-chrome-extension.crx(该文件即为扩展,安装到浏览器即可)方法二 若以上方法无效,则只能手动下载一个了. Axure谷歌浏览器Chrome扩展程序下载地址: Axure RP Extension For Chrome 0.62 ...原创 2018-05-15 09:48:14 · 844 阅读 · 0 评论 -
plupload上传插件多图片上传操作
最近项目接触到plupload.full.min.js这个插件的使用,网上关于它具体使用很多。 api可参照Plupload上传插件中文帮助文档. 带预览功能的上传操作可参照文件上传插件Plupload使用(带图片预览功能) 这两篇文章几乎可以解决开发人员上手时90%的困惑,然而我们项目需求是这样的,如下图。涉及到多图片上传,且这些图片必填...原创 2017-08-11 08:56:18 · 3637 阅读 · 0 评论