文章列表

WEB前端

location.host 与 location.hostname 的区别

location.host 与 location.hostname 的区别

今天在给个人博客做防镜像处理的时候,用到了location中的host和hostname属性,以前没注意过二者之间的细节,导致在本机调试的时候,if校验一直通不过,百度之后才明白,写一篇文章来记录一下。首先,我们弄清楚一件事情,在访问网站的时候,一般都是直接输入域名,并没有带上任何的端口,因为nginx之类的代理工具都是监听服务器的80端口,所以可以省略,这也直接导致一个现象,location中的host和hostname获取到的值是一样的。当我们在本机测试的时候,针对localhost和127.0.0.1又是什么样的呢?现在明白了,host是包含……

不忘初心  发布于 2019-07-20 浏览(101) 赞 (12)

WEB前端

ajax使用formdata提交form表单,服务端接收不到数据

ajax使用formdata提交form表单,服务端接收不到数据

上一篇文章中,我使用formdata的方式来实现ajax提交form表单,当时碰到了一个formdata二次处理的问题,虽然解决了,但后续又碰到了另外一个问题:“ajax使用formdata提交form表单之后,后台服务无法获取到值”,今天来就这个问题给大家分析一下。前端代码:varformData=newFormData();//声明表单对象,括号中可以传递一个form对象formData.append("username","积微成著");formData.append("password","sssssss");$.ajax({url:'/t……

不忘初心  发布于 2019-07-05 浏览(210) 赞 (9)

WEB前端

ajax提交formdata,报错Uncaught TypeError: Illegal invocation(…)

ajax提交formdata,报错Uncaught TypeError: Illegal invocation(…)

在使用ajax提交formdata时,报了一个错:“Uncaught TypeError: Illegal invocation(…)”,之前一直都是直接利用jquery,使用$.submit()这种方式,也没太在意一些细节,这次使用FormData()方式来模拟form表单提交,直接凉凉。。。折腾了一圈,最终定位到问题的原因:对提交的form表单数据进行了重复处理。代码如下:varformData=newFormData();//声明表单对象,括号中可以传递一个form对象formData.append("username","积微成著");$.……

不忘初心  发布于 2019-07-05 浏览(332) 赞 (3)

WEB前端

如何使三个div均分父级div

如何使三个div均分父级div

在一些网页设计中,经常会涉及到div均分,那怎么在一个div里均分元素呢?div怎么等分才可以使得div内子元素平均分配?一、百分比+浮动布局(主要针对三等分)<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">……

不忘初心  发布于 2019-06-27 浏览(114) 赞 (1)

WEB前端

弄清楚ajax实现的五个步骤,带你用原生js实现ajax请求

弄清楚ajax实现的五个步骤,带你用原生js实现ajax请求

jquery提供的ajax方法好用的一批,那么我们如何用原生js实现ajax呢?原生js用来发送ajax请求的api是什么呢?本文就来教你如何利用原生js封装一个ajax请求,超级简单,并没有大家想象中的那么复杂。我们打开浏览器的console,简单抓几个包看看:如上图,在浏览器中随便打开一个页面,就可以看到有很多ajax请求,点开它们之后,可以看到在请求头中都有一个“XMLHttpRequest”。没错,原生js发送ajax请求的就是“XMLHttpRequest”,那么我们必须要弄清楚XMLHttpRequest实现ajax的步骤,只有搞清楚了……

不忘初心  发布于 2019-06-21 浏览(1561) 赞 (25)

WEB前端

JS禁止页面右键菜单,并且自定义鼠标右键菜单

JS禁止页面右键菜单,并且自定义鼠标右键菜单

在一些场景下,我们并不希望用户点击右键菜单来审查元素,或者说我们想在右键菜单中添加一些我们自己的功能,但是却没有直接的API,那我们就换一种思路,直接禁止浏览器的原生右键鼠标菜单,然后自己重新写一个右键弹出菜单。如下图所示:实现代码:<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scal……

不忘初心  发布于 2019-06-20 浏览(207) 赞 (4)

WEB前端

如何利用js实现div动态水平垂直居中显示

如何利用js实现div动态水平垂直居中显示

在一般的弹框组件中,弹出来的alert窗口基本上都在屏幕的正中央,也就是说开发者们用js实现了div的垂直水平居中显示,而且还是动态显示,不管弹出来的框框有多大,只要不超过屏幕宽度,都可以计算出来坐标,从而实现居中效果。话不多说,直接上代码:<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-……

不忘初心  发布于 2019-06-20 浏览(242) 赞 (17)

WEB前端

css实现div居中显示,垂直居中、水平居中

css实现div居中显示,垂直居中、水平居中

除了利用js来实现div的垂直水平居中,还有其他方法吗?如何直接利用css来实现div盒子垂直水平居中?网上有很多种方法,这里只给大家推荐两种最通俗易懂的方案。一、利用边距相互抵消,一正一负<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.……

不忘初心  发布于 2019-06-20 浏览(69) 赞 (4)

WEB前端

canvas在mac和2k高清屏下绘图模糊的解决方法

canvas在mac和2k高清屏下绘图模糊的解决方法

在之前使用canvas绘制网站logo时,发现logo图片会出现模糊的情况,在家里的电脑上看到是模糊的,今天在公司的mac上面看到也是模糊的,但是在公司的外接显示屏上没问题,瞬间反应过来了,家里的电脑也是2k的高清屏,所以这个问题肯定是屏幕分辨率太高导致的。在高清屏下的图,截屏了也会放大,如下图:在普通屏下,就不会缩放:两次截图时的尺寸是一样的,第一张图被放大了一倍(我在使用mac的时候,每次截图时都对此深恶痛绝),这也就是为什么在高清屏中logo会模糊的原因。解决方案:1、使用window.devicePixelRatio找出设备屏幕的缩放比例w……

不忘初心  发布于 2019-05-28 浏览(161) 赞 (8)

WEB前端

利用canvas来制作网站logo图片

利用canvas来制作网站logo图片

博客一直没有logo,苦于ps技术不咋地,只好利用canvas来简单绘制一个网站logo,非常的实用,如果大家的网站logo不是很复杂,也可以参考一下本教程。之前我的博客logo长这样:看着也还可以,对用户来说是无感的,看一下源码,并不是img标签,而是一个a和span标签组合而成的:投机取巧,终归不是正道。不多啰嗦,直接上代码:<!doctypehtml><html><head><title>test</title></head><bodyonload="draw('c……

不忘初心  发布于 2019-05-27 浏览(125) 赞 (6)