前端
文章平均质量分 52
G018_star sky♬
ᐕ)⁾⁾
展开
-
CSS把文字移动到图片上
用CSS往图片上嵌入文字有二种方法,分别如下:第一种方法添加一个DIV,采用绝对定位,图片所属DIV为基准。参考代码如下:<div style="position:relative;width:100px;height:100px;"> <img src="" alt="" /> <div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">原创 2021-07-15 16:07:45 · 2651 阅读 · 0 评论 -
web前端开发浏览器兼容性
浏览器兼容性问题又被称为网页或网站兼容性问题;不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果首先我们来看一下目前市面上常见的一些浏览器:ie、chrome、firefox、safari、opera、maxthon、360、qq、yy、uc、sogou、2345、淘宝、猎豹、世界之窗等其中表现很出色的有chrome、firefox、safari等;而表现极差的就是ie6/7内核浏览器了,我们的兼容性工作大半都是围绕这两个浏览器内核展开原创 2021-04-12 21:12:45 · 402 阅读 · 0 评论 -
原生JS单选框二选一
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .labelstyle {原创 2021-01-31 19:25:52 · 1123 阅读 · 2 评论 -
使用nginx反向代理解决跨域
需要使用到的包npm install express --savenpm install --save-dev http-proxy-middleware以及对应的使用说明文档链接:https://www.expressjs.com.cn/https://www.npmjs.com/package/http-proxy-middleware使用express创建一个本地服务器默认为3000,可将其改成其他的端口,我这里使用的是9000端口项目目录如下:index.js如下:// inc原创 2020-12-12 00:45:52 · 196 阅读 · 1 评论 -
HTML5 定位
什么是 Geolocation API?HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。使用地理定位Geolocation API 的主要方法是 getCurrentPosition,它用来获得用户的...原创 2020-02-16 16:46:00 · 1739 阅读 · 0 评论 -
Web Workers
什么是Web Workers?JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任...原创 2020-02-16 16:27:51 · 582 阅读 · 0 评论 -
如何使用HTML5中Web存储?
使用 HTML5 Web 存储, 可以在本地存储用户的浏览数据。在 HTML5 之前,本地存储使用的是 cookie。Web 存储的优势更加安全更加快速可以存储大量的数据每个服务器请求都不会发送存储的数据数据以 键/值 对存在,Web 网页的数据只允许该网页访问使用。Web 存储对象的类型Web 存储对象有两种类型:localStoragesessionStoragel...转载 2020-02-15 19:58:20 · 1672 阅读 · 0 评论 -
什么是Canvas?
<canvas> 元素HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。你可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。<c...原创 2020-02-15 19:35:37 · 1690 阅读 · 0 评论 -
HTML5中的SVG是什么?
什么是 SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG 圆形要使用 SVG 绘制图形,你首先需要创建一个 标签。要创建一个圆形,需要添加一个 标签。下面是 SVG 代码:...原创 2020-02-15 19:17:50 · 2283 阅读 · 0 评论 -
JavaScript:超实用的JavaScript技巧及最佳实践
1.使用逻辑符号&&或者||进行条件判断var foo = 10; foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); foo == 5 || doSomething(); // is the same thing as if (foo != 5)...转载 2019-12-15 11:27:17 · 401 阅读 · 0 评论 -
Simpleの纯CSS页面加载条特效
源代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; ...原创 2019-12-15 11:02:00 · 319 阅读 · 0 评论 -
什么是XML?XML 和 HTML 之间的差异
XML 被设计用来传输和存储数据。HTML 被设计用来显示数据。提示:XML 是可扩展标记语言,HTML 为超文本标记语言。什么是 XML?XML 指可扩展标记语言(EXtensible Markup Language)。XML 是一种很像HTML的标记语言。XML 的设计宗旨是传输数据,而不是显示数据。XML 标签没有被预定义。您需要自行定义标签。XML 被设计为具有自我描述性。...原创 2019-08-21 10:39:40 · 144 阅读 · 0 评论 -
overflow属性,此溢出非彼溢出
页面上的每个元素都是一个盒子。如果没有设置盒子的高度,那么盒子的高度将随着所需的内容的增大而变大。overflow属性有四个值:visible(默认值),scroll,hidden和auto。scroll值能阻止内容溢出,但会增加出滚动条,通过拉动滚动条可以浏览所有内容。auto - 如果内容溢出被限制,则会添加一个滚动条,使超出的内容可以通过滚动展示出来。hidden - 隐藏掉内容溢出...原创 2019-08-15 22:29:54 · 3833 阅读 · 0 评论 -
纯CSS实现3D效果旋转效果按钮_附源代码
3D Button hover Effects Button Button CSS代码如下:body{margin:100;padding:100;display:flex;justify-content: :center;align-items:center;min-height:100vh;background: ...原创 2019-08-16 18:34:32 · 924 阅读 · 0 评论 -
如何使用jQuery为页面添加流星特效
附上源代码:HTML:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>热爱可抵年华</title><link href="css/index_style...原创 2019-12-13 15:16:03 · 757 阅读 · 0 评论 -
如何在vue中实现Class与 Style的绑定?Click Here
vue Class 与 Style 绑定Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。...原创 2019-12-13 14:36:57 · 287 阅读 · 0 评论 -
ECMAscript5-新特性
ECMAscript5特性:这些是2009年发布的新特性:“use strict”指令1.String.trim()2.Array.isArray()3.Array.forEach()4.Array.map()5.Array.filter();6.Array.reduce();7.Array.reduceRight()8.Array.every();9.Array.some(...原创 2019-09-01 11:07:34 · 217 阅读 · 0 评论 -
jQuery中chaining有什么用?
通过 jQuery,您可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。jQuery 方法链接直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。提示:这样的话,浏览器就不必多次查找相同的元素。...原创 2019-10-05 13:04:48 · 246 阅读 · 0 评论 -
jQuery-获取内容和属性的方法
jQuery 拥有可操作 HTML 元素和属性的强大方法。jQuery DOM 操作jQuery 中非常重要的部分,就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。提示:DOM = Document Object Model(文档对象模型)DOM 定义访问 HTML 和 XML 文档的标准:“W3C 文档对象模型独立于平台和...原创 2019-10-06 11:54:53 · 367 阅读 · 0 评论 -
jQuery-使用noconflict()方法释放对$标识符的控制
jQuery使用符号作为jQuery的简写。其他一些JavaScript框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScriptMVC、GoogleWebToolkit、GoogleClosure、Ember、Batman以及ExtJS。其中某些框架也使用符号作为jQuery的简写。其他一些 JavaScript 框架包括:MooTo...原创 2019-10-06 17:46:43 · 283 阅读 · 0 评论 -
如何使用JavaScript的DOM属性
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>untitled Document</title> <script type="text/javascript"> /* DOM查询...原创 2019-10-06 19:03:03 · 221 阅读 · 0 评论 -
如何使用jQuery实现滑动效果
jQuery 滑动方法通过 jQuery,您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法:slideDown()slideUp()slideToggle()jQuery slideDown()方法jQuery slideDown()方法用于向下滑动元素。语法:$(selector).slideDown(speed,callback);可选的speed参数规定效果的时...原创 2019-10-05 12:46:04 · 882 阅读 · 0 评论 -
如何使用jQuery实现淡入淡出效果
Query Fading 方法通过 jQuery,您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法:fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 用于淡入已隐藏的元素。语法:$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下...原创 2019-10-04 20:19:53 · 571 阅读 · 0 评论 -
如何使用jQuery实现隐藏和显示的效果
jQuery hide()和show()通过jQuery,您可以使用hide()和show()方法来隐藏和显示HTML元素:<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(docum...原创 2019-10-04 20:04:33 · 335 阅读 · 0 评论 -
如何使用javascript设置日期?
使用“设置日期”方法可以设置日期对象的日期值(年、月、日、小时、分钟、秒、毫秒)。日期设置方法设置方法用于设置日期的某个部分。下面是最常用的方法(按照字母顺序排序):方法 描述setDate() 以数值(1-31)设置日setFullYear() 设置年(可选月和日)setHours() 设置小时(0-23)setMilliseconds() 设置毫秒(0-999)setMinut...原创 2019-09-06 11:16:33 · 770 阅读 · 0 评论 -
使用JavaScript获取日期的方法有哪些
<!DOCTYPE html><html><body><h2>JavaScript getMonth()</h2><p>getMonth()方法以 0 到 11 之间的数字返回日期的月份。</p><p>要获得正确的月份,您必须添加 1:</p><p id="demo...原创 2019-09-06 11:12:49 · 289 阅读 · 0 评论 -
听说node.js很火?那么这skr什么鬼东西?
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V...原创 2019-09-05 15:10:03 · 368 阅读 · 0 评论 -
javaScript中toPrecision()方法的作用
把数字格式化为指定的长度:var num=new Number(13.3714);var n=num.toPrecision(2);n输出结果:13定义和用法toPrecision()方法可在对象的值超出指定定位数时将其转换为指数计数法。语法:number.toPrecision(x)实例:<!DOCTYPE html><html> <head...原创 2019-09-03 12:23:18 · 1759 阅读 · 0 评论 -
GET请求 与 POST请求 对比
GET 与 POST 是 HTTP 中经常使用到的两种请求方式,下面将从适用场景、数据传递方式、数据量、安全性等方面对两者进行对比。GET 请求:一般用于信息获取:通过发送一个请求来取得服务器上的资源;数据包含在 URL 地址中;数据量受 URL 的长度限制;不安全:浏览器的 URL 可以直接看到,明文传输;GET 请求会被缓存;GET 没有请求主体,请求速度相对较快。POST 请...原创 2019-08-31 11:32:23 · 220 阅读 · 0 评论 -
jquery 事件处理
jQuery提供了一种处理事件的有效方式。当目标元素发生事件时,执行处理函数。例如,假设我们要处理id=“demo”的元素上的点击事件,并在点击按钮时显示当前日期。使用纯JavaScript,代码如下:var x=document.getElementById("demo");x.onclick=function(){document.body.innerHTML=Date();}...原创 2019-08-27 12:31:35 · 135 阅读 · 0 评论 -
CSS3动画
CSS3关键帧和动画CSS3动画动画让元素从一种风格逐渐变为另一种风格。您可以根据需要更改任意数量的CSS属性。关键帧将保存元素在特定时间的样式。@keyframes规则中指定CSS样式时,动画将在某些时间从当前样式逐渐变为新样式。要使动画起作用,必须将动画绑定到元素。以下示例将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时。代码示例如下:<!D...转载 2019-08-26 21:46:27 · 265 阅读 · 0 评论 -
JavaScript中DOM-innerHTML详解
innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;如:这是内容我们可以通过 document.getElementById(“ABC”).innerHTML 来获取id为aa的对象的内嵌内容;也可以对某对象插入内容,如 document.getElementById(“ABC”).innerHTML=’这是被插入的内容’;这样就能向id为abc的对象插入内容。实例:...原创 2019-09-18 17:43:20 · 1523 阅读 · 0 评论 -
CSS的left属性作用
把图像的左边缘设置在其包含元素左边缘向右 100 像素的位置:CSS代码如下:img{position:absolute;left:100px;}浏览器支持:所有主流浏览器都支持 left 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左...原创 2019-08-21 15:50:14 · 1092 阅读 · 0 评论 -
JS中var,let,const的区别是什么?
var:1.可以重复声明2.无法限制修改3.没有块级作用域4.全局作用域5.通过 var 关键词定义的全局变量属于 window 对象:let:不能重复声明,可以修改,块级作用域const:不能重复声明不能修改块级作用域...原创 2019-09-06 14:35:18 · 172 阅读 · 0 评论 -
使用Object.setPrototypeOf()设置对象的原型
此方法可以设置对象的原型。Object.setPrototypeOf方法是针对对象实例的,而不是构造函数(类),此方法修改的是对象实例的内部属性[prototype],也就是_proto_属性所指向的对象,它只是修改了特定对象上的原型对象,对于构造函数的prototype指向的原型对象没有影响。那是不是此方法就不能针对构造函数了,因为构造函数本身也是function(类)的实例。ES2015新...原创 2019-09-07 16:52:52 · 2050 阅读 · 0 评论 -
CSS三大特性(继承、优先级、层叠)
首先声明一下CSS三大特性——继承、优先级和层叠。继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color。简单的就不演示了,强调一下font-size这个东东(虽然也有继承,但是标签不同继承的效果也不一样),比如下面的代码:<!DOCTYPE html>&...转载 2019-09-10 15:28:47 · 213 阅读 · 0 评论 -
何为jQuery事件?
jQuery 事件函数jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。通常会把 jQuery 代码放到 部分的事件处理方法中:<html><head><script type="text/javascript" src="/jquery/j...原创 2019-10-03 20:11:28 · 215 阅读 · 0 评论 -
jQuery选择器有什么鸟用
jQuery元素选择器和属性选择器允许您通过标签名,属性名或内容对HTML元素进行选择。jQuery元素选择器和属性选择器允许您通过标签名,属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或当个元素进行操作。在HTML DOM术语中:选择器允许您对DOM元素组或单个DOM节点进行操作。jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。$(“p”)选...原创 2019-10-03 20:05:04 · 204 阅读 · 0 评论 -
浅谈bootstrap网格系统
bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。什么是网格(grid)?摘自维基百科:在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的,水平的)组成的结构(通常是二维的),它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用HTML和CSS...原创 2019-09-24 12:18:24 · 397 阅读 · 0 评论 -
浅谈JavaScript原型链
在JavaScript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是JavaScript进阶的重要一环。一,对象等级划分我们认为在JavaScript任何值或变量都是对象,但是我还需要将JavaScript中的对象分为以下几个等级。首先object是顶级公民,他是所有类的父类,这个应该是毋庸置疑的,因为所有的对象都是间接或直接的通过它衍生的。f...原创 2019-09-21 10:59:59 · 335 阅读 · 0 评论