web前端
辣姐什么鬼
这个作者很懒,什么都没留下…
展开
-
maptalks引入minemap地图资源插件:maptalks.minedata
踩了将近一天坑最终成功引入,插件官方给出的文件注意把minemap.js和minemap.css的版本升级到2.1.0即可。其他按照官方说明执行。基于合作项目需要maptalks需要使用minemap地图资源,找到插件maptalks.minedata。原创 2023-03-17 11:25:16 · 491 阅读 · 1 评论 -
VUE+webrtc-streamer实现实时视频播放(监控设备-rtsp)
VUE+webrtc-streamer实现实时视频播放(监控设备-rtsp)原创 2022-08-30 15:58:59 · 19971 阅读 · 58 评论 -
CSS:头部导航设置复杂背景图片自适应显示(与menu菜单贴合-自用)
场景:头部导航是比较复杂的背景图片,有时还需要和menu菜单位置贴合,同时需要自适应不同分辨率,实现结果如下:192013662048原始背景图片如下:代码如下:.hearder-panel { position: absolute; top: 0; right: 0; left: 0; height: 70px; line-height: 50px; b原创 2020-06-24 12:01:17 · 3128 阅读 · 0 评论 -
CSS科技感四角边框
实现效果:使用before和after就可以实现,代码量不多,长度颜色都可以自己调整实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:.原创 2020-06-22 11:30:51 · 7866 阅读 · 1 评论 -
Vue+Element 用同一个el-dialog弹框完成新增和编辑操作
在实际业务中我们往往选择用同一个弹框组件来同时实现新增和编辑操作。但el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作:处理数据的变更,带校验表单的内容移除和校验清除等 这需要我们在各种隐藏的bug里耗费很多精力,处理难度会随着表单内容复杂程度的增加不断提高。(实际业务场景中经常出现非常复杂的表单页面)下面的例子使用v-if既保证数据干净每次都是新弹框不存在数据遗留和互相污染,又保留弹框弹出效果让整个调用逻辑非常简单不用担心...原创 2020-05-22 11:14:19 · 21330 阅读 · 10 评论 -
Element 树形控件el-tree在实际项目中的应用demo
整理了一下Element树形控件el-tree在实际项目中的完整应用代码,包括样式和功能都有做处理,基本包括以下内容:样式已初步编写,可直接应用 el-tree的滚动条出现及样式 限制节点宽度,超出省略号并添加title 节点前图标及样式 支持关键字筛选树 默认选中根节点 可进行节点添加、编辑、删除 支持默认展开N级树 可根据实际需要增删功能基本实现效果如下:完整代码如下,可直接新建vue文件复制代码运行查看效果:目前我能想到的实际项目功能就这些,有额外的功能需求的可以原创 2020-05-21 17:21:15 · 2056 阅读 · 0 评论 -
日期数据数组按实际周和实际月进行分组
实现效果如下:原始数据是两个数组,date数组存放日期,value数组存放日期对应的数值,经过按周分组和按月分组输出week和month(2020-02-27是周四,2020-03-02是周一,2020-03-09也是周一,符合要求)封装了两个方法,代码如下:groupByWeek和groupByMonth,输入值均为date-日期数组和value-值数组const date = [...原创 2020-04-15 09:18:14 · 1584 阅读 · 0 评论 -
数组数据的分组处理
数组数据分组需求来源如下,后端一次返回所有数据,前端需要对接收数据进行按天、周、月进行分组显示(此需求不需要严格按照实际周和月区分,所以只按1天7天30天分组)// 图表数据分组方法:arr1-图表横坐标,arr2-图表纵坐标数据,group-以几条数据为一组export function dataGroupFunc(arr1, arr2, group) { const n...原创 2020-04-02 10:08:58 · 978 阅读 · 0 评论 -
for of + await顺序执行(用于循环请求接口)
鉴于现阶段需求,大量图片(一次限制500张)依次单张上传,不想频繁进行请求,可采用以下两种方法,第一种请求间隔递增,第二种间隔相同时间请求。let a = [1,2,3,4,5];function delay(index){ return new Promise((resolve)=>{ setTimeout(resolve,index*1000); ...原创 2020-04-01 17:26:40 · 4710 阅读 · 0 评论 -
vue中this.$set修改对象属性不更新问题
小问号,你是否有很多的朋友?当我this.$set修改对象属性竟然没有引发更新的时候我是崩溃的,我甚至开始怀疑起这个代码、这个编辑器甚至这个浏览器在针对我_(:з」∠)_最终原因是初始对象中没有这个属性时,我直接用obj.attr= [];新增了一个attr属性,导致在this.$set(this.obj, 'attr', '[1,2,3]');时没有引发更新其实新...原创 2020-03-28 10:43:37 · 5518 阅读 · 0 评论 -
js RTSP地址正则校验
先放一个主流RTSP地址格式汇总https://blog.csdn.net/qq_34654240/article/details/79924390不逼一逼自己你永远不知道前端能拼个什么校验出来我就是个正则渣,我能搞出来现在这个规则我已经很满意了泪目( Ĭ ^ Ĭ )只为做个记录看看以后有没有别的写法先说需求,前端需要严格校验RTSP地址,上面主流RTSP我都试过了可以通过rtsp...原创 2019-12-30 11:09:08 · 2176 阅读 · 0 评论 -
改造layui-树(tree)组件的添加、编辑、删除操作(补充上一篇)
这篇是用来补充上一篇:改造layui-树(tree)组件支持添加、编辑、删除的自定义(弹框)操作(https://blog.csdn.net/liona_koukou/article/details/99824998)的,鉴于有同学问代码里下面这两个的详细代码在此做一个树操作的补充limitNodeAddLevel: 0, // 设置第X级节点不允许添加操作limitNodeDelLeve...原创 2019-11-14 11:07:04 · 13017 阅读 · 20 评论 -
360音乐导航实现代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>360音乐导航</title> <style> *{ margi转载 2016-02-18 11:13:17 · 725 阅读 · 0 评论 -
js变量null和undefined的区别
var a=null;var b=undefined;//变量未定义var c={name: 'lisi' , age:29};//对象类型//原生类型没有的话是undefined,对象类型没有的话是nullvar arr=['a',3,'hello',true];//数组类型,里面可以存多种类型...原创 2016-02-18 14:30:12 · 578 阅读 · 0 评论 -
JS创建节点
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>js创建节点</title> <script> function add(){转载 2016-02-19 08:36:25 · 413 阅读 · 0 评论 -
DIV布局和放大
题目:当鼠标略过某个区块的时候,该区块会放大,并且其他的区块仍然固定不动布局: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>三个div放大问题</title> &am转载 2016-02-20 08:56:59 · 673 阅读 · 0 评论 -
jQuery+三级联动菜单
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!--jQuery包注意要用一样的,试过2.0的发现.change不能用--> &转载 2016-07-12 18:46:13 · 761 阅读 · 0 评论 -
web前端知识汇总-浏览器兼容(主要IE)
1、不同浏览器的标签默认的外补丁和内补丁不同 问题:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大解决方案:在CSS里设置*{margin:0;padding:0}2、块属性标签float后,又设置了左右margin的情况下在IE6显示margin显示双倍边距 问题:常见是IE6中后面的一块被顶到下一行 解决方案:在float的标转载 2016-07-15 11:45:30 · 438 阅读 · 0 评论 -
CSS3实现鼠标悬停动画
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; pa转载 2016-07-15 18:50:09 · 943 阅读 · 0 评论 -
web前端知识总结-BOM和DOM
BOM:我们都知道JavaScript是运行在浏览器中的,所以JavaScript提供了一些列对象用于和浏览器窗口进行交互,这些对象主要包括window、document、location、navigator和screen等,通常统称为浏览器对象模型browser object model BOMWindow对象是整个JavaScript脚本运行的顶层对象常用属性如下:Document-转载 2016-07-15 18:52:54 · 3850 阅读 · 1 评论 -
读《CSS那些事儿》笔记一
学习css最好的方法就是不断地做,不断地想,不断地实践Css的特点:1、修饰页面文本、图片等页面元素,避免使用不必要的HTML元素2、更有效地控制页面结构、页面布局3、提高开发和维护的效率Css的简写:1、颜色的缩写:只能对十六进制形式缩写例如#FF00FF缩写为#F0F2、单位值的省略:像0px可以缩写为03、内外补丁的简写:margin:0;表示所有边都是一个值...原创 2016-07-27 17:57:15 · 957 阅读 · 0 评论 -
仿百度登陆效果-layer弹窗插件
layer.layui.com layer弹窗插件,可以使用各种弹窗效果 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title>转载 2016-07-18 12:01:27 · 1361 阅读 · 0 评论 -
web前端安全
大体了解了下web前端安全的几项黑客技术,以下做简单整理,具体的深入学习希望有时间好好读一下《web前端黑客技术揭秘》这本书,给走在web前端学习路上的自己加油!!前端安全主要有三类:XSS、CSRF、界面操作劫持。越往后,实施这些攻击的代价越大,界面劫持需要很好的美工基础,黑客高美工不太现实,因为现在有很多好的方式可以黑下目标。题外话:跨站攻击发生在浏览器客户端,而SQL注入攻击由于转载 2016-07-28 13:36:51 · 576 阅读 · 0 评论 -
bootstrap实现弹出提示为图片
效果图如下:鼠标移至弹出二维码首先title下面引入 <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"><script type="text/javascript" src="jquery-1.10.2.min.js"></script&原创 2016-07-18 15:23:53 · 14797 阅读 · 0 评论 -
web前端-导航条
HTML代码: <div id="nav"> <ul> <li class="change"><a href="#">首页</a></li> <li><a href="#&quo原创 2016-07-18 17:37:19 · 3273 阅读 · 0 评论 -
web前端-boostrap图片轮播
<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"&a转载 2016-07-18 18:31:00 · 690 阅读 · 0 评论 -
web前端-CSS3基础
1、创建圆角边框、向矩形添加阴影、使用图形绘制边框Border-radiusBorder-shadowBorder-image圆角-->divid="radius">CSS3-圆角div>边框阴影-->divid="shadow">边框阴影div>divid="shadow1">边框阴影-偏移值都为0div>图片边框-->divid="img原创 2016-07-19 13:50:37 · 517 阅读 · 0 评论 -
W3C-jQuery整理
又重新把W3C里关于jQuery的部分学习了一下,之前有很多东西模棱两可,这下又巩固了。所以说,基础真的很重要啊。基础+实践W3C整理jQuery相关$(document).ready(function(){});===$.ready(function(){});===$(function(){});他的作用类似于传统JavaScript中的window.onload方转载 2016-07-29 15:12:17 · 524 阅读 · 0 评论 -
web前端-二级分类菜单(类似购物网站)
效果:鼠标移上去右边显示二级菜单。效果图:实现代码 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>转载 2016-07-19 18:05:59 · 6423 阅读 · 0 评论 -
web前端-仿优车诚品首页二级分类菜单
效果图:实现代码:给出的HTML代码为整个块的代码,从left-bottom开始是二级分类菜单部分,用==号进行了划分 <div id="middle-one"> <div class="one-left"> <div class="left-top"> <span>优原创 2016-07-20 10:09:30 · 1209 阅读 · 0 评论 -
web前端-js变量、作用域
JavaScript里的基本类型有:null、undefined、number、string、Boolean,他们的值保存在栈空间里引用类型:object、数组、函数如果是引用类型的值,则必须在堆内存中为这个值分配空间。由于这种值的大小不固定所以不能放到栈内存中,但内存地址大小是固定的,因此可以把内存地址保存在栈中。varbox=newObject();//创建一个引用类型转载 2016-07-20 13:18:16 · 648 阅读 · 0 评论 -
读《精通JavaScript+jQuery》笔记三
//对于IE浏览器下处理textarea直接用maxlength无效果的方法 function less(obj){ return obj.value.length < obj.getAttribute("maxlength"); } //动态添加表格,在第一行之后添加一行数据。 var ot=document.getElementByI...原创 2016-08-03 18:03:18 · 385 阅读 · 0 评论 -
图片透明切换
效果就是图片切换时的效果是透明度变换的效果图:代码如下: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>原创 2016-08-15 16:13:51 · 339 阅读 · 0 评论 -
jQuery与ajax
jQuery将ajax的步骤进行了总结,总合成了几个实用的函数方法 第一种load function startRequest(){ $("#target").load("14-1.aspx"); } load用法:load(url,[data],[callback]); url是异步请求的地址,data用来向服务器传送请求数据,启用d...原创 2016-08-04 15:06:02 · 246 阅读 · 0 评论 -
前端书籍推荐之《精通JavaScript+jQuery》
我在读这本书之前已经自学前端有近一年的时间了。从大三下学期开始进入找实习的混乱期,不知道自己要走什么方向,懵懵懂懂跌跌撞撞。Java-》测试-》后端-》前端,大致经历了这样一个特别混乱的时期。给后来人的建议是:早点定方向吧,换来换去心好累T_T。 刚开始自学是跟着腾讯课堂里的老师做网页,对于web开发我不是0基础起码HTML是项目中写过的。这样边听视频边写代码,一个周我的CSS和原创 2016-08-04 15:40:37 · 3225 阅读 · 0 评论 -
正则表达式
正则表达式:定义,一个正则表达式是由普通字符(a~z)以及特殊字符(元字符)组成的模式字符串。来描述查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配1、字符类(每次只能匹配一个)[...]例子/[012]/意思是匹配方括号里面的任意一个字符就可以[^...]例子/[012]/意思是匹配除了方括号里的字符的任意字符. 匹配转载 2016-08-01 11:16:48 · 342 阅读 · 0 评论 -
JS简单实现图片上一张下一张操作
简单实现了js的图片上一张下一张效果,没怎么做css美化单纯就是想记录一下js部分。效果图:嘿嘿,wuli爽妹子镇图!! <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>幻灯片</title&原创 2016-08-01 11:41:21 · 40989 阅读 · 3 评论 -
响应式布局或自适应网页设计
看了一篇不错的自适应网页设计介绍就自己试着做了一下,原文写的确实很好,收获很多。下面放上链接和自己的例子:链接:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html对原文知识点的整理: 一、允许网页宽度自动调整viewport是网页默认的宽度和高度,下面这行代码的意思是,网页宽度默认等于屏幕宽度wi...原创 2016-08-16 14:18:40 · 1113 阅读 · 0 评论 -
读《JavaScript DOM编程艺术》笔记一
边读JavaScript DOM编程艺术边记录了一些知识点,书确实挺不错的,很多东西讲得很清楚第一种方式是将JavaScript代码放到文档标签中的标签之间一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件。典型做法是在文档的head部分放一个script标签,src指向该文件最好的做法是把script标签放到HTML文档的最后,标签之前,这样可以使浏览器更原创 2016-07-21 15:41:38 · 2001 阅读 · 0 评论 -
web前端知识补充记录
1、判断字符串是否是这样组成的,第一个必须是字母,后面可以使字母、数字、下划线,总长度为5-20./^[a-zA-Z][a-zA-Z_0-9]{4,19}$/ 2、截取字符串abcdefg的efgvar str="abcdefg";var s=str.substr(str.length-3,str.length);alert(s);3、让一个input的背景颜色变成红色...转载 2016-08-04 17:39:39 · 442 阅读 · 0 评论