喵_美-CSDN博客

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

2024-07-19 11:00:40 1700

原创拖拽上传（预览图片）

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

2024-07-18 14:29:38 545

原创读取文件进度条

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

2024-07-18 12:36:32 271

原创自定义video

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

2024-07-17 15:01:08 701

原创 Promise 对象

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

2024-07-16 15:59:34 1014

原创 Symbol

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

2024-07-16 12:52:09 595

原创 Proxy代理

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

2024-07-16 12:05:08 905

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

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

2024-07-09 15:32:54 267

原创 ES5/ES6补充笔记

ES5/ES6

2024-07-09 15:13:57 976

原创 javascript高级部分笔记

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

2024-07-09 15:02:58 1294

原创 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 800

原创 js吸顶导航

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

2024-07-09 12:44:42 549

原创 JS之防抖和节流

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

2024-07-09 12:16:47 1037

原创 js实现移动蒙版层

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

2024-07-09 12:00:37 152

原创 js碰撞检测

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

2024-07-09 11:56:29 307

原创 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 989

原创楼梯导航案例

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

2024-07-09 10:26:41 323

原创放大镜案例

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

2024-07-08 16:21:36 773

原创旋转木马案例

旋转木马如果接口需要的数据格式和原始数据提供的格式有差异不要去改接口方法也不要改原始数据做一层中间件(数据处理函数/方法)<!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 785

原创轮播图案例

丐版轮播图<!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 556

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

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

2024-07-08 16:04:40 674

原创 common通过js方法

common通用js方法。

2024-07-08 15:53:39 200

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

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

2024-07-08 14:04:40 256

原创 JavaScript基础笔记

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

2024-07-08 12:46:45 1179

空空如也

空空如也