吾昂王

万能时间转换函数。

前言Web前端技术由 html、css 和 javascript 三大部分构成，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文主要对Web前端知识体系进行简单的梳理，对应的每个知识点 点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。因为知识点过多，导出图片会出现失真，所以此处只显示了大概知识点，需要查看具体内容的，可以点击前端地位导

HTML && CSS视频教程HTML学习笔记CSS学习笔记HTML && CSS 查漏补缺笔记Sass文档Javascript官方笔记视频教程 – 壹视频教程 – 贰项目教程学习笔记TypeScript官方文档入门文档视频教程 – 尚硅谷视频教程 – 千锋Webpack官方文档视频教程JQuery官方文档视频教程Ajax基础文档视频教程

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map不改变原数组map返回数组元素操作后的值，就是一定有返回值map遍历一次产生一个返回值var arr = [1,4,9,16];const map1 = arr.map(x => x *2);console.log(map1); // [2,8,18,32]而如下写时：var arr = [1, 4, 9, 16];const map1 = arr.map(x => {

formData 主要用于发送表单数据，但是也可以用来发送键值对数据(key:value)，如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit()方法来发送数据，从而，发送数据具有同样形式前言 项目要求实现图片批量上传，在此记录实现此功能的方法代码var formData = new FormData();for (var i = 0; i < fileArray.length ; i++){ formData...

ajax与fetch都是前端开发过程中常用到的数据请求方式。fetch是一种http数据请求的方式，是XMLHttpRequest的一种替代方案；ajax使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。ajax创建XMLHttpRequest对象 创建HTTP请求（调用open方法设置基本请求信息） 发送请求 注册事件 获取返回数据，对页面进行更新//1.创建Ajax对象 if(window.XMLHttpRequest){

HTML、CSS1、元素水平垂直居中• 定位偏移 top，left为50%，margin-left，margin-top自身的-50%• 定位平移 top，left，bottom，right为0，margin为auto• 定位平移 top，left为50%，transform：translate(自身的50%)• 弹性盒 主轴与交叉轴居中• 表格 父block，子table-cell2、C3新特性1 圆角边框：border-radius 2 多背景图：background 3

问题：在项目开发时，有时需要获取 冒泡或捕获 过程的所有元素解决方案： Chrome通过event.path获取：element.onClick(event) { const ev = window.event || event; const path = ev.path;} event.path属性在Chrome和Opera浏览器下没问题，但是在Firefox和Safari中发现event并没有path属性 所以在Firefox...

jQuery是一个JavaScript库，其极大地简化了JavaScript编程。jQuery具体概念可参考：http://jquery.com/ 或http://www.jquery123.com/1、jQuery引入：方式一：引入本地的Jquery的文件方式二：采用cdn（内容分发网络）方式 地址：https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js2、$符号介绍$是jQuery别名。可以..

面向对象的继承：子类继承父类，但子类不影响父类面向对象开发的两种方式：1、混合开发(构造函数+原型) -- 混合继承【构造函数继承call/apply+原型继承(拷贝继承/原型链继承)】 构造函数继承call/apply// 创建Person类function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex;}// Person原型对象...

原型对象：每一个构造函数都有一个 prototype 属性，指向另一个对象。这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有function Star(uname, age) { this.uname = uname; this.age = age;}Star.prototype.sing = function() { console.log('我会唱歌');}var ldh = new Star('刘德华', 18);var zx

什么是闭包？闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。闭包要满足的条件：【1】访问所在作用域；【2】函数嵌套；【3】在所在作用域外被调用function func(){ var n = 0; // n是func函数的局部变量 console.log(n,'func');// function closur

什么是跨域？概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。对于端口和协议的不同，只能通过后台来解决。 URL 说明 是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许http://www.a.com/lab/a.jshttp://www.a.com/s

1、面向过程与面向对象面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了面向对象：把事务分解成为一个个对象，然后由对象之间分工与合作面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护 缺点 不易维护.

1、动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动距离 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件 5.注意此元素需要添加定位，才能使用element.style.leftfunction animate(obj, target) { // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器 /...

字符串扩展：1.模板字符串（templatestring）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（${}）// 普通字符串let str=`hello'\n'world`; // hello// world // 多行字符串let str=`hello,this is a string`;// hello,// this is a string // 字符串中嵌入变量和表达式let a='x',b.

this的概念及指向问题：this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是调用函数的那个对象。//1、作为普通函数调用，这时函数属于全局性调用，因此this就代表全局对象window //普通函数 function fn() { alert(this); } fn(); //函数表达式:将函数

1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式，本阶段我们主要是利用JavaSc

事件监听器（事件绑定、事件侦听）一个元素对象上面可以绑定多个事件处理函数，事件监听分为：标准浏览器事件监听、IE浏览器事件监听（非标准浏览器事件监听）/* 标准浏览器事件监听 target.addEventListener("事件类型",函数,是否捕获(布尔值)) 是否捕获：默认不写就是冒泡(false),true:捕获*/document.addEventListener('click',function(){ console.log('事件绑...

概念：在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有事件相关的信息获取事件对象-event：事件对象：标准浏览器的事件对象是事件处理函数中的一个隐藏的（第一个）参数，可以通过参数获取对象document.onmousedown = function(ev){//鼠标按下 ev:事件对象 console.log(ev); // console.log(arguments[0])}document.onkeydown = functio..

自定义属性及getAttribute等方法1.getAttribute()获取特定元素节点属性的值，某些低版本浏览器IE8不支持.alert(oBox.getAttribute('title'));alert(oBox.getAttribute('hehe'));alert(oBox.getAttribute('data-name'));2.setAttribute()设置特定元素节点属性的值，某些低版本浏览器IE8不支持.oBox.setAttribute('abc',100...

BOM：【滚动条事件】//scrollTo(x,y) 方法可把内容滚动到指定的坐标。document.onclick = function() { scrollTo(100, 200);}【定时器】 1.间隔定时器：反复执行定时器，规定的时间内不断的执行// window.setInterval(函数名、函数体, 时间ms);var num = 0;var timer = window.setInterval(function() { num++...

HTML结构：1、获取单个元素：getElementById()<div id="box" title="我是标题">我是一个div盒子</div>var box = document.getElementById('box');2、通过标签名获取元素对象(单个和多个),结果是类数组(如果获取的是一个元素，也是类数组) ：getElementsByTagName<ul id="ul1"> <li>1111</li>

Math对象(数学对象)：JavaScript内置对象，无需创建，直接存在的【属性】Math.E欧拉常数，也是自然对数的底数，约等于 2.718。Math.LN22 的自然对数，约等于 0.693。Math.LN1010 的自然对数，约等于 2.303。Math.LOG2E以 2 为底的 E 的对数，约等于 1.443。Math.LOG10E以 10 为底的 E 的对数，约等于 0.434。Math.PI圆周率，一个圆的周长和直径之比，约等于 3.14159。M

字符串相关介绍：创建方式： var str = new String("abc"); --object var str=“abc”; --string字符串属于类数组 ： 类数组的概念：也叫伪数组，在js中有一些对象它也拥有length属性，且拥有为非负整数的属性(索引)，但是它又不能调用数组的方法，这种对象被称为类数组对象。 字符串是类数组；arguments是类数组为什么基本类型具有属性和方法 ： ...

包装对象定义：指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。var num1 = new Number(123);var num2 = new String('abc');var num3 = new Boolean(true);typeof num1 // "object"typeof num2 // "object"typeof num3 // "object"num1 ===

ES5严格模式的目的1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为2.为未来新版本的Javascript做好铺垫3.消除代码运行的一些不安全之处，保证代码运行的安全4.提高编译器效率，增加运行速度ES5严格模式的标记-"usestrict"将"usestrict"放在脚本文件的第一行，则整个脚本都将以"严格模式"运行将"usestrict"放在函数体的第一行，则整个函数以"严格模式"运行。ES5严格模式的语法和行为改变1.变量显式声明...

【冒泡排序】原理：针对所有的元素重复以上的步骤， 除了最后一个。持续每次对越来越少的元素重复上面的步骤， 直到没有任何一对数字需要比较。比较相邻的元素。 如果第一个比第二个大， 就交换他们两个。对每一对相邻元素做同样的工作, 从开始第一对到结尾的最后一对, 在这一点， 最后的元素应该会是最大的数。var arr = [12, 3, 569, 78, 0, -56, 1223, 11, 16, 13, 1, 12];function bubbleSort(arr) { if (

数组的类别：1、整数数组var arrnum = [123, 45, 67, 8, 9];2、字符串数组var arrstr = ['hello', 'hi', 'hehe'];3、对象数组：数组项是对象[{"id":"1001","name":"值1","value":"111"},{"id":"1001","name":"值1","value":"11111"},]4、二维数组 - 数组项的值还是数组var array = [[1, 2, 3, 4, 5],[6, 7,

为什么使用数组？ 数据太散了，每一条数据都有一个不同的名字，需要一个名称包含多条数据数组： 定义： 一组任意类型或者相同类型的数据 特点： Array类型属于对象类型。 Array类型是最常用的类型。 Array有序排列。 Array可以保存任何类型。 Array的大小也是可以调整的。数组的创建：使用系统内置的类 - Array创建...

作用域： 任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。作用域的划分：局部作用域和全局作用域 全局作用域（变量）：整个程序都有效，即整个代码中都可以调用（变量前面没有添加var变成全局的属性） 局部作用域（变量）：只对函数内部有效，即只能在本变量声明的函数内部调用。函数内部的var声明的变量就是局部变量，其他的变量都是全局形参：也是函数的局部变量 只能在函数内部使用函数的作用域是半...

类 --> 对象(实例对象) -->(属性+方法) 属性：描述对象的(属性不存在输出undefined,不会报错) - 一般都是私有的 方法：对象具有的功能 - 分成主动的方法和被动的方法(事件) - 一般都是公有的系统提供的类(构造函数) + 系统提供的对象(属性和方法)方法和函数function的关系非常密切；方法由function来实现的。ECMAScript 中的函数使用 function 关键字来声明，后跟一组参数以及函数体。 functio...

渲染：通过 js+后端接口数据 输出基本的html结构。循环结构循环结构表示程序反复执行某个或某些操作， 直到某条件为假（ 或为真） 时才可终止循环。循环结构的基本形式有两种： 【当型循环】和【直到型循环】。【当型循环】： 表示先判断条件， 当满足给定的条件时执行循环体， 并且在循环终端处流程自动返回到循环入口； 如果条件不满足， 则退出循环体直接到达流程出口处。 因为是 "当条件满足时执行循环"，即先判断后执行， 所以称为当型循环。【直到型循环】： 表示从结构入口处直接执行循环..

选择语句(分支) - if(如果)语句块：{}代表语句块，可以放置多条语句，如果只有一条语句，可以省略花括号。单选择(单分支)基本结构if(条件){ 满足条件(条件结果为真)执行的代码块 }其中的条件可以是任意表达式；而且对这个表达式求值的结果不一定是布尔值。ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值。非零即真，非空即真，undefined和null为false.单分支语句的特点：满足条件，执行对应的代码块，不满足条件，不做任何处理

对象理解： 对象 = 属性 + 方法 innerHTML：读写（获取和设置）元素对象内部的内容，包含标签 对象名.onclick = function() { //点击后执行后面的花括号里面的代码。 对象名.innerHTML = 事件; }变量的类型： typeof()：检测数据的类型，使用时typeof后面的括号可以省略 一、变量的数据类型（6种） 1、基本类型（5种） ...

一、JS介绍 JavaScript（简称JS）是一种轻量级、解释型的Web开发脚本语言 轻量级：语法简洁，不能操作系统文件 解释型：无需编译，直接浏览器就可以解释 前端主要工作： 渲染：渲染结构 用户体验：表单验证，效果 性能优化：懒加载，雪碧图 JavaScript的组成： BOM：浏览器对象模型 DOM：文档对象模型 - 标签元素 ECMAscript：...