自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(111)
  • 收藏
  • 关注

原创 HTML5笔记

HTML5什么是HTML5定义万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改环境支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力目的HTML5的设计目的是为了在移动设备上支

2024-07-19 11:00:40 1000

原创 拖拽上传(预览图片)

/创建一个url的blob ,在当前会话下生效,不像base64那样在哪里都能用,如在浏览器中用,当你关掉浏览器再开浏览器用则不生效,是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮,点在Input身上即可 */点击+上传图片,或直接拖拽图片到红色方框里面也可上传图片,上传后预览图片。//拿到input当前上传的文件,拿不到url,想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob,不可持续。

2024-07-18 14:29:38 322

原创 读取文件进度条

/如果不清除,当多次提交时,后面重新选择的提交文件,提交时有可能还是上一次选择的文件,用于防范此类bug。//清楚方法:在上传等操作回调中把file input的 类型进行一次切换 用于清空里面的files存留。//一般不放在onload里面,一般用于ajax上传表单,回调完成时再清空。//为了保证安全,建议每次上传结束要清理input文件。//文件转化为 Base64。

2024-07-18 12:36:32 170

原创 自定义video

需求播放暂停切换播放进度条反馈和控制 (拖拽 点击) 播放时间 00:00/05:30音量调控 反馈 一键静音/取消静音全屏播放 循环模式播放状态反馈 未播放 已播放 播放完毕本地存储播放时间 自动续播准备 [ { 方法:[ play(),pause()], 属性: [paused], element:[#contr-play] },{ 方法:[

2024-07-17 15:01:08 695

原创 Promise 对象

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。(1)对象的状态不受外界影响。

2024-07-16 15:59:34 1005

原创 Symbol

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

2024-07-16 12:52:09 592

原创 Proxy代理

Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

2024-07-16 12:05:08 896

原创 前端常见功能案例实现

padding: 0;left: 0;right: 0;.bar {浔阳江头夜送客,枫叶荻花秋瑟瑟。主人下马客在船,举酒欲饮无管弦。醉不成欢惨将别,别时茫茫江浸月。忽闻水上琵琶声,主人忘归客不发。寻声暗问弹者谁,琵琶声停欲语迟。移船相近邀相见,添酒回灯重开宴。

2024-07-09 15:32:54 263

原创 ES5/ES6补充笔记

ES5/ES6

2024-07-09 15:13:57 972

原创 javascript高级部分笔记

javascript高级部分Function方法 与 函数式编程call语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])定义:调用一个对象的一个方法,以另一个对象替换当前对象。说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 let myName = 'goudan

2024-07-09 15:02:58 1289

原创 javascript DOM BOM 笔记

Web APIAPI的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())Web API的概念浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)此处的Web API特指浏览器提供的API(一

2024-07-09 12:53:34 763

原创 js吸顶导航

吸顶导航当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式,吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前,为用户提供了极大的便利与交互体验。吸顶导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方,如Banner图。当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部

2024-07-09 12:44:42 545

原创 JS之防抖和节流

在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。在后期有拓展了前缘防抖函数,即执行动作在前,设定延迟周期在后,周期内有事件被触发,不执行动作,且周期重新设定。当事件被触发时,设定一个周期延时执行动作,若周期又被触发,则重新设定周期,直到周期结束,执行动作。固定周期内,只执行一次动作,若没有新事件触发,不执行。

2024-07-09 12:16:47 1032

原创 js实现移动蒙版层

可在整个页面拖动方块,但方块不能超出页面。

2024-07-09 12:00:37 150

原创 js碰撞检测

碰撞检测碰撞检测(边界检测)在前端游戏,以及涉及拖拽交互的场景应用十分广泛。碰撞,顾名思义,就是两个物体碰撞在了一起,眼睛是可以直观的观察到碰撞的发生。但对于前端实现,如何让 JavaScript 代码理解两个独立的“物体”(DOM)碰撞在一起呢。这就涉及到碰撞检测(或者叫边界检测)的问题了。两个矩形块的碰撞:判断任意两个(水平)矩形的任意一边是否有间距,从而得之两个矩形块有没有发生碰撞。具体实现方式,可以选定一个矩形为参照物,计算另一矩形的与自己相近的边是否发生重合现象。若四边均未发生重合,则

2024-07-09 11:56:29 304

原创 js中offset、scroll、client、getBoundingClientRect、event坐标位置及视窗系列

返回整个页面的滚动的位置,获取滚动的高度pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致,前者是后者的别名,建议使用前者,不支持 IE8。同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸,这个方法返回元素本身的宽高 + padding + border + 滚动条。返回的是计算后的 CSS 样式的 border-left-width/border-top-width 的值,就是边框的宽度。

2024-07-09 11:34:59 984

原创 楼梯导航案例

/true 与浏览器对其 false 居中。

2024-07-09 10:26:41 322

原创 放大镜案例

/ 展示比例 (展示区图片宽度 - 展示区宽度) / (预览区宽度 - 遮罩层宽度)

2024-07-08 16:21:36 769

原创 旋转木马案例

旋转木马如果接口需要的数据格式和原始数据提供的格式有差异不要去改接口方法 也不要改原始数据做一层中间件(数据处理函数/方法)<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

2024-07-08 16:16:30 783

原创 轮播图案例

丐版轮播图<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 基础轮播图 banner 移入移出</title> <style> * { m

2024-07-08 16:05:50 552

原创 选项卡切换(排他法、轮转法、轮转法之事件委托)

tabbar content 两部分的内容一一对应,我们点击某一个tab的时候,该tab的类名设置为on,其他的tab要清除on类名,对应的content的类名要设置为 active ,其他的content清除active类名。// aTab[i].onclick = function () { //循环绑定事件耗资源,优化事件委托。//方法三:轮转法之事件委托优化 通过监听父元素的点击事件,找到点击的子元素下标。//触发事件的DOM目标。

2024-07-08 16:04:40 670

原创 common通过js方法

common通用js方法。

2024-07-08 15:53:39 197

原创 冒泡排序、插入排序、选择排序

插入排序的代码实现虽然没有冒泡排序和选择排序那么简单粗暴,但它的原理应该是最容易理解的了,因为只要打过扑克牌的人都应该能够秒懂。插入排序是一种最简单直观的排序算法,它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。冒泡排序是一种比较简单的排序算法,这种算法是让越小或者越大的元素经由交换慢慢“浮”到数列的顶端,就像水里面的泡泡向上浮动一样,所以叫“冒泡排序”。选择排序是一种简单直观的排序算法,无论什么数据进去都是 O(n²) 的时间复杂度。1. 比较相邻的元素。

2024-07-08 14:04:40 255

原创 JavaScript基础笔记

前言在JavaScript诞生的前几年,有人说:JavaScript是一门四不像的语言;JavaScript是一门没有规范的语言;JavaScript是一门兼容糟糕的语言;JavaScript是一门不精准的语言;JavaScript是一个半成品语言;JavaScript是一门糟糕的语言;JavaScript只是一个玩具胶水语言;这些声音从JavaScript面世之初就一直伴随着她,声音的主人不乏已掌握多门语言的coding老兵,每一条负面都事实支撑。就连JavaScript之父也曾经说过:"与其说我

2024-07-08 12:46:45 1177

原创 固定定位的盒子靠近版心右侧对齐案例

小盒子left 50% 然后 margin-left 版心宽度一半。

2024-07-08 11:29:28 255

原创 BFC详解

FC的全称是: Formatting Contexts,是 W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

2024-07-08 11:13:31 1029

原创 CSS content 计数器

CSS 计数器通过一个变量来设置,根据规则递增变量。

2024-07-08 11:11:07 691

原创 原生CSS变量

声明的变量是有作用域的,比如是在html中声明的变量,那么该变量在html中的任何地方都可以使用这个变量,如果该变量在p标签中声明的,那么只能在p标签下使用这个变量。var() 函数有第二个参数,表示变量的默认值,如果该变量不存在(第一个参数),那么就使用这个默认值。变量声明的时候,变量名之前加上两根连词线(–)即可。css变量遵从 css优先级的原则 变量值会被覆盖。css中我们可以统一设置。

2024-07-08 11:07:13 453

原创 CSS兼容处理

建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器(主要指window7系统的浏览器),转而支持 edge(window10以上系统)这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅降级, 渐进增强) 和两种 技巧(前缀兼容与HACK兼容)

2024-07-08 10:58:26 762

原创 字体图标的使用

7kkyc2');important;

2024-07-08 10:41:45 901

原创 在一行中实现每个盒子间隔相等

缺点:苹果的兼容性不好,推荐以下方法。

2024-07-08 10:32:58 288 1

原创 清除浮动的方法

靡不有初,鲜克有终。既然搭建了高架桥和空轨 自然也要有个终点站,不然跑着跑着脱轨了就很尴尬。

2024-07-08 10:21:36 571

原创 绝对定位实现横线增长方向小技巧

使用绝对定位脱标后,用left和top设置横线增长方向。如果是left: 0;从左向右过渡长,如果是right: 0;

2024-07-07 01:24:24 163

原创 行内元素、块级元素居中

盒子宽高已知, position: absolute;left: 50%;margin-left:-自身一半宽度;盒子宽高已知, position: absolute;margin-top:-自身一半高度;这种方法不推荐,因为当盒子宽高不是偶数的时候,一般会出现小数点,推荐使用以下方式,比较省事,让浏览器自己去计算。

2024-07-07 01:13:44 269

原创 制作精灵图

图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

2024-07-06 00:58:32 321

原创 伪元素content追加文字使用小技巧

当用js渲染的一些值,可以加到自定义属性中,然后用content将自定义属性的值渲染出来。E::before和E::after本身的作用是追加字,直接在文字后面追加链接。

2024-07-06 00:54:03 212

原创 利用border绘制三角技巧

绘制三角形的效果如图。

2024-07-06 00:48:45 226

原创 隐藏的h1写法(以图换字)

所谓以图换字,即直接使用一张图片或背景,没有文字。我们知道,蜘蛛爬取时是不会获取图片上的内容的,但是如果是添加上文字,即便使用一些字体,也可能达不到图片的显示效果。如何将用户体验与SEO优化相兼容呢,我们可以使用text-indent属性来操作。

2024-07-06 00:39:05 150

原创 HTML+CSS笔记

标签HTML标签网页的大包围 整体网页内容的外衣 所有的网页文档内容都要写在 html标签内lang属性,是指内容语言的,目的是让浏览器知晓这个页面的主要展示语言 是什么 只跟浏览器的翻译有关主要展示的语言如果是英语 en,主要展示的语言如果是中文 zh-cn,如果在浏览器主要语文是中文的情况下,设置lang为en,则会跳出翻译提示HEAD标签用来设置网页基本信息的标签 网页的大脑meta 标签设置网页信息 charset 设置网页编码集 UTF-8 国际编码 支持

2024-07-05 13:03:26 1181

原创 转换时分秒00:00:00方法

【代码】转换时分秒00:00:00方法。

2024-07-04 11:52:16 320

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除