![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
前端业务,前端基础
骑着代马去流浪
这个作者很懒,什么都没留下…
展开
-
利用Chrome在PC电脑上模拟微信内置浏览器
1、先了解安卓微信和Ios微信的UA(User agent:用户代理)安卓微信UA:mozilla/5.0(linux;u;android4.1.2;zh-cn;mi-oneplusbuild/jzo54k)applewebkit/534.30(khtml,likegecko)version/4.0mobilesafari/534.30micromesseng...转载 2020-02-10 15:26:08 · 2099 阅读 · 0 评论 -
前端项目添加自定义icon图标步骤
在使用MUI框架开发过程中,往往需使用到各式各样的icon图标,而MUI的icon图标库提供的资源并不多,由于icon图标属于字体样式,如果使用图片替代的话,缺点比较明显,比如放大失真,每次联网都要加载等。所以往往需要自己利用其他的icon图标库自定义图标样式,下面借用阿里巴巴矢量图标库为例分享一下如何在MUI中自定义icon图标。其中,红色字体标出来是容易漏掉的步骤。一.登陆阿里巴巴矢量原创 2016-12-01 01:56:16 · 27248 阅读 · 5 评论 -
websocket+php socket实现聊天室
原文地址:http://www.cnblogs.com/nickbai/articles/6169745.html 这两天用了点时间,研究了一下,用php socket+ websocket实现了一个小型的聊天室。我采用的是 select/poll 的同步模型,虽然扛不住很大的并发,但是理论上 维持 几百人在线还是可以的。目前完成了第一版。这一版的由于采用的是 select/poll 和单...转载 2018-10-22 10:00:17 · 2698 阅读 · 1 评论 -
javascript websocket 二进制转字符串 二进制转对象
原文:https://blog.csdn.net/jkxqj/article/details/77848466websocket中服务器下发了二进制数据,可以这样解析<script type="text/javascript">function binaryData(ev) { return JSON.parse(new TextDecoder("utf-8").d...转载 2018-11-29 17:06:53 · 1784 阅读 · 1 评论 -
给websocket加入心跳包防止自动断开连接
原文:https://blog.csdn.net/weixin_36185028var userId=$("#userId").val();var lockReconnect = false; //避免ws重复连接var ws = null; // 判断当前浏览器是否支持WebSocketvar wsUrl = serverConfig.cyberhouse_ws+...转载 2018-11-29 17:04:49 · 1060 阅读 · 0 评论 -
websocket+node实现一个最简单的即时通信功能
http与websocket区别:http协议请求只能由客户端向服务端发起请求才能获取最新的状态,因此为了保持最新状态,客户端需要不间断的定期请求服务器,即所谓的“轮询”,相对于这种耗费资源的协议,webscoket实现了双向发送信息,即服务器可以向客户端主动推送消息,客户端也可以向服务器主动推送消息,从而不必为了保持最新消息的获取而不断的轮询。在即时通信中,用户A与用户B之间的通信的信息...原创 2018-05-22 11:41:32 · 2369 阅读 · 3 评论 -
bootstrap-databale设置垂直滚动(吸顶)后头部错位问题处理
1.设置垂直滚动<table class="s-table d-table"></table>$(document).ready(function() { $('#example').DataTable( { "scrollY": "500px" } );} );2.头部错位处理1)为table添加属性...原创 2018-08-29 16:19:24 · 2021 阅读 · 1 评论 -
datatable自定义分页按钮位置
datatable默认的分页按钮位置表头和表尾,但是在一些情况下需要自定义按钮位置,只需将datatable的属性绑定该元素的点击事件即可:var table = $('#example').DataTable(); $('#next').on( 'click', function () { table.page( 'next' ).draw( 'page' );} );$('原创 2017-06-05 10:21:50 · 8080 阅读 · 0 评论 -
datatables参数配置详解
来源:点击打开链接 //@translator codepiano //@blog codepiano //@email codepiano.li@gmail.com //尝试着翻译了一下,难免有错误的地方,欢迎发邮件告知,多谢。 /*------------------------------------------------Feature-------------转载 2017-06-05 10:04:59 · 634 阅读 · 0 评论 -
jQuery-datatable添加和修改提交到服务器的数据
datatable提供了添加和修改传给服务器参数的方法1)修改传到服务端的值var table = $('#example').dataTable( { "ajax": { "url": "data.json", "data": function(d){ //修改第二列为可模糊搜索 d.columns[1].search.regex = "true"原创 2017-06-01 18:28:00 · 3348 阅读 · 0 评论 -
datatable表头增加分页
当datatable生成的表格较长时需要在表头和表尾添加分页,datatable默认的只有表尾有分页,若要再表头添加分页,需要添加一行代码:$(document).ready(function() { $('#example').DataTable( { "dom": '>rt>' } );} );参考来源:点击打开链接原创 2017-06-05 09:57:44 · 757 阅读 · 0 评论 -
datatable对某一列的值进行模糊或非模糊搜索
var table = $('#example').DataTable(); table.columns( 1 ).search($('.input_search').val(),true,false).draw();//对第二列进行模糊非智能搜索search中,第一个参数为需要搜索的值,第二个参数为模糊,则精确搜索,为FALSE,则表示非模糊搜索,第三个值为true或者false分别表示智能/原创 2017-06-05 14:08:19 · 8322 阅读 · 1 评论 -
datatable分页增加首页和尾页
datatable默认的分页样式只有上一页和下一页,如果需要添加首页和尾页,只需将datatable的pagingType属性设置为原创 2017-06-05 10:13:15 · 2675 阅读 · 0 评论 -
jQuery中eq和get的区别
相信大部份人都会把这2个的用法搞错。仔细查看下API文档就可以知道。eq返回的是一个jquery对象,get返回的是一个html 对象数组。举个例子: style="color:yellow">绯雨使用eq来获得第一个p标签的color值:$("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个转载 2017-06-05 10:53:28 · 429 阅读 · 0 评论 -
jQuery on和off配合使用为动态生成的元素绑定监听事件
在使用jQuery on方法监听动态生成的div元素的点击事件,每点击一次div,就会有一个点击事件绑定在其上,就会执行多少次$(document).on('click','div',function () { console.log(1)})在绑定on之前可先用off对该元素上面的事件解除绑定,这样每点击一次就会绑定一次事件$(document).off('click','原创 2017-07-12 16:14:16 · 821 阅读 · 0 评论 -
jquery-form插件的ajaxForm和ajaxSubmit的用法与区别
原文地址:https://www.cnblogs.com/fire-dragon/p/6708718.html在使用这两种方法之前,首先需要安装form.js的插件,下载就不放了,网上一搜就有;<script src="/Tool/HtmlPage/S45/js/jquery-form.js"></script>一、首先说用法,ajaxForm和ajaxSubmit都可以接...转载 2018-06-19 09:44:28 · 1960 阅读 · 0 评论 -
关于jquery的serialize方法转换空格为+号的解决方法
来源:点击打开链接jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能;但是实际使用中去发现了如下问题:例如:abc 123 那么在执行 serialize()方法后,得到的却是 abc+123 这样的字符串;即jquery的序列化方法对空格进行了转义,转换成了 + 号。jquery中serialize方法的部分代码如下所示:转载 2017-06-05 10:28:24 · 2740 阅读 · 0 评论 -
jQuery里面的方法调用
一般使用jQuery时候,如果公共js使用了$(function(){...})后,在页面里面的$(function(){...})无法调用公共的变量。可以这样写:公共jsjQuery(function ($) { //视频处理 window.ctrlVides = function () { //... } $('.vi_ideo_p...原创 2019-10-08 14:43:06 · 696 阅读 · 0 评论 -
纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示例
1.导入功能实现下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中然后通过FileReader对象读取文件利用js-xlsx转成json数据代码实现(==>示例 /* Fi转载 2017-12-01 13:49:09 · 12025 阅读 · 2 评论 -
jq实现图片上传预览(注意jq版本)
一个jq实现上传文件预览插件uploadPreview.js/**名称:图片上传本地预览插件*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;*使用方法: 把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件$("#up").upl原创 2017-12-01 13:10:10 · 1539 阅读 · 0 评论 -
相邻的div层margin 负值被覆盖引起的层级(z-index)问题
相邻的div层margin 负值被覆盖引起的层级(z-index)问题:描述:需求:A和B层,B层margin-top:-50px;目的:B层隐藏50px与A层下<div class="A"></div><div class="B"></div>出现问题:B层覆盖A层上50px,而不是隐藏在A层下;解决办法:第一...转载 2020-02-10 15:29:32 · 1051 阅读 · 0 评论 -
script标签添加时间戳防止浏览器缓存
1.方法一:(function(){ var randomh=Math.random(); var e = document.getElementsByTagName("script")[0]; var d = document.createElement("script"); d.src = "//site.com/js.js?x="+random原创 2018-01-22 10:09:44 · 4330 阅读 · 0 评论 -
JS获取当前时区的时间戳
var getCurrentZoneTime = function(zone){ var timezone = zone; //目标时区时间,东八区 var offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差,单位为分钟 var nowDate = new Date().getTime(); // 本...原创 2020-03-27 17:06:35 · 3092 阅读 · 0 评论 -
ES6 Promise 用法(我见过最简洁优秀的文章)
ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是一个类?对象?数组?函数? 别猜了,直接打印出来看看吧,console.dir(Promise),就这么简单粗暴。 这么一看就明白了,Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型...转载 2018-10-06 21:40:26 · 153 阅读 · 0 评论 -
解决input[type=file]打开时慢、卡顿问题
昨天临下班测试给我问我为什么图片上传插件打开文件夹的速度这么慢,让我想办法优化一下然后我就努力的搞了起来_(:з」∠)_由于我们内部系统不兼容ie,所以我就没有管ie,在浏览器里面玩了起来经过测试发现,在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有卡顿问题在windows里面,Firefox不卡顿,只有Chrome卡顿。转载 2017-07-31 14:08:31 · 3998 阅读 · 0 评论 -
multiselect下拉选项动态赋值
var site = new Array(); $.each(data, function(index, values) { //循环将data数据的结构重新调整为下面这样的:[{label:xxx,value:id}] // laebl相当于option的文字,value则是option的value,结构不能错 site.push({原创 2017-06-05 14:22:40 · 4954 阅读 · 2 评论 -
百度echart图表宽度自适应问题的一种解决思路
使用echart图表做项目遇到了一个难题,就是图表随着所在div容器宽度变化而自适应的问题。图表所在的容器变化存在三种情况:1)打开页面时,左侧侧边栏是伸出的,右侧图表所在的div占满剩下空间,图表要占满容器;2)点击一个按钮左侧侧边栏收缩或伸出,图表所在的div容器变化,内部图表也要对应占满2)调整窗口大小,图表所在容器的变宽或变窄,其内部图表也自适应变化所以到针对这三种不同原创 2017-06-01 17:39:34 · 14958 阅读 · 0 评论 -
view标签嵌套image出现间距的问题处理
方法二选一1,image设置成block,2,view标签font-size设为0原创 2020-06-05 17:32:26 · 511 阅读 · 1 评论 -
html 如何引入一个公共的头部和底部
原文转自https://yq.aliyun.com/articles/100662?t=t1#html 静态页面中引用外部页面没那么方便,主要方法有:1.asp语言和PHP语言首先制作一个头部文件head.asp,或者一个底部文件foot.asp。如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,标记前面)增加如下代码:<...转载 2018-10-22 09:51:31 · 5227 阅读 · 0 评论 -
h5将当前网页加入收藏夹
var bookmarkUrl = window.document.location.href; var bookmarkTitle = "名称; try { //IE window.external.addFavorite(bookmarkUrl, bookmarkTitle); } catch (e) { ...原创 2019-10-09 09:09:59 · 1062 阅读 · 0 评论 -
利用sessionStorage判断页面关闭还是刷新
if(sessionStorage.opened){ console.log('窗口是刷新页面,不是新打开') }else{ console.log('窗口是新打开') //如果获取到历史url,则重定向到历史地址 if(localStorage.history && localStorage.history原创 2017-08-04 17:29:06 · 5730 阅读 · 0 评论 -
css弹性布局下元素超出显示省略号失效的解决办法
给超出显示省略号的元素设置width或者min-width: 0原创 2020-05-25 16:49:11 · 1563 阅读 · 0 评论 -
js将文件转成Base64编码字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta...转载 2019-06-25 13:09:36 · 2772 阅读 · 0 评论 -
将Date Range Picker扩展选择月份范围功能
Date Range Picker是一个基于JQuery的时间选择器插件,提供了丰富的功能和优秀的界面,它的官网地址http://www.daterangepicker.com但是这个插件有一个比较坑比的是没有月选择器,只有日期和时间选择器,项目中用到了日期选择器的功能,但是在这个项目的另外一个业务又要需要月选择器,如果重新引入一个日期选择器又多了引入文件,如果重写一个功能又不划算,于是决定直接在...原创 2018-07-02 15:47:25 · 10528 阅读 · 2 评论 -
flex布局下img图片变形的解决方法
正常效果变形效果一、flex-shrink: 0给 img 设置flex-shrink: 0;flex-shrink 的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。设置为0表示不收缩。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。注意:如果元素不是弹性盒对...转载 2019-10-08 15:23:30 · 1415 阅读 · 0 评论 -
flex布局文本不换行不显示省略号的解决方法
<div class="container"> <div class="title">我是标题</div> <div class="content"> <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p> </div></div&g...转载 2019-10-09 09:09:18 · 846 阅读 · 0 评论 -
JavaScript的数组实现队列与堆栈的方法
原文地址:点击打开链接今天在项目中要使用JavaScript实现数据结构中的队列和堆栈,这里做一下总结。一、队列和堆栈的简单介绍1.1、队列的基本概念队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出!如下图所示:1.2、堆栈的基本概念堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出!转载 2017-06-08 17:39:23 · 839 阅读 · 0 评论 -
pace.js进度条插件无法通过ajax启动的解决办法
ajax启动不了就手动启动$(document).ajaxStart(function() { Pace.restart(); });原创 2018-08-13 17:00:58 · 839 阅读 · 0 评论 -
JS 如何清除页面缓存
缓存有利于加快页面的加载速度,是实现高效web的一种方法,但是,有时,我们需要让页面不缓存,例如,升级,这样我们需要在页面中或者服务器做一些处理。1.动态页面:index.asp?id=....2.使用jquery,$.ajaxSetup({cache : false });3.在html里的head标签中加<meta http-equiv ="proma" conten...转载 2019-10-09 09:09:10 · 4451 阅读 · 0 评论 -
webapp长按保存图片到本地(vue)
html<img @touchstart="start" class="ppimg" :src="imgUrl" alt="">js(methods)start() { var that = this; this.longClick = 0; this.timeOutEvent = setTimeout(function() { ...原创 2019-11-14 11:02:58 · 1828 阅读 · 0 评论