前言

本文章介绍该太极图制作过程中所调用的 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.replace(/\n/g,'<br>')   //换行所有替换成<br>

String.prototype.charCodeAt()方法返回字符的编码

let string = "
"

string[0].charCodeAt(); //10

CSS 属性

border: 1px solid red; /*添加边框*/

/*对应：border-width,border-style,border-color*/

border-radius: 50%; /*该属性会让元素变成圆*/

box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); /*添加阴影*/

background: ; /*背景颜色*/

position: fixed; /*固定在某个位置*/

transform:translateX() /*transform属性允许旋转,缩放,倾斜,平移给定元素;translateX()会在二维平面上水平方向移动元素*/

::before {
} /*创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素*/

::after {
} /*用来创建一个伪元素,作为已选中元素的最后一个元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素是行内元素*/

background：linear-gradient(); /*线性渐变*/

background: radial-gradient(); /*半径渐变*/

@media(){

}/*媒体查询：主要是针对不同分辨率显示不同的CSS规则.*/

box-sizing:border-box;    /*盒模型的计算考虑将把margin排除*/

word-break:break-all; /*用于字符的断行*/

overflow:auto;  /*元素的内容太大无法适应元素时块级格式上下文时候该做什么。auto属性是太大自动出现横竖导航条*/

position:relative; /*使当前元素的位置相对于父元素*/