前端开发
阡路陌人
修行ing
展开
-
js双层循环拿到二层循环的index值
情景描述 :多个房间,每个房间的人数不尽相同。后端获取的数据格式是根据房间走的,如:data: [ { roomNo: '201', ... guestList: [ { name: '张三', ... }, { name: '李四', ... } ], }, { roomNo: '202', ... guestList: [ { name: '张三三', ... }, {原创 2021-02-26 11:21:20 · 1310 阅读 · 0 评论 -
input框在chrome浏览器下粘贴的默认底色
Chrome浏览器对于input输入框的值会有一个默认的记录,导致后续在输入的时候出现选择后在input框会出现一个默认底色,如图:这样对整个界面而言就感觉恨不协调,为了消去这种现象,可以在css中引入一下代码:input:-webkit-autofill { box-shadow: 0 0 0 1000px #ffffff inset !important;/* 浏览器记住密码的底色的颜色 */ -webkit-text-fill-color: #606266 !important;原创 2020-12-09 17:51:18 · 426 阅读 · 0 评论 -
label:for属性和form属性
点击文字使复选框选中...原创 2017-04-05 23:29:28 · 1789 阅读 · 0 评论 -
element-ui 使用el-backtop无效问题
基本格式:<template> <el-backtop target=".父级盒子class" :visibility-height="100" :bottom="60"></el-backtop></template>target可以省略,即:<el-backtop></el-backtop>有时候会发现这...原创 2020-03-31 19:28:21 · 6085 阅读 · 0 评论 -
a标签点击跳转新页面的指定位置
a标签点击跳转新页面的指定位置原创 2017-03-18 17:10:27 · 3279 阅读 · 0 评论 -
文字转语音播报链接
男音:http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=+“您要播报的文字”;女音:http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=+“您要播报的文字”...原创 2019-10-17 11:15:08 · 622 阅读 · 3 评论 -
vue + webpack + emelent-ui打包后element的小图标不显示
由于针对element-ui的组件样式,我引入了element-theme-chalk 样式,下载完依赖后注入的时候,循序为:import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import 'element-theme-chalk';导致了在项目打包后element-ui的图标显...原创 2019-05-07 17:59:50 · 8849 阅读 · 3 评论 -
encodeURI和encodeURIComponent的比较
有时候我们在url跳转的时候往往会携带参数,参数中可能会包含一些特殊字符,例如:空格,下划线,加号…,这时候对后台或者前台解析的时候就读取不到这些特殊字符存在,这个时候我们就需要对特殊字符进行编码。下面针对encodeURI和encodeURIComponent做个比较:相同点:都可以对url进行一个编码;区别:encodeURI()不会对本身属于URI的特殊字符进行编码,例如冒号、正斜杠、...原创 2019-06-03 15:53:11 · 2340 阅读 · 0 评论 -
css 取消鼠标双击选中
有时候我们在页面上操作的时候,总会碰到鼠标连点的情况下,这样会导致你点击的文字地方出现一片蓝色选中状态,例如:导致体验效果不理想。取消上面情况:(css) -moz-user-select:none; -ms-user-select: none; -webkit-user-select: none; user-select: none;做个记录,防止遗忘。。。...原创 2019-07-09 09:56:55 · 3096 阅读 · 0 评论 -
去掉页面的滚动条
去掉页面上的滚动条 body::-webkit-scrollbar {display: none;}如果使用了iframe,则可以使用scrolling="no原创 2019-07-05 15:44:44 · 4057 阅读 · 2 评论 -
下载文件流文件
downloadPdf(result) {let blob = new Blob([result], {type: ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8’}); //application/vnd.openxmlformats-officedocument.wo...原创 2019-07-15 17:47:58 · 779 阅读 · 0 评论 -
数据数组获取重复字段数组集合
有时候我们对数据进行处理会放在前端进行,这样减少http请求,也算是一种优化方案。例如我们想做这种效果那我们第一想法就是点击不同区域的时候去请求后台数据,这样会导致反复请求http,增加宽带。解决方法:我们可以第一次就将所有的数据拿到,再根据不同区域去进行数据的处理,代码如下:let data = body.data;for (var i = 0; i < data.length...原创 2019-09-05 10:44:39 · 796 阅读 · 0 评论 -
移动端开发底部元素margin-bottom失效的处理方式
在移动端开发的过程中,经常会有在底部进行一个元素固定定位在,这样我们主体数据有需要设置margin-bottom 去防止主体数据被底部遮挡的情况。这在android手机中这样设置是完全没有问题的,不过在ios手机上就会出现底部定位遮挡了主体内容。当时还尝试了使用padding-bottom去处理,然效果还是不太理想。查询方法后,一下两种方式是可行的:主体最后设置一个空白的div(设置好高...原创 2019-05-09 17:44:50 · 2665 阅读 · 1 评论 -
vue 时间戳转日期
封装: datetimeparse (timestamp, format, prefix) { if (typeof timestamp =='string'){ timestamp=Number(timestamp) }; //转换时区 let currentZoneTime = ne...原创 2019-05-09 17:28:34 · 1097 阅读 · 0 评论 -
字符串转义
字符串转义原创 2017-11-16 11:26:03 · 3056 阅读 · 0 评论 -
移动端(一体机)iframe视频播放时按返回键时会将视频携带回去
在移动端的时候(特别是在一体机上–android系统),iframe视频播放时按返回键时会将视频携带回去,就导致了用户的体验很不好。导致这个原因是因为视频播放时,在android上是全屏播放,导致视频脱离了原先的文档流,所以在返回时就直接携带过去了。个人原先思考的方向:能不能再监听手机返回事件时将该页面刷新后再强制返回到上一页面,结果就导致在该页面到首页的一系列的返回之路上就必须全都写死,原创 2018-01-12 13:05:03 · 777 阅读 · 0 评论 -
视频直播 - 前端移动端
前端在移动端上关于视频直播方面随着直播的热火,希望现在的我学习这块不算晚,看了一些博客,觉得有必要记录下来,为了日后的需要http live streaming(hls) – 适用于移动端hls是苹果公司实现的基于HTTP的流媒体传输协议,可实现流媒体的直播和点播。原理上是将视频流分片成一系列HTTP下载文件。注:上图所示的m3u8格式就是支持HLS协议的流媒体格式。原创 2018-01-10 17:15:41 · 2679 阅读 · 0 评论 -
div 模拟textarea文本域输入实现自适应高度
1.首先解决div模拟textarea文本框的输入问题?解决这个问题的前提,我们要了解一下HTML5中的contenteditable 属性,放心,ie也是支持这个属性的,所以我们就不用担心contenteditable 的兼容性问题了。下面就直接上代码了html:<div contenteditable="true" class="test_box"></di...原创 2018-05-23 10:16:02 · 982 阅读 · 0 评论 -
微信小程序的开发之城市json数据
var provinces = [{ "name": "北京市", "id": "110000"}, { "name": "天津市", "id": "120000"}, { "nam原创 2018-08-01 16:25:10 · 8796 阅读 · 2 评论 -
微信小程序的开发之手机号、邮箱验证
我们一般对数据进行验证的时候,基本上是使用正则来进行验证~~~手机号验证var reg = new RegExp('^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\\d{8}$');var phoneVar = reg.test(phone); // 得到的值为布尔型邮箱验证var reg...原创 2018-06-15 13:54:15 · 8911 阅读 · 0 评论 -
加、减、乘、除 函数封装
经常在进行数据的计算时,出现数据的小数后出现好多位或者数值类型不一致导致计算有误加:function floatAdd(arg1, arg2) { var r1, r2, m; try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 } try { r2 = arg2.toString().s...原创 2018-07-17 16:36:24 · 1133 阅读 · 0 评论 -
input 框隐藏光标问题
有时候利用input框触发弹框往往会出现以下情况:解决的方法:<input type="text" value="" placeholder="请输入" readonly unselectable="on" >原创 2019-01-16 14:07:46 · 5852 阅读 · 0 评论 -
webSocket 的使用
对于页面中的数据操作时,有时候不知道该数据是否被别人进行了相应操作或者自己操作新的内容时页面没有被更新,这时候我们总不能寄托与客户去刷新页面操作,所以我们就要考虑页面的实时更新功能。这时候我们会想到socket和webSocket,这里主要讲的是vue 中使用webSocket哦~代码奉上: // 初始化weosocket initWebSocket(){ //w...原创 2019-01-16 15:09:14 · 632 阅读 · 1 评论 -
vue webpack打包 net::ERR_INCOMPLETE_CHUNKED_ENCODING 或者 weixin://preinjectjsbridge/fail
vue + webpack 项目在本地上是运行正常,结果发布到线上的时候出现打包的js报net::ERR_INCOMPLETE_CHUNKED_ENCODING 或者在移动端出现weixin://preinjectjsbridge/fail ,页面空白现象。查询后得知:后端没有及时删除日志,导致日志占满了服务器磁盘,将日志删掉就行了。...原创 2019-05-06 15:48:03 · 1181 阅读 · 0 评论 -
vue + echarts 多条折线图
html:<!-- 折线图--><div id="myChart1"/>js: // 折线图 getLine () { // 基于准备好的dom,初始化echarts实例 let myChart1 = echarts.init(document.getElementById('myChart1')); /...原创 2019-05-06 18:23:25 · 7918 阅读 · 1 评论 -
vue + echarts 饼图
html:<!-- 饼图--><div id="myChart2"/>js:// 饼图 getPie () { // 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('myChart2')); // 绘制图...原创 2019-05-06 19:16:21 · 6775 阅读 · 0 评论 -
web前端页面性能优化小结
web前端页面性能优化小结转载 2017-08-14 11:03:00 · 210 阅读 · 0 评论