JavaScript -- 笔记

方法集

1、第一章

1.1、JavaScript核心语法

变量   数据类型	 数组	 运算符号	 控制语句	 注释 	输入/输出 	语法约定

1.2、核心语法—变量

• 先声明再使用
• 边声明边使用

1.3、核心语法-数据类型

• undefined:
  • var width;
  • 变量width没有初始值，将被赋予值undefined
• null:
  • 表示一个空值，与undefined值相等
• number:
  • var iNum=23; //整数
  • var iNum=23.0; //浮点数
• boolean:
  • true 和 false
• String:
  • 一组被引号（单或双引号）括起来的文本
  • var string=“This is JavaScript”;

1.4、数组

• 创建数组：
  • var 数组名称 = new Array(length)

方法	说明
.length	检测长度
.join() 输入字符	对数组元素进行分割
.push()	在数组后面添加元素并返回新长度，直接修改原数组
.sort()	对数组进行排序
.reverse()	翻转数组顺序
.concat(参数)	返回值是数组，拷贝新数组然后添加参数，不影响原数组

1.5、String对象

方法	说明
.charAt	根据下标获取字符
.indexOf()	查找某个指定的字符在字符串中首次出现的位置 如果没有找到返回-1
.substring()	查找某个下标到某个下标之间的字符串 -> 包前不包后;
.typeof():	检测变量的类型

1.6、核心语法—运算符号

类型	运算符
算术运算符	+ - * / % ++ —
赋值运算符	= += -=
比较运算符	> < >= <= == != =(*3) !==
逻辑运算符	&& || !

三等和两等的区别：三个等号为完全相等，一对一比较每一位值 两个等号可以把数字型的12和字符型的比较相等

1.7、核心语法—逻辑控制语句

if条件语句
switch多分支语句
for、while循环语句
for-in
	示例：
		var fruit=[ "apple", "orange", "peach","banana"]; 
        for(var i in fruit){
               document.write(fruit[i]+"<br/>");
        }

1.8、核心语法—常用的输入/输出

alert(“警告信息"); prompt(“提示信息”, “输入框的默认信息”);

1.9、函数

• 函数分为有参函数和无参函数和立即执行函数

//有参函数：
function 函数名(参数1,参数2,参数3,…){
                 [return 返回值] //可有可无
		}
//无参函数
function 函数名( ){
        document.write("")
    }
//动态存储参数
function 函数名(){
    console.log(argunments) //遍历实参
    console.log(argunments.length) //查看argunments的长度，及实参的个数
    console.log(argunments[0]) //通过下标找对应的实参
}
函数名(参数1,参数2,参数3)
//立即执行函数
(function(){
 	document.write("")
 })();

//使用技巧 先搭建两个英文括号，然后在第一个括号内写有参无参函数

arguments:

方法	说明
.length	查看arguments的长度
	按照索引的方式进行储存
	没有真正数组的一些方法 pop()等

1.9.1、常用函数方法：

方法	说明
parseInt (“字符串”)	转为整数类型
parseFloat(“字符串”)	转为浮点类型
isNaN()	用来检测变量数据类型

1.9.2、事件方法

方法	说明
onclick	鼠标点击左键触发
onload	完成加载时执行
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmouseover	鼠标经过触发-会冒泡
mouseenter	鼠标经过触发-不会冒泡/捕获
onmouseout	鼠标离开触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
onkeydown	表示键盘按下时执行
onchange	内容改变时执行

2、第二章

方法	说明
.alert(“提示信息”)	弹出框
.confirm(“提示信息”)	弹出确认框 点击确定或取消 返回true false
.close( )	放进函数 用点击事件触发后关闭浏览器
.open( )	打开新的浏览器
	括号内三个参数 第一个为地址 第二个为名称 第三个为属性 例如：
	open(“https://www.baidu.com”,“baidu”,“width=100px,height=100px”)

2.1、history

方法	说明
history.back()	后退 点击后返回上一个页面
history.forward()	前进 点击后返回刚才覆盖的页面
history.go()	批量 括号内为负 则点击后退几步 反之则前进几步

2.2、location

方法	说明
location.host	显示当前的主机号和端口号
location.hostname	当前URL的主机名
location.href	设置或返回一个完整的URL
location.reload()	如果加到按钮上则点击后刷新页面
location.replace(“www.baidu.com”)	如果加到按钮上则点击后将替换网页
protocol	通信协议，常用的http,ftp等
port	端口号
path	路径
query	参数，以键值对的形式出现

获取URL参数

2.3、document

方法	说明
.referrer
document.write(document.referrer)	表示从哪个网页跳转进来的 输出该网址
.document.URL
document.write(document.URL)	完整的输出当前网页的网址

2.4、get获取方法集合

方法	说明
innerHTML = “内容”	获取后改变标签内容
getElementsById	document.getElementsById(“id名”) 根据id值获取
getElementsByName	document.getElementsByName(“name名”)[下标] 根据name值获取
getElementsByTagName	document.getElementsByTagName(“标签”)[下标] 根据标签获取
document.getElementsByClassName	document.getElementsByClassName(‘类名’) 根据类名获取
document.querySelector	document.querySelector(‘选择器’) 根据选择器获取如: #div li 0 返回第一个元素的对象
document.querySelectorAll	document.querySelectorAll(‘选择器’) 与上面一样，但返回所有元素对象的集合

2.5、延时函数

方法	说明
setTimeout()	setTimeout(“document.getElementsById(‘id’).innerHTML = ‘我是大傻逼’” , 1000 )
	1000为时间 毫秒 表示在1000毫秒之后 将改变获取id标签的内容
	多少秒后执行一次
setInterval()	按照指定的周期（以毫秒计）来调用函数表达式
	没多少秒执行一次

2.6、Math方法

方法	说明
Math.ceil()	向上整取
	如果括号内放的是小数 则会判断两个数之间最大的数 如11.1 取12
.floor()	向下整取
	如果括号内放的是小数 则会判断两个数之间最大的数 如11.1 取11
.round()	四舍五入
Math.random()	获取随机数 与java大致相同
	如果要求某数到某数之间的随机数 公式如下
	Math.random()*(max-min+1)+min

2.7、Date

方法	说明
创建Date对象	var date = new Date();
	如果没有参数返回当前系统的当前时间
	var date = new Date(‘2019-10-1 8:8:8’);
	如果有参数则返回的是输入的时间
.getFullYear() y	年
.getMonth()+1 m	月(0-11)
.getDate() d	日
.getDay() w	礼拜的第几天
.getHours() h	小时
.getMinutes() mm	分钟
.getSeconds() s	秒
格式：	y+"/"+m+"/"+d+"/"+w+"/"+h+":"+mm+":"+s
清楚函数：
clearInterval（）	清除由setInterval() 设置的定时
clearTimeout（）	清除由setTimeout() 设置的定时

获得Date总的毫秒数﹐不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数

通过valueof( ) getTime( )

实例：

       <buttom onclick="t()">停止</button>

    var myVar = setInterval(function(){
        time()
    }, 1000);
    function t() {
        //点击停止
        clearInterval(myVar);
    }
    function time(){
        //date 时间对象
        //获取到当前时间
        var date = new Date();
        var y = date.getFullYear(); //年
        var m = date.getMonth()+1; //月(0-11)
        var d = date.getDate(); //日
        var w = date.getDay(); //礼拜的第几天
        var h = date.getHours();//小时
        var mm = date.getMinutes()//分钟
        var s = date.getSeconds() //秒
        var str = y+"/"+m+"/"+d+"/"+w+"/"+h+":"+mm+":"+s
        document.getElementsByTagName("span")[0].innerHTML = str;
    }
	//1.valueof( )   getTime( )
	var date = new Date();
	console.log(date.valueof());// 就是现在时间距离1970.1.1总的毫秒数
	console.log(date.getTime());
    //2.简单的写法 (最常用的写法)
	var date1 = +new Date(); //+new Date() 返回的就是总的毫秒数
	console.log(date1);
	//3.H5新增的获得总的毫秒数
    console.log(Date.now());

2.7、程序执行时间

var d1 = +new Date();
var d2 = +new Date();
console.log(d2-d1)

3、第三章

3.1、对象/构造函数

//构造函数
function Star(name,age,sex){
  this.name=name
  this.age=age
  this.sex=sex
  this.sing=function (){
      console.log("唱歌")
  }
}
//属性对象
var obj = {
    name:'kzc',
    age:18,
    sex:'男'
}
//对象调用属性对象
console.log(obj.name)
//对象调用构造函数
var fun = new Star('kzc',18,'男') 
console.log(fun.name) //调用属性
console.log(fun['sex'])	//写法2
fun.sing() //调用方法/函数

//for in遍历对象
  for (var k in obj) {
    console.log(k) //得到的是 属性名
    console.log(obj[k]) //得到的是 属性值
  }

构造函数
构造函数名字首字母要大写
构造函数不需要return就可以返回结果
调用构造函数必须使用new

构造函数: 泛指 的某一大类它类似于java 语言里面的类(class)
对   象: 特指 是一个具体的事物刘德华 =={name:“刘德华", age: 18，sex: "男", sing: f}

3.2、操作元素

element.style

点击切换图片

分时问候

操作表单元素

点击显示密码

样式属性操作

点击叉号，隐藏广告元素

显示隐藏元素

element.className

点击事件添加类名 修改属性

密码验证框

两者区别

使用element.style 获得修改元素样式
适合 样式较少 或者 功能简单的情况下使用
使用element.className 更改元素类名
适合于 样式较多 或者 功能较为复杂的情况下使用
空格隔开 可添加多个类名和保留原先类名 this.className = ‘类名1 类名2…’

总结

3.3、排他思想

多个按钮绑定一个

百度换肤效果

经过表格某行变背景颜色

全选，取消全选

3.4、自定义属性/tab栏切换

自定义属性

规范 用处

保存我的数据，使用这个数据

data-属性名="属性值"

方法集

方法	说明
var div = document.getElementById(‘data-index’)	获取自定义属性所在的标签
div.getAttribute(‘自定义属性’)	获取自定义属性值
div.setAttribute(‘自定义属性’，‘值’)	设置修改自定义属性值
div.setAttribute(‘class’，‘新的类名’)	修改class的类名
div.removeAttribute(‘属性’)	移除调用者的括号内的属性
div.dataset	调出所有以data开头的自定义属性 返回值为集合
div.dataset.属性	调用div下的data开头的自定义属性
div.dataset.listName	调用div下的data开头的自定义属性名

获取自定义属性值

设置自定义属性

移除自定义属性

tab栏切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .tab{
      width: 620px;
      height: 100px;
      border: 4px solid black;
      margin: 5% auto;

    }
    .tab_list li{
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
      background-color: #EEF1EE;
      border-bottom: 1px solid #c81623;
    }

    .tab_list .current{
      background-color: #c81623;
      color: #fff;
    }
    .item_info{
      padding: 20px 0  0 20px ;
    }
    .item{
      display: none;
    }
    .item:first-child{
      display: block;
    }
  </style>
</head>
<body>
<div class="tab">
  <div class="tab_list">
    <ul>
      <li class="current">商品介绍</li>
      <li>规格与包装</li>
      <li>售后保障</li>
      <li>商品评价（50000）</li>
      <li>手机社区</li>
    </ul>
  </div>
  <div class="tab_con">
    <div  class="item">
      商业介绍内容
    </div>
    <div  class="item">
      规格与包装内容
    </div>
    <div  class="item">
      售后保障内容
    </div>
    <div  class="item">
      商品评价（50000）内容
    </div>
    <div  class="item">
      手机社区内容
    </div>
  </div>
</div>
</body>
<script>
  //两个模块 1.点击后选项卡背景色为红色  2.点击后内容切换至相关内容
  //第一模块
  var tab_list = document.getElementsByClassName('tab_list')[0]
  var lis = tab_list.getElementsByTagName('li')
  var item = document.getElementsByClassName('item')
  for (var i = 0; i < lis.length; i++) {
    //给所有小li设置自定义属性
    lis[i].setAttribute('index',i)
    lis[i].onclick = function (){
      //干掉所有人
      for (var j = 0; j < lis.length; j++) {
        lis[j].className=''
      }
      //留下我自己
      this.className='current'
      //得到点击的li元素下标
      var index = this.getAttribute('index')
      //干掉其他的
      for (var j = 0; j < lis.length; j++) {
        item[j].style.display='none'
      }
      //留下我自己 修改内容的显示层数
      item[index].style.display='block'
    }
  }
</script>
</html>

4、第四章

方法集

方法名 (元素.)	说明
操作子父兄级元素：
parentNode	获取离元素最近的父节点 找不到返回null
childNodes	获取离元素最近的所有子节点 ☆
children	获取离元素最近的所有子元素节点 ♥
firstChild	获取第一个子节点 找不到返回null ☆
lastChild	获取最后一个子节点 找不到返回null ☆
firstElementChild	返回第一个子元素节点 △
lastElementChild	返回最后一个子元素节点 △
nextSibling	下一个兄弟节点 ☆
previousSibling	上一个兄弟节点 ☆
nextElementSibling	下一个兄弟元素节点 △
previousElementSibling	上一个兄弟元素节点 △
高级方法：
var li = document.createElement(‘li’)	创建节点元素节点
node.appendChild(‘child’)	后面插入/添加节点 node 父集 child 子集
	可累计在后面添加 类似于数组的push添加方式
node.insertBefore(child,指定元素)	指定位置前面插入/添加节点 node 父集 child 子集
	ul.insertBefore(lili,ul.children[0])
node.cloneNode(boolean)	复制节点，
	括号为空或false 浅拷贝 只复制节点 不复制内容 括号为true 复制节点 同时复制内容
node.removeChild(child)	删除节点

☆：包含元素节点 文本节点等等 需要筛选，不利于编程

△：有兼容性问题 ie9以上支持

♥：万能的 喜欢的

节点操作

节点概括

节点类型	nodeType对应值
元素节点	1
属性节点	2
文本节点	3	文本节点包含文本空格、换行

节点层级

节点 操作 父节点

节点 操作 子节点

结果为

正常情况下我们只需要元素节点，所以想要只获取里面所有的元素节点则需要进行一下操作

总结

节点操作第一个元素和最后一个元素

节点 操作 第1个和最后一个节点

节点 操作 同级节点

增、删、复制节点

创建-添加节点

删除节点

复制节点

简单留言板

<textarea name="text" cols="30" rows="10">
</textarea>
<button name="text">提交</button>
<ul></ul>
<script>
    //获取文本框和按钮
    var text = document.querySelector('textarea')
    var button = document.querySelector('button')
    //获取留言板
    var ul = document.querySelector('ul')
    //按钮点击事件
    button.onclick = function () {
        if (text.value === '') {
            alert('不可空输入哦！')
            return false
        } else {
            //创建新节点
            var li = document.createElement('li')
            //将新节点附上值 然后新节点添加进去
            li.innerHTML = text.value + "<a href='#'>删除</a>"
            ul.insertBefore(li, ul.children[0])
            text.value = ''
            //获取删除链接‘’
            var as = document.querySelectorAll('a')
            //删除操作
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                    ul.removeChild(this.parentNode)
                }
            }
        }
    }
</script>

5、第五章

方法集

方法	说明
监听方式：
eventTarget.``addEventListener`(‘type’,listener[, useCapture])	事件监听方式，兼容性问题 ie9+
type ：	事件类型字符串，如click、mouseover,注意不要带on
listener ：	事件处理函数，事件发生时会调用刻监听函数
useCaptrue ：	可选参数，布尔值，默认false
eventTarget.``removeEventListener`(type,listener[, useCapture])	解绑监听事件
常用方法
click	鼠标单击事件
事件对象
eventTarget.onclick = function(event){}	event就是事件对象，属于自定义命名，不用传递参数
eventTarget.addEventListener(‘click’,function(event){})	event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解∶	事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
事件对象
this	绑定事件的元素 谁绑定就返回谁
e.target	返回触发事件的对象，指向点击事件的那个对象 普通浏览器
e.srcElement	返回触发事件的对象 ie专用
e.type	返回事件的类型 如 click 不带on
e.cancelBubble	该属性 阻止冒泡 ie专用
e.returnValue	该属性 阻止默认事件（默认行为）比如不让链接跳转 ie专用
e.preventDefault()	该方法 阻止默认事件（默认行为） 比如不让链接跳转 普通浏览器
e.stopPropagation()	阻止冒泡 标准 普通浏览器

5.1、注册事件的两种方式.

addEventListener

removeEventListener

事件对象

返回触发事件的对象

事件对象阻止默认行为

事件委托

原理：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

常用鼠标事件

方法集

方法	说明
contextmenu	主要控制合适显示上下文菜单，如右键的显示菜单，配合``preventDefault`可禁用右键功能
selectstart	开始选中，配合``preventDefault`可禁选中
鼠标事件对象	MouseEvent
e.clientX	返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的 Y 坐标
	不管页面多大，永远以可视窗口为主
e.pageX	返回鼠标相对于文档页面的 X 坐标 IE9+
e.pageY	返回鼠标相对于文档页面的 Y 坐标 IE9+
e.screenX	返回鼠标相对于电脑屏幕的 X 坐标
e.screenY	返回鼠标相对于电脑屏幕的 Y 坐标
鼠标事件
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发
onkeydown	表示键盘按下时执行
onchange	内容改变时执行

禁用右键菜单和选中状态

获取鼠标在页面中的坐标

clientX Y

pageX Y

screenX Y

鼠标移动挂件

常用键盘事件

方法集

常用方法	说明
'on’keyup	某个键盘按键被松开时触发
'on’keydown	某个键盘按键被按下时触发
'on’keypress	某个键盘按键被按下时触发
	keypress不识别ctrl类的功能键
	keydown和keypress在文本框里的特点：
	这两个事件触发的时候，文字还没有落入文本框，也就是按下立即触发
键盘事件对象	KeyboarEvent
e.KeyCode	返回该键的ASCLL值
	使用keyup 和 keydown 不区分大小写的ascll keypress区分大小写
e.key	返回按下的键 最好不要用，兼容性问题太大

常用三个键盘事件

键盘事件对象

按空格定位搜索框

6、第六章

方法集

方法	说明
offset
element.offsetParent	返回作为该元素带有定位的父级元素，如果父集都没有定位返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回值不带单位
element.offsetHidth	返回自身包括padding、边框、内容区的高度，返回值不带单位
client
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
scroll	元素被减去
element.scrollTop	返回被卷去的上测距离，返回数值不带单位
element.scrollLeft	返回被卷去的左测距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度、包含padding 、不包含边框、返回值不带单位
element.scrollHeight	返回自身实际的高度、包含padding 、不包含边框、返回值不带单位
window	页面被减去
window.pageYOffset	页面被卷去的头部
window.pageXOffset	页面被卷去的左侧
事件对象
scroll	当我们滚动条发生变化会触发的事件
三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的高度，返回值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框。返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位

PC端网页特效大全

offset

offset与style的区别

点击返回鼠标在盒子中的坐标

京东图片放大镜

client 边框

scroll 滚动

三大区别

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取滚动距离 scrollTop scrollLedt
4. 注意页面滚动的距离通过window.pageXOffset获取

方法集

动画函数

动画

动画原理

核心原理：通过定时器setInterval（）不断移动盒子位置

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加—个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

简单动画函数封装

<script>
    //简单动画的封装，obj目标对象，target 目标位置
    function animate(obj, target) {
        var time = setInterval(function () {
            if (obj.offsetLeft >= target) {
                //停止动画 本质是停止定时器
                clearInterval(time)
            }
            obj.style.left = div.offsetLeft + 5 + 'px'
        }, 30)
    }
    var div = document.querySelector('div')
    animate(div,300)
</script>

给不同的元素记录不同的定时器

<script>
    //简单动画的封装，obj目标对象，target 目标位置
    function animate(obj, target) {
         //每次执行清除定时器，防止出现叠加
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
            if (obj.offsetLeft >= target) {
                //停止动画 本质是停止定时器
                clearInterval(obj.timer)
            }
            obj.style.left = obj.offsetLeft + 1 + 'px'
        }, 30)
    }
    var div = document.querySelector('div')
    var button = document.querySelector('button')
    var span = document.querySelector('span')
    animate(div, 300)
    button.addEventListener('click',function (){
        animate(span,300)
    })
</script>

缓动动画

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法：(目标值-现在的位置) / 10做为每次移动的距离步长
3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器
4. 注意步长值需要取整

动画类型	使用公式
匀速动画	就是盒子是当前的位置+固定的值10
缓动动画	就是盒子当前的位置+变化的值(目标值–现在的位置)/10)

<script>
    //简单动画的封装，obj目标对象，target 目标位置
    function animate(obj, target) {
        //每次执行清除定时器，防止出现叠加
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
            //步长值写到定时器里面
            var step = Math.ceil((target - obj.offsetLeft) / 10)
            if (obj.offsetLeft >= target) {
                //停止动画 本质是停止定时器
                clearInterval(obj.timer)
            }
            //把每次加1这个步长值改为一个慢慢变小的值步长公式:(目标值–现在的位置)/ 10
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 15)
    }
    var div = document.querySelector('div')
    var button = document.querySelector('button')
    var span = document.querySelector('span')
    animate(div, 300)
    button.addEventListener('click', function () {
        animate(span, 300)
    })
</script>

缓动动画多个目标值之间的移动

<script>
    //简单动画的封装，obj目标对象，target 目标位置
    function animate(obj, target) {
        //每次执行清除定时器，防止出现叠加
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
            //步长值写到定时器里面
            var step = (target - obj.offsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if (obj.offsetLeft == target) {
                //停止动画 本质是停止定时器
                clearInterval(obj.timer)
            }
            //把每次加1这个步长值改为一个慢慢变小的值步长公式:(目标值–现在的位置)/ 10
            obj.style.left = obj.offsetLeft + step + 'px'
        }, 15)
    }

    var div = document.querySelector('div')
    var span = document.querySelector('span')
    animate(div, 300)
    var q = document.querySelector('#one')
    var w = document.querySelector('#two')
    var e = document.querySelector('#three')
    q.addEventListener('click', function () {
        animate(span, 300)
    })
    w.addEventListener('click', function () {
        animate(span, 500)
    })
    e.addEventListener('click', function () {
        animate(span, 800)
    })
</script>