前端基础
关注
分享
扫一扫
文章平均质量分 56
前端基础相关
Prosper Lee
谁又能来拯救我这灰暗的人生呢……
展开
-
前端基础（四十）：拖放功能的实现
【代码】前端基础（四十）：拖放功能的实现。原创 2024-10-10 16:11:26 · 832 阅读 · 0 评论 -
前端基础（三十九）：撤消与重做
【代码】前端基础（三十九）：撤消与重做。原创 2024-10-10 13:06:01 · 335 阅读 · 0 评论 -
前端基础（三十八）：iframe通信、浏览器跨窗口通信
iframe通信、浏览器跨窗口通信原创 2024-01-22 15:06:37 · 1195 阅读 · 0 评论 -
前端基础（三十七）：属性结构数据进行关键字筛选
属性结构数据进行关键字筛选。原创 2023-12-29 12:49:30 · 480 阅读 · 0 评论 -
前端基础（三十六）：读取本地音视频设备并进行播放
会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D 转换器等等），也可能是其他轨道类型。请求媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等。原创 2023-07-09 16:37:02 · 994 阅读 · 0 评论 -
前端基础（三十五）：SVG入门
基本形状Path 直线命令Path 三次贝塞尔曲线Path 二次贝塞尔曲线弧形填充和边框线性渐变径向渐变图案基础变形剪切遮罩嵌入光栅图像原创 2022-09-10 16:47:24 · 1520 阅读 · 0 评论 -
前端基础（三十四）：实现页面的瀑布流式布局
实现页面的瀑布流式布局原创 2022-07-09 14:32:34 · 803 阅读 · 0 评论 -
前端基础（三十三）：浏览器本地存储 - cookie、localStorage、sessionStorage
localStorage存储sessionStorage存储同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。只在本地存储。seesionStorage的数据不会跟随HTT原创 2022-07-07 09:45:21 · 356 阅读 · 0 评论 -
前端基础（三十二）：图片转base64
图片转base64原创 2022-07-07 09:24:03 · 3673 阅读 · 0 评论 -
前端基础（三十一）：移动端页面闪烁、设备识别、全屏切换
设备识别全屏非全屏互切原创 2022-07-07 09:15:50 · 546 阅读 · 0 评论 -
前端基础（三十）：自定义周度计算
需求1、每年的第一个周一到周日算作一周，以此类推2、第一个周一之前的一周大于等于4天算作当前年的第一周，否则算做去年的最后一周，第一个周一到周日将会作为第二周开始计数，并且当前年无第一周3、每年的最后一整周后的一周如果大于等于4天算做第最后一周，否则不算周实现let weeks = [];for (let i = 1970; i <= 2060; i++) { let year = i; let date = new Date(`${year}-1-1`);原创 2022-03-23 17:41:13 · 2502 阅读 · 0 评论 -
前端基础（二十九）：图片 转 html标签 和 字符串
展示源码ul { list-style: none; margin: 0; padding: 0; &::after, &::before { content: ''; clear: both; display: block; } li { float: left; width: 2px; height: 2px; }}.原创 2021-12-17 13:32:05 · 709 阅读 · 0 评论 -
前端基础（二十八）：ECharts为axisLabel标签过长添加提示功能
展示源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-10-19 14:56:31 · 853 阅读 · 0 评论 -
前端基础（二十七）：面向对象基础
defineProperty configurable writable value enumerableget() set()defineProperties 定义多个属性getOwnPropertyDescriptor 获取对象属性的所存在的权限描述原型对象hasOwnProperty 判断对象是否拥有某属性in 只要能够访问到属性就返回true判断属性 存在在实例上 还是 存在在原型上keys getOwnPropertyNames原型的动态性 - 先实例化后定义原型对象原型对象的问题 - 先定义原.原创 2021-03-25 11:38:58 · 104 阅读 · 0 评论 -
前端基础（二十六）：引用类型相关
参数与局部变量instanceofwith 延长作用域链toString toLocaleStringpush() 返回数组长度indexOf() 要求被查找的元素与目标元素是完全相等的（===）every some filterreduce reduceRightarguments.callee arguments.callee.caller`new 类型()` 与 `类型本身` 区别trim 去除字符串前后空格localeCompare冒泡排序法按字母排序参数与局部变量function setNa.原创 2021-03-25 11:36:19 · 181 阅读 · 2 评论 -
前端基础（二十五）：事件
onmousewheel 监听鼠标中键滚动// Chromewindow.onmousewheel = function (event){ let e = event || window.event; console.log(e);}document.addEventListener('mousewheel', function (event){ let e = event || window.event; console.log(e);})// Firefox原创 2021-03-25 11:30:42 · 169 阅读 · 1 评论 -
前端基础（二十四）：label语句、with语句、JSON、生成器、解析赋值、历史状态管理、将页面可编辑
label语句let data = { a: 'a', b: 'b', c: 'c', d: 'd', e: 'e' }// break 跳出switch循环，但是for循环继续// no a => b => no c => no d => no efor (key in data) { switch (key) { case "b": console.log(key); break;原创 2021-03-25 11:29:25 · 182 阅读 · 0 评论 -
前端基础（二十三）：DOM基础操作
原生JavaScript-DOM基础操作getAttribute setAttributechildNodes 空格换行也会被算作节点attributesnodeType 元素节点-1 属性节点-2 文本节点-3nodeValue 修改节点的值firstChild lastChildcreateElement createTextNode appendChildparentNode insertBefore-在已有元素前插入一个新元素在已有元素后插入一个新元素（新元素插入到目标元素的下一个兄弟元素之前）ac原创 2021-03-20 23:44:19 · 18337 阅读 · 0 评论 -
前端基础（二十二）：ECharts分层显示统计内容
展示完整代码option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['百度', '谷歌', '必应', '其他', '总计'] }, xAxis: [ { type: 'category',原创 2020-12-08 15:46:00 · 572 阅读 · 0 评论 -
前端基础（二十一）：移动端H5调用摄像头拍照旋转解决方案
展示布局样式<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script><style> canvas{ width: 200px; height: 200px; opacity: 0; } .upload{ width: 200px; height: 200px;原创 2020-10-23 15:13:58 · 1685 阅读 · 0 评论 -
前端基础（二十）：iOS中 new Date(‘xxxx-xx-xx‘) 返回 NaN
问题项目中某个地方用到 new Date 转换日期，在 iPhone 上测试的时候，显示的结果为NaN，调试发现 iOS 中 new Date('2020-01-01')返回的结果是 NaN，iOS new Date() 中不能包含 - 符号。解决使用 String.replace()进行字符替换即可。'2017-01-01'.replace(/-/g,'/') => '2017/01/01'...原创 2020-10-10 13:40:36 · 205 阅读 · 0 评论 -
前端基础（十九）：移动端H5拍照旋转获取方向
安装exif-jsnpm install exif-js --save // or<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>获取拍照方向EXIF.getTag(this, 'Orientation')参数描述6无旋转 0deg1左旋转 90deg3右旋转 90deg8旋转 180deg<input id="file" type原创 2020-09-12 11:44:05 · 583 阅读 · 0 评论 -
前端基础（十八）：地址栏地址分析&获取地址栏传参
Example地址：http://127.0.0.1:8082/prosperleedir/index.html?id=6666&name=prosper#prosperLocation{ assign:ƒ (), // 加载新的文档。 hash:"#prosper",原创 2020-08-31 09:24:59 · 698 阅读 · 0 评论 -
前端基础（十七）：H5移动端背景闪烁的解决办法
H5页面在IOS端测试的时，点击按钮会闪动，出现背景黑闪/* 全局 */*{ -webkit-tap-highlight-color:transparent;}原创 2020-08-10 17:44:36 · 714 阅读 · 0 评论 -
前端基础（十六）：H5移动端rem适配
/** * 移动端自适应 */<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">// <!--content-->// <!--width=device-width 可视区域的宽度，值可为数字或关键词device-width-->// &l原创 2020-07-24 22:08:20 · 191 阅读 · 0 评论 -
前端基础（十五）：命名规范
命名规则项目命名全部采用小写方式， 以下划线分隔。例：my_project_name目录命名全部采用小写方式， 以下划线分隔。有复数结构时，要采用复数命名法。例：scripts, styles, images, data_modelsJS文件命名全部采用小写方式， 以下划线分隔。例：account_model.jsCSS, SCSS文件命名全部采用小写方式， 以下划线分隔。例：retina_sprites.scssHTML文原创 2020-07-15 15:36:09 · 269 阅读 · 0 评论 -
前端基础（十四）：js规范
JavaScript缩进使用soft tab（4个空格）单行长度不要超过80，但如果编辑器开启word wrap可以不考虑单行长度分号变量声明表达式returnthrowbreakcontinuedo-while/* var declaration */var x = 1;/* expression statement */x++;/* do-while */do { x++;} while (x < 10);空格以下几原创 2020-07-15 15:34:21 · 390 阅读 · 0 评论 -
前端基础（十三）：CSS, SCSS规范
CSS, SCSS规范使用soft tab（4个空格）每个属性声明末尾都要加分号空格以下几种情况不需要空格：属性名后多个规则的分隔符’,'前!important '!'后属性值中’(‘后和’)'前行末不要有多余的空格以下几种情况需要空格：属性值前选择器 >, +, ~ 前后{前 .element {!important '!'前@else 前后属性值中的’,'后注释/*后和*/前/* good */.element > .dia原创 2020-07-15 15:31:39 · 475 阅读 · 0 评论 -
前端基础（十二）：HTML规范
HTML规范缩进使用soft tab（4个空格）；嵌套的节点应该缩进；在属性上，使用双引号，不要使用单引号；属性名全小写，用中划线做分隔符；不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；不要忽略可选的关闭标签，例：</li> 和 </body>。DOCTYPE 大写在 html 标签上加上 lang 属性字符编码 通常指定为 ‘UTF-8’IE兼容模式引入CSS, JS 通常在引入CSS和JS时不需要指明 type属性顺序bo原创 2020-07-15 15:30:39 · 282 阅读 · 0 评论 -
前端基础（十一）：前端开发规范参考
参考链接：更好的css解决方案参考链接：https://jsdoc.app/参考链接：https://codeguide.bootcss.com/参考链接：http://alloyteam.github.io/CodeGuide/原创 2020-07-15 15:28:31 · 119 阅读 · 0 评论 -
前端基础（十）：例题
找出第n个能被i，o，p整除的数function findNum1(n, i, o, p) { var num = 1; var numArr = []; (function (n, i, o, p) { if (num % i == 0 || num % o == 0 || num % p == 0) { numArr.push(num) if (numArr.length == n) {原创 2020-07-15 15:15:57 · 189 阅读 · 0 评论 -
前端基础（九）：浏览器加载时间线
创建Document，开始解析Web页面。这个阶段 document.readyState = 'loading'。遇到link外部css，创建线程加载，并继续解析文档。遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞整个页面，等待js加载完成并执行该脚本，然后继续解析文档。遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行（异步禁止使用document.write()）。.原创 2020-07-15 15:14:00 · 357 阅读 · 0 评论 -
前端基础（八）：克隆、数组、ES3、ES5、ES6
浅克隆let copyObj = obj; // 赋值let copyObj = Object.assign(obj); // 将源对象的属性赋值到目标对象上let copyArr = arr.concat(); // 连接数组,不传参,则表示复制原数组let copyArr = arr.slice(); // 截取数组或者字符串，不传参表示默认全部深度克隆，避免引用值被更改JSON.parse(JSON.stringify(data))$.extend(true, [], data)原创 2020-07-15 15:07:38 · 434 阅读 · 0 评论 -
前端基础（七）：原型、call、apply、this
原型Person.prototype – 原型Person.prototype.lastName = 'Lee';function Person(params) { this.lastName = "Zhang";}var person = new Person();console.log(person.lastName); // Zhang 就近原则function Person(){ this.name = 'Lee'}function Car(){ this.nam原创 2020-07-15 15:02:40 · 262 阅读 · 0 评论 -
前端基础（六）：js作用域-闭包
作用域function a() { function b() { } b();}a();// a 被定义 --> a.[[scope]] ---> [ 0: GO{} ] // a 执行时 --> a.[[scope]] ---> [ 0: AO{}, 1: GO{} ] // a 函数被定义时在 a.[[scope]] 属性中生成了一个 第0位 为 GO{}// a 函数被执行时在 a.[[scope]] 属性中生成了一个 第0位 为 AO{原创 2020-07-15 14:47:59 · 135 阅读 · 0 评论 -
前端基础（五）：js预编译-js运行三步曲
js运行三步曲（一）.语法分析通篇扫描，检查是否有语法错误（二）.预编译（发生在函数执行的前一刻）预编译四步曲1.创建AO对象（执行期上下文）AO {}2.找形参和变量声明，将变量和形参名作为AO属性名，值为undefinedAO{ a: undefined, b: undefined }3.将形参和实参统一AO{ a: 1, b: undefined }4.在函数体里面找函数声明，值赋予函数体 （var b = function () { } 不是函数声原创 2020-07-15 14:41:44 · 263 阅读 · 0 评论 -
前端基础（四）：js基础知识语法
浏览器组成shell部分内核部分渲染引擎（语法规则和渲染）js引擎其他模块解释型语言 & 编译型语言编译型语言：c c++优点：快不足：移植性不好（不跨平台）解释型语言：python php js优点：跨平台不足：相对慢java:.java --> javac --> 编译 --> .class --> jvm --> 解释执行单线程js单线程 （同一时间只能干一件事）异步：同时进行同步：不同时进行原创 2020-07-15 14:28:36 · 258 阅读 · 0 评论 -
前端基础（三）：CSS布局
参考链接：https://blog.csdn.net/m0_38134431/article/details/84372226转载 2020-07-09 13:00:51 · 118 阅读 · 0 评论 -
前端基础（二）：CSS三角形
参考链接：https://blog.csdn.net/qq_34382449/article/details/81234653转载 2020-07-09 11:46:12 · 171 阅读 · 0 评论 -
前端基础（一）：HTML、CSS相关
H5 新特性语义化标签header footer section nav aside article增强型表单input 的多个 type新增表单元素datalist keygen output新增表单属性placehoder required min max音频视频audio video其他canvas 地理定位 拖拽本地存储localStorage数据上限5MB左右（根据浏览器不同会有所区别）无论打开还是关闭标签浏览器数据均保留sessionStorage原创 2020-07-07 10:28:05 · 311 阅读 · 0 评论