WEB开发
文章平均质量分 93
WEB开发分享
大雄Obear
越努力,越幸运。你要努力,你会越来越好得!
展开
-
深入浅出负载均衡
负载均衡(Load Balance,简称 LB)是高并发、高可用系统必不可少的关键组件,目标是 尽力将网络流量平均分发到多个服务器上,以提高系统整体的响应速度和可用性。高并发:负载均衡通过算法调整负载,尽力均匀的分配应用集群中各节点的工作量,以此提高应用集群的并发处理能力(吞吐量)。伸缩性:添加或减少服务器数量,然后由负载均衡进行分发控制。这使得应用集群具备伸缩性。高可用:负载均衡器可以监控候选服务器,当服务器不可用时,自动跳过,将请求分发给可用的服务器。这使得应用集群具备高可用的特性。安全防护。转载 2023-02-16 14:27:22 · 589 阅读 · 1 评论 -
最新一代互联网:WEB 3.0
最新一代互联网:WEB 3.0转载 2022-07-14 09:10:06 · 758 阅读 · 0 评论 -
你不可不知道的CSS水平+垂直居中方案大全
垂直居中是布局中十分常见的效果之一,这也是面试中热门问题之一,今天简单总结几种常见的接机方案。为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。如果不要求兼容低版本浏览器的话,你在PC端开发中也可以肆无忌惮的使用啦!方案一:table-cell<div class="box box1"&g...原创 2020-03-14 21:59:20 · 279 阅读 · 0 评论 -
微博返回顶部按钮实现方法大剧透
浏览网站的时候经常会看到漂浮工具条,咱们很多项目也有漂浮工具条。但是做这个效果的时候你会发现,改变窗口大小之后你原本设置好,刚刚好可以停靠在内容边边的工具条就跑到内容里面去了怎么解决呢?赶紧来看看新浪微博是怎么实现的!http://weibo.com原理其实原理跟做绝对定位元素水平居中的道理是一样的,使元素居中,然后在向旁边偏移内页是水平居中的,决定定位的漂浮工具条也是水平居中的,...原创 2020-03-14 22:05:34 · 1154 阅读 · 0 评论 -
vue-cli设置proxy代理
Proxy是什么?proxy是ES6中就存在的,用于修改某些操作的默认行为,可以理解成在目标对象前设一个拦截层,因此也叫“代理器”。如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。Proxy的语法ES6 原生提供的 Proxy 语法很简单,用法如下:let proxy = new Proxy(target, handler);如原创 2020-11-19 20:34:17 · 44296 阅读 · 0 评论 -
谷歌浏览器js报错:Uncaught (in promise) DOMException
问题描述用chrome调试页面时,发现video控件有时不能正常播放视频,控制台报错 Uncaught (in promise) DOMException…具体如下:解决方案首先拓展一下相关知识Chrome的自动播放的政策在2018年4月做了更改。新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策如下:mute...原创 2019-09-25 22:07:55 · 5042 阅读 · 0 评论 -
作为开发你必须知道的WebSocket详解
效果图简介WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做一...原创 2019-10-12 13:48:36 · 330 阅读 · 0 评论 -
教你一招解决导致页面莫名其妙空行
模板文件生成html文件之后会在body开头处加入一个可见的控制符,导致页面头部会出现一个空白行。原因是页面的编码是UTF-8 with BOM。选择无BOM格式编码保存就行了。原因抄录:这种编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xB...原创 2020-03-08 23:13:59 · 474 阅读 · 0 评论 -
你必须知道:localStorage、sessionStorage 和 Cookie 区别在什么地方
概念的理解webstorage本地存储webstorage是本地存储,存储在客户端,包括localStorage和sessionStoragelocalStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信sessionStorag...原创 2020-02-26 22:33:12 · 2404 阅读 · 1 评论 -
HTML5 postMessage解决跨域|跨窗口通信
知识拓展postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。语法postMessage(data,origin) 方法接受两个参数data:要传递的数据html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参...原创 2020-02-24 19:31:50 · 541 阅读 · 0 评论 -
前端常识:常见显示器屏幕分辨率
概括屏幕比例4:3屏幕比例16:10屏幕比例16:9屏幕比例5:4VGA(640x480)WVGA(800x480)qHD(960 x 540)SXGA (1280x1024)SVGA(800x600)WSVGA(1024x600)720p(1280x720)XGA(1024x768)WXGA(1280x800)WXGA(1366x768)...原创 2020-01-11 16:16:45 · 10162 阅读 · 0 评论 -
javascript classList add报错
报错内容Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.解决方案传入className不能为空字符串,在add之前先判断一下即可...原创 2019-12-16 21:44:23 · 2693 阅读 · 0 评论 -
Javsscript自定义事件和触发
知识拓展EventTarget接口提供了一个.dispatchEvent()方法,该方法在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值,只要有一个监听函数调用了Event.preventDefault(),则返回值为false,否则为true。需要使用该方法,首先要先自定义一个事件:document.createEvent()event.initEvent()...原创 2019-11-30 22:32:58 · 337 阅读 · 0 评论 -
把后端传递过来的base64图片保存到本地
需求现有一个视频播放页面,需要添加一个按钮“抓拍”,点击该按钮可以把视频截图保存到本地。需求分析实现该功能的方法有很多,此处按照该项目需求进行。于是,我立刻想到了nodeJs,因为它可以操作资源管理器,可以操作文件流。实现代码 (NodeJs把base64图片保存在服务器端)// 以下为node层代码// 服务器返回结果,base64代码非常长,此处省略let res = { c...原创 2019-11-30 22:15:34 · 2420 阅读 · 0 评论 -
帮你轻松理解Commonjs、AMD、CMD、ES6的区别
第一阶段:无模块化JavaScript最初的作用仅仅是验证表单,后来会添加一些动画,但是这些js代码很多在一个文件中就可以完成了,所以,我们只需要在html文件中添加一个script标签。后来,随着前端复杂度提高,为了能够提高项目代码的可读性、可扩展性等,我们的js文件逐渐多了起来,不再是一个js文件就可以解决的了,而是把每一个js文件当做一个模块。大概是下面这样:<script s...原创 2019-11-26 23:02:32 · 609 阅读 · 0 评论 -
带你细品Cookie、Session和Token的区别
CookieCookie的特性会话数据保存在浏览器客户端Cookie的底层实现原理服务器创建cookie对象,把会话数据存储到cookie对象中。new Cookie("name","value");服务器发送cookie信息到浏览器response.addCookie(cookie);浏览器从响应头中得到服务器发送的Cookie然后保存到浏览器本地。服务器...原创 2019-11-26 21:57:29 · 205 阅读 · 0 评论 -
H5 video 进入全屏和退出全屏
效果示例见上图中,video禁用了原生控制条,加载自定义控制条,左侧为关闭,右侧为录像、全屏以下主要针对全屏功能如何实现。现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样:// Webkit (works in Safari5.1 and Chrome 15)element.webkitRequestFullScreen();document.webkitCancelFu...原创 2019-11-03 22:28:58 · 6700 阅读 · 0 评论 -
iframe在ios设备宽度不能100%
不知道大家是否有遇到过使用iframe嵌套其他域名的情况。 眼下我就遇到了一个项目,项目出于开发中,但是客户要求使用正式域名访问。 所以我们在正式服务器上放了一个页面使用iframe嵌套测试域名。 但是过程中遇到了一个问题iframe在ios设备宽度不能100%,只能显示一半,如下图: 但是在安卓手机上面访问是正常的。历经千辛万苦,终于找到一丝眉目。 原来当”scrolling”设置...原创 2018-06-23 09:41:37 · 2931 阅读 · 0 评论 -
全国哀悼日网站页面变成灰色的filter方法
为表达哀悼,一般在特定日期网站都是呈现灰色状态的。下面分享一下如何实现 >直接在*.css文件最前面加入body{ filter:Gray; }或者html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 其他HTML页面html { filter:progid:DXImageTran...原创 2019-09-28 21:57:46 · 4568 阅读 · 0 评论 -
为什么设置 height 100% 不起作用
按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。请看以下代码:<html> <body> <div style="height: 100%;"> &...原创 2019-10-05 21:01:15 · 1454 阅读 · 0 评论 -
让HTML标签title属性值换行
效果图:具体实现方法有三种:方法一:直接title内容换行直接填写title内容时候“回车键”换行,示例代码如下:<a href='http://www.divcss5.com/jiqiao/j510.shtml' target='_ablank' title='标 题:DIVCSS5 作 者:DIVCSS5 转 贴 自:CSS原创 更新时间:2013-05-17 推荐等...原创 2019-10-05 21:21:14 · 861 阅读 · 0 评论 -
点击微信网页的a标签直接跳转到淘宝APP打开怎么实现的?
见上图,是在微信里面打开的一个网页,当点击“直接下单”的时候,就直接跳转到淘宝APP了,无需通过浏览器唤起APP。代码:<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><...原创 2019-10-05 21:33:11 · 4211 阅读 · 1 评论 -
设置FLASH透明背景
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="160"> <para...原创 2019-10-05 21:38:35 · 1218 阅读 · 0 评论 -
干货干货:px和毫米之间的转换
像素与毫米的转换转换还需要知道另一个参数:DPI(每英寸多少点)象素数 / DPI = 英寸数英寸数 * 25.4 = 毫米数对于显示设备,不管是打印机还是屏幕,都有一种通用的方法先用GetDeviceCaps(设备句柄,LOGPIXELSX)或者GetDeviceCaps(设备句柄,LOGPIXELSY)获得设备每英寸的像素数分别记为:px 和 py一英寸等于25.4mm那么...原创 2019-10-05 21:42:36 · 6104 阅读 · 0 评论 -
国外常用分享
分享之前先给大家推荐一些外国人常用的网站社交类Facebook-脸书,超级社交网站:http://www.facebook.comTwitter-推特,新浪老爹:http://www.twitter.comInstagram-逼格最高的图片社交网站:http://www.instagram.com/Snapchat-阅后即焚”照片分享功能App鼻祖:http://snapchat.com...原创 2019-10-05 21:45:04 · 1117 阅读 · 0 评论 -
站长必须懂得技能:给网站设置ICO图标
我们浏览网站的时候经常可以看到每个站都有自己的logo标志,在浏览器标签栏里面也会在网站titile前面显示一个小图标,既个性有漂亮怎么做的呢?效果:如何制作?1、准备一个图标制作软件Icon是一种特殊的图形文件格式,它是以.ico 作为扩展名。普通的图像设计软件无法使用这种格式,在线的制作工具很多,也可以下载本地的制作工具2、确定“收藏夹”图标的规格图标要256色或16色的1...原创 2019-10-05 21:47:27 · 430 阅读 · 0 评论 -
表格(table)不被撑开的解决办法
今天在做一个用户留言列表的时候,用到了表格。用户名为英文字符时,就会把固定宽度的单元格撑开。之前也有遇到过。解决办法:先用nowrap强行令文字不换行,再用style="table-layout: fixed; word-break: break-all; border-collapse: collapse"强制表格不撑开,即达到效果。需要注意的是:用了nowrap的单元格设置的宽度要用百...原创 2019-09-28 21:47:37 · 6780 阅读 · 0 评论 -
绝对定位实现漂浮工具条停靠在内容旁边
浏览网站的时候经常会看到漂浮工具条,咱们很多项目也有漂浮工具条。但是做这个效果的时候你会发现,改变窗口大小之后你原本设置好,刚刚好可以停靠在内容边边的工具条就跑到内容里面去了怎么解决呢?赶紧来看看新浪微博是怎么实现的!http://weibo.com效果:原理其实原理跟做绝对定位元素水平居中的道理是一样的,使元素居中,然后在向旁边偏移内页是水平居中的,决定定位的漂浮工具条也是水...原创 2019-09-23 13:16:30 · 405 阅读 · 1 评论 -
CSS代码实现背景透明文字不透明
按照以前的写法是使用两个元素来控制,一个写背景透明、一个写文字。然后通过定位:absolute和层级:z-index来控制。现在我们可以通过如下方法使用一个元素来控制:在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属特性filter:属性来制作透明背景。...原创 2019-09-23 13:14:28 · 358 阅读 · 0 评论 -
getBoundingClientRect的用法
前些天发表了“关于 jquery和js获取宽度时只能取整数,取不到小数点”当时使用了一个不是办法的办法,也提及到了“getBoundingClientRect”方法,后面发现这个方法有兼容问题。 下面分享一下经验和解决方案。简介 getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。语法 这个方法...转载 2018-06-29 08:22:43 · 2041 阅读 · 0 评论 -
关于 jquery和js获取宽度时只能取整数,取不到小数点
见上图,该图为全屏导航截图。每个栏目名称后面都有一根白线,切白线一直到达浏览视口最右侧。如何实现? 我想到一个方法,见下代码:&lt;div class="mainnav"&gt; &lt;ul class="ul"&gt; &lt;li id="mnav1"&gt;原创 2018-06-27 20:15:12 · 3468 阅读 · 0 评论 -
jquery ready() 与window onload的区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行 ...转载 2018-06-20 10:34:54 · 500 阅读 · 0 评论 -
给页面加上loading加载效果
在页面中载入进度条,是一种常见的特效。它比较实用,当页面的元素比较多的时候,使用它可以让网友不至于等的着急。其原理很简单:在网页的头部放置一个文字或者图片的 loading 状态,然后页尾载入一段 JS 隐藏掉,即根据浏览器的载入顺序来实现的简易 Loading 状态条。 此效果也有插件可实现,不过此次分享的是自定义方法。效果 demo http://build.gzwhir.com...原创 2018-06-20 10:28:04 · 29906 阅读 · 0 评论 -
提交表单上传照片预览
项目名称:H_横店影视股份有限公司 访问地址:http://gz.gzwhir.com/hdysgf201708152001/zxtjl/index_29.aspx具体效果: 上图是未上传状态 上图为传了照片之后具体代码: HTML:<td rowspan="5" class="photo TD7" id="fileSelect"> ...原创 2018-06-20 10:25:01 · 1302 阅读 · 0 评论 -
教你一秒理解setInterval与setTimeout的使用和区别
最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用Document自带的方法: 循环执行:var timeid = window.setInterval(“方法名或方法”,“延时”); window.clearInterval(timeid); 定时执行:var tmi...原创 2018-06-20 10:22:52 · 202 阅读 · 0 评论 -
百度商桥自定义
百度商桥是由百度提供的一段js自动生成的内容,自带样式和js,提供的代码是一段js,修改样式需要在百度商桥官网进行皮肤更换。下面提供一种,不使用百度商桥官网皮肤自定义样式的方法。 上图是百度商桥默认样式 上图是自定义之后样式具体方法:/*百度商桥代码*/var _hmt = _hmt || [];(function() { var hm = document.cre...原创 2018-06-20 10:21:02 · 4505 阅读 · 0 评论 -
js实现类似微博根据发布时间,给信息加上“刚刚”“一分钟前”“一小时前”
我们经常能看到QQ空间、微博等一些地方,回复了留言并不是直接显示时间,而是显示比如:“刚刚”“1分钟前”“半小时前”“1天前”等。 今天来分享一下。具体效果,如下图: 案例地址: http://build.gzwhir.com/sxrz201312107101/web/fans.shtml思路简单分析: 第一种也是比较推荐的一种是后端程序输出之前处理。 第二种是输出之后js处...原创 2018-05-15 20:11:38 · 2948 阅读 · 0 评论 -
js模拟select控件
思路: 设置一个select容器,把select放在里面并且设置隐藏,放置一个存放选中的文本值,使用ul列表代替option。当列表元素触发click的时候设置对应的option设置选中,并且给select设置value此次项目select控件是cms生成出来的从前端无法调整样式,所以只能考虑使用js模拟,代码匆忙中完成并未精简,如有更好的方案,还原共同讨论。 具体代码: HTM...原创 2018-05-25 17:47:14 · 1467 阅读 · 0 评论 -
js实现加载层
效果如上图,加载层经常用在页面加载时间比较长的地方或者用于美化页面。示例地址: http://php.baiwanx.com.cn/gdmzzz201712276570/index.php具体代码如下:<div class="guideW"> <div class="guide"> <img src="images/g...原创 2018-05-14 19:42:19 · 1688 阅读 · 0 评论 -
插件拓展 - 利用js实现n个元素重新组合
经常有童鞋为了一款插件不能支持多个元素切换而换插件,其实没有必要那麻烦的,自己手动小改一下就可以实现了,如果是自己写的插件那请你忽略此篇。 下面我们举个例子,先看图: 见上图,右上角有左右切换按钮,每次点击可切换一组6个图片。 本案例中使用的是一个名为SuperSlide的插件,有喜欢的可以去插件官网自己看。预览地址: http://build.gzwhir.com/oagw2013...原创 2018-05-14 19:34:59 · 360 阅读 · 0 评论