前言 本文章介绍该太极图制作过程中所调用的 API 以及 CSS 记录和总结 document.querySelector() 方法：文档对象模型 Document 引用的 querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素 Element.如果找不到匹配项,则返回 null let demo = document.querySelector('#demo') innerHTML 是一个属性忘该元素中添加内容 let demo = document.querySelector("#demo") demo.innerHTML =2 setTimeout()定时器：该定时器在定时器到期后执行一个函数或指定的一段代码 setTimeout(()=>{ demo.innerHTML = 3 },3000) setInterval()方法：方法重复调用一个函数或这姓一个代码段,在每次调用之间具有固定的时间延迟 let n =1 setInterval(()=>{ n++ },3000) String.prototype.substring()方法返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串末尾的一个子集(不包含结束索引) let string = `你好,我是一名前端新人` console.log(string.substring(0,1)) //你 String.prototype.replace()方法：方法返回一个由替换值替换一些或所有匹配的模式后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配的都要调用的回调函数。原字符串不会改变 let string = ` 你好,我是一名前端新人 接下来我要加样式了 我要加的样式是 body{ color:red; }`; string = string.replace('\n','<br>') //换行换成HTML元素里的换行标签 //第一个参数如果不是正则表达式则只会替换一次 string = string.……

1. 用递归实现类似Math.prototype.min()方法:返回一个最小值 这是JS内置的一个方法.先从两个数实现开始,最后实现类似Math.min的方法 当我们调用Math.min()时,默认总会返回一个最小值 两个数返回一个最小值 let min = (numbers)=>numbers[0]>numbers[1]？numbers[1]:numbers[0]; min([2,3]) //2 //简化成——析构赋值 let min = ([a,b])=> a>b?b:a min([2,3]) //2 三个数返回一个最小值 let min2 = ([a,b,c])=> min([a,min([b,c])]) min2([3,4,5]) //3 四个数返回一个最小值 let min3 = ([a,b,c,d]) => min([a,min2([b,c,d])]) min3([4,5,6,7]) //4 你会发现 min min2 min3是环环相扣的.你可以根据min min2 min3 写出min….既然每次调用都是min来计算两个数的大小,如果你学过递归的话并且用递归去写,这个代码量就少的很多 简单实例: 实现1+2+3+4…+100用for和递归做 //for let num=0; for(let n=1;n<=100;n++){ num+=n; } //5050 //递归:总之就是不满足条件前一直去调用自身函数,满足条件后逐一释放调用自身函数.前者为递,后者为归 let num=0; let add = (n) =>{ if(n<=100){ add((num+=n,++n)) }else{ console.log(num) } } add(1) //5050 只要条件成立就会一直调用自身add()函数,条件满足逐一释放自身函数() //代码优化： let add = (n) => n<=100?……

原型 今天我们谈谈原型,当我们使用对象时,该对象有一个__proto__的属性问的就是它的属性值来自哪里? 我们目前只举例三种 Function Object Array 带你了解过后可以自行推出其他 基于这三种公式 1. 对象.__proto__ === 其构造函数.prototype 例1： let a = {} a的原型就是构造对象函数的prototype a.__proto__ === Object.prototype 2. Object.prototype是所有对象的的直接或间接原型 例2: Function.prototype.__proto__ === Object.prototype 3. 任何函数.__proto__ === Function.prototype 例3：任何函数包含构造函数和被构造出来的函数。 构造函数: Object.__proto__ === Function.prototype Function.__proto__ === Function.prototype Array.__proto__ === Function.prototype 被构造出来的函数： function fn(){} fn.__proto__ === Function.prototype 根据以上的概念和公式,我们可以推出Object,Function,Array的原型以及被构造函数构造出来的对象的原型 1. Object 注意：Object.prototype是所有对象的直接或间接原型。那Object.prototype的原型是什么？是null(是没有的意思) console.log(Object.prototype.__proto__ === null ) //true //对象的构造函数 Object.__proto__ === Function.prototype //公式3 Object.__proto__.__proto__ === Object.prototype //公式3 再看公式2 Object.__proto__.__proto__.__proto__ === null //公式3 再看公式2 看看开头的注意 //对象实例 let a = {} a.……

JavaScript运算符 目录 算术运算符 比较运算符 布尔运算符 二进制运算符 其他运算符 点运算符 void运算符 逗号运算符 算术运算符 加法( + ) 减法( - ) 除法( / ) 乘法( * ) 求余( % ) 幂( ** ) 递增( ++) 递减( --) 一元负号( - ) 一元正号( - ) 注：第一行是二元操作符,第二行是一元操作符。区别在于是有一个还是有两个操作数。例：一元的意思只有一个操作数 +2。递增和递减分前置和后置。区别在于先加减还是后加减 // 二元操作符 // 例： 1+1 // 一元操作符 // 例: +1 // 前置递增/递减(递增/递减只能用于变量,常量不可用) // 例： let a = 1 ++a --a // 后置递增/递减(递增/递减只能用于变量,常量不可用) // 例： let a = 2 a-- a++ Number 类型运算 let a = 1 let b = 1 console.……

1. 为何以下代码打印出6个6？ let i=0 for(i=0;i<6;i++){ setTimeout(()=>{console.log(i)},0) } /* 输出： 6 6 6 6 6 6 */ 首先 let(块级作用域)定义一个i变量初始值为0。在for里循环,setTimeout()方法是一个定时器，该定时器到期后会执行指定的代码.延迟以毫秒计算1000毫秒=1秒,默认值是0(为0时也不会在第一代码执行。)). 我们首先了解到有一个循环,和一个定时器。在整个环境中i在全局范围内.我们该如何理解最后输出6个6。首先分两个部分,第一代码执行,第二执行其余代码.for循环在第一代码执行但是到包含了setTimeout()，发现它是一个定时器而且延迟为0毫秒在执行,那就放到第二代码执行去,现在剩下的代码执行完毕再说.setTimeout()在第二代码执行.因为在第一代码执行后 i因for值变成6。所以,在第二代码执行时setTimeout函数去调用i时,i的值为6 什么是第一代码执行：预先先写的,不需要交互点击我没反应 什么是第二代码执行：当我需要交互时(点击时) 点击后3秒有弹窗 所有 你理解了吗？为什么当在第二执行setTimeout时会输出6而不是0 1 2 3 4 5 呢？ 2. 当let配合for一起时,结果令人感到正常？ for(let i=0;i<6;i++){ setTimeout(()=>{console.log(i)},0) } /* 输出： 0 1 2 3 4 5 */ 为什么let写在for里面结果就不一样呢？主要有个细节,当在第一代码执行setTimeout()时把它放到第二代码执行时i的当前值被保存在setTimeout()函数里了。 3. 使用递归配合setTimeout()输出0-5 function fn(i){ return i<6?setTimeout(()=>{console.log(i);fn(++i),0)}:i } fn(0) /* 输出： 0 1 2 3 4 5 */ 如果你不明白递归先自行了解。如果你知道递归,你就明白每次递时i的值都是不同的。……

前言：本文章仅仅适合刚入门的 JS 人员.本文章仅仅自身学习需要,把目前所学已知的用文章记录下来，做一次归纳整理,达到自己理解和加强记忆的目的，如有不对,请联系: 460046653@qq.com 数组(Array) 在 JavaScript 里 Array 对象是构造数组的全局对象.在 JS 里数组也是对象 1. 创建一个数组 1.1 新建 let arr = new Array('apple','xiaomi') //规范写法 let arr1 = ['apple','xiaomi'] //简写 规范写法：需要用到 new 操作符 调用 Array 对象函数来构造一个数组.接收的参数用逗号隔开。 简写：只需要用中括号即可,用逗号隔开每一项 注：当用规范写法时,且参数为数字并参数为一位时,例外 let arr = new Array(3) //这是声明数组的长度为3,内容为empty(空) console.log(arr.length) //3 (length是构造时创造给arr自身的属性) 1.2 转化成数组 1.2.1 split():方法使用指定的分隔符将字符串(string)对象分割成字符串数组。 let arr ='1,2,3'.split(',') console.log(arr) //["1","2","3"] let arr1='123'.split('') console.log(arr1) //["1","2","3"] 1.2.2 Array.from():方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例 console.log(Array.from('123')) //类似数组创建一个新的数组。 1.3 合并多个数组.concat()方法 怎么把多个数组合在一起?……

前言 本文章仅仅自身学习需要,把目前所学已知的用文章记录下来，做一次归纳整理,达到理解和加强记忆的目的，如有不对,请联系: 460046653@qq.com 1. 如果声明一个对象(Object)数据类型？ 什么是对象呢？对象是属性(由属性名和属性值组成一个属性,:隔开)的集合,用大括号括起来.称之为对象(没有属性名和属性值是空对象(null)) //以下是规范写法 let obj = new Object({'属性名':'属性值','属性名':'属性值'}) //逗号隔开 //以下是简写写法 let obj2 = {'属性名':'属性值','属性名':'属性值'} 属性名：遵守标识符的规则,可不加引号。其他例外 //如果属性名是数值也不可加引号,但自动转换为字符串 let obj = { 1: 'a', 3.2: 'b', 1e2: true, 1e-2: true, .234: true, 0xFF: true } //它们最终都会变成字符串！！ // obj { // 1: "a", // 3.2: "b", // 100: true, // 0.01: true, // 0.234: true, // 255: true // } //不符合标识符 报错 let obj = { 1+2:3, 1a:'1a' } //如果不符合标识符,请加上引号 let obj = { '1+2':3, '1a':'1a' } 变量可不可以当成属性名呢？ 答：可以的我们来看代码……

预知： 在本文章中,作者只是把已知的数据类型做一些归类整理,仅供复习参考。 前言 在程序的世界里,数据是很重要的.程序的目的就是为了处理数据.我们会一眼区别出数字不是字母.但是程序是怎么知道的呢？是程序员标明的。计算机才知道这个是数字的,那个是字母对不对?接下来我们看看在JavaScript里有哪些数据类型 1. 数字(number) 在现实里我们用数字来计算的数在JS里都算数字类型。但是我们常用十进制来计算。在程序还有二进制、八进制、十进制、十六进制。还有正0、负0。它们都是0.还有一些无穷大、正无穷大、负无穷大。以及不是数的数(Not a Number(简称NaN))，在JS里比如0/0它的结果一定不是数但是属于数字类型,接下来我们用代码看看吧 写法 let integer=10 //整数 表示 10 let decimals=10.1 //小数 表示 10.1(如果是10.0会自动忽略0) let binary=0b1010 //二进制 表示 10 let octonary=0o12 //八进制 表示 10 let hex=0xa //十六进 表示 10 特殊值 let positiveNumber = +0 //正0等于0 let negativeNumber = -0 //负0等于0 (有符号意义不同) let positiveInfinity = 1/0 //等于正无穷大 let negativeInfinity = 1/-0 //等于负无穷大 let NotaNumber = 0/0 //等于NaN(不是数的数(Not a Number))) 2. 字符串(string) 电脑是怎么理解我现在写的这句话是字符串而不是数字的？来看下面代码吧……

1. 什么是表达式和语句？ 在 JavaScript 的里面,如果后面带有’;‘代表这是一条语句。表达式更容易区辨别,一般带有返回值的都可以称为表达式。 var a = 1; //这是一个语句 a + a;//这是一个表达式语句 2. 标识符的规则 在 JavaScript 里面标识符由’字母’和’符号’和’中文’组成.唯一特殊的是标识符开头不能是数字。 var a123; //字母开头 var 中国; //中文开头 var _1; //符号开头 var 123; //数字开头是错的！！！！！！ 3. if else 语句 例子：在 JavaScript 里,if else 用作判断条件为真假执行不同语句的。 if(如果今天下雨){ 我就去淋雨 }else{ 我就去下雨 } 本意：if else if(表达式){ 语句 //为真执行 }else{ 语句 //为假执行 } if else 只是最简单的用法,某些事情的不单是一个影响因素. 4. while for 语句 例子:在现实的世界当中,汽车行驶中轮胎不停的转动.因何而动,因何而停？ 在 JavaScript 世界里,while 和 for 控制轮胎.……

1.浏览器渲染原理 浏览器在得到服务器的响应之后,会先根据HTML去渲染成一个结构图HTML树(DOM)所有的标签具有父子关系。 HTML标签是最大的,其次是head和body两个大儿子,依次渲染。 CSS会构建成CSS树(CSSOM)。CSS也是根据标签所具备的属性。在这里body是最大的。如果body所带的属性 如果标签是共有的属性,儿子会继承父子所带的属性 这时会将HTML CSS 合并在一起成为渲染树(render tree) Layout布局然后是计算标签的大小以及位置渲染布局。(文档流、盒模型、计算大小和位置) paint绘制接下来是绘制标签的背景颜色、边框、字体颜色、阴影的(所有美化属性在渲染) compose最后一步是层叠的合成,(例如拍照：就是把背景和人合成跟这个概念是一样的) CSS 动画的两种做法（transition 和 animatioin） 1. transition 过渡 作用:补充中间帧 语法： transition:属性名 时长 过渡方式 延迟 transition：left 200ms linear 可以用逗号分隔两个不同属性 transition:left 200ms,top 400ms 可以用 all 代表所有属性 transition:all 200ms 时长单位只有 s 和 ms 过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps 2. animation 动画 缩写语法： animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名； 时长：1s 或者 1000ms 过渡方式：跟 transition 取值一样，如 linear 次数：3 或者 2.4 或者 infinite 方向：reverse|alternate|alternate-reverse 填充模式：none|forwards|backwards|both 是否暂停：paused|running 以上所有属性都有对应的单独属性。 ……