JavaScript DOM操作完全入门
01_body和html特殊元素获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>你好</h1>
</body>
<script type="text/javascript">
// html: 需要使用document.documentElement 来获取
html = document.documentElement
console.log(html)
// body: 需要使用document.body 获取
body = document.body
console.log(body)
</script>
</html>
02_id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box_1">
hello
<div>
你好
</div>
</div>
<!-- document 返回的是当前网页文档,使用getElementById 来得到文档内的DOM对象 -->
<script type="text/javascript">
box_obj = document.getElementById('box_1')
console.log(box_obj); // 返回的是id 为 box_1的DOM节点对象
console.log(typeof box_obj)
console.dir(box_obj) // 打印该对象的所有属性和方法
</script>
</body>
</html>
03_标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!-- getElementsByTagName返回的是元素对象的集合,是以伪数组的形式存储 -->
<script type="text/javascript">
lis = document.getElementsByTagName('li') // 获得所有的li标签
console.log(typeof lis)
console.log(lis)
for (var i = 0; i < lis.length; i++) {
console.log(lis[i])
}
console.log('--------------')
// 得到所有ul元素
ul = document.getElementsByTagName('ul')
// 得到第一个ul
ul = ul[0]
// 打印该ul元素
console.log(ul)
</script>
</body>
</html>
04_类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box_1">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="box_1">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<script type="text/javascript">
box_1 = document.getElementsByClassName('box_1')
console.log(box_1)
console.log(typeof box_1)
</script>
</body>
</html>
05_queryselector选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<div class="box">
hello
</div>
<div id="app">
你好
</div>
<!-- querySelector只会选择第一个元素,并返回这个元素对象 -->
<!-- querySelector可以选择页面中的任何DOM元素 -->
<script type="text/javascript">
qs_1 = document.querySelector('li');
console.log(typeof qs_1);
console.log(qs_1);
qs_2 = document.querySelector('.box');
console.log(qs_2);
qs_3 = document.querySelector('#app');
console.log(qs_3)
// querySelectorAll会返回所有的选择器对相同
qs_all = document.querySelectorAll('div')
console.log(qs_all)
</script>
</body>
</html>
06_事件基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="btn">点一点</button>
</body>
<div style="width: 200px;height: 100px;background: pink;text-align: center;line-height: 100px;margin-top: 50px;">
点一下哦
</div>
<script type="text/javascript">
// 事件由3部分组成(事件三要素): 事件源, 事件类型, 事件处理程序
// 1. 事件源: 事件被触发的对象
// 2. 事件类型: 具体触发的某种行为,比如点击按钮就是 onclick 事件
// 3. 事件处理程序: 通过一个函数赋值的方式完成
// 执行事件的步骤
// 1.获得事件源
// 2. 注册事件(绑定事件)
// 3. 添加事件处理程序
var btn = document.querySelector('#btn')
var div = document.querySelector('div')
console.log(btn)
console.log(div)
// 给该DOM对象添加一个事件
btn.onclick = function (e){
alert(123)
}
div.onclick = function (){
alert('标签弹出来了哦')
}
</script>
</html>
07_DOM操作元素-innertext/innerhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<button type="button" id="btn">点一下,玩一年</button>
<br>
<div id="box">
时间区域
</div>
<p id="p_box">
p标签哦
</p>
</head>
<body>
<script type="text/javascript">
// innerText: DOM对象内的文本内容, 不识别html中的标签(非标准),且去除空格和换行,可读写
// innerHTML: 会自动识别标签(W3C的标准),且会保留文字内的空格,可读写
// 1. 获取元素
var btn = document.querySelector('#btn')
var box = document.querySelector('#box')
btn.onclick = function() {
box.innerText = new Date()
}
// 这样再页面刷新的时候就自动刷新了
var p_1 = document.querySelector('#p_box')
console.log(p_1.innerHTML)
console.log(p_1.innerText)
p_1.innerHTML = '你好 <h1>世界</h1>'
</script>
</body>
</html>
08_DOM操作元素-属性控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
display: block;
width: 200px;
}
</style>
</head>
<body>
<button type="button" id="ldh">ldh</button>
<button type="button" id="zxy">zxy</button>
<img src="jsapis_material/第一天/images/ldh.jpg" >
<script type="text/javascript">
var ldh = document.querySelector('#ldh')
var zxy = document.querySelector('#zxy')
var img = document.querySelector('img')
ldh.onclick = function(){
img.src = "jsapis_material/第一天/images/ldh.jpg"
img.title = '刘德华'
}
zxy.onclick = function(){
img.src = "jsapis_material/第一天/images/zxy.jpg"
img.title = '张学友'
}
</script>
</body>
</html>
09_DOM操作元素-属性案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
width: 400px;
}
</style>
</head>
<body>
<img src="" >
<script type="text/javascript">
var img_01 = document.querySelector('img')
// 根据时间的不同替换不同的图片
var date = new Date()
var h = date.getHours()
if (h < 12) {
img_01.src = 'jsapis_material/第一天/images/s.gif';
}else if (h <18){
img_01.src = 'jsapis_material/第一天/images/x.gif';
}else{
img_01.src = 'jsapis_material/第一天/images/w.gif';
}
</script>
</body>
</html>
10_DOM操作元素-表单属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="btn">点一点</button>
<input type="text" id="ipt_text" value="" />
<button type="button" id="btn_">点一下</button>
</body>
<script type="text/javascript">
// 利用DOM元素可以操作的表单属性: type value checked selected disabled
var btn = document.querySelector('#btn')
var btn_ = document.querySelector('#btn_')
var ipt_text = document.querySelector('#ipt_text')
btn.onclick = function(){
ipt_text.value = '点我干啥,禁用你丫的'
this.disabled = true // this 指向了调用者,谁调用指向谁,这里指向了 btn
}
var flag = true
btn_.onclick = function(){
console.dir(ipt_text)
if (flag) {
ipt_text.value = '******'
flag = !flag
} else{
ipt_text.value = 123456
flag = !flag
}
}
</script>
</html>
11_DOM操作元素-表单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: relative;
width: 200px;
border-bottom: #ccc solid 1px;
margin: 100px auto;
}
.box input {
width: 370px;
height: 20px;
border: 0;
outline: none;
}
img {
position: absolute;
top: 2px;
right: 10px;
width: 18px
}
</style>
</head>
<body>
<div class="box">
<img src="jsapis_material/第一天/images/close.png" >
<input type="password" name="" />
</div>
<script type="text/javascript">
var img = document.querySelector('img')
var input = document.querySelector('input')
var flag = true
img.onclick = function () {
input.type = flag?'text':'password', // 改变input的type类型
img.src = flag?'jsapis_material/第一天/images/open.png':'jsapis_material/第一天/images/close.png',
flag = !flag
}
</script>
</body>
</html>
12_DOM操作元素-样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: pink;
}
.my_style1 {
width: 200px;
height: 200px;
background: peachpuff;
}
.my_style2 {
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
1. 操作的样式不多时可以通过控制style, 如果需要修改的样式很多 需要操作className 来让改DOM元素改变 样式类,<br>
2. 操作DOM改变的style 会变成行内式,样式权重会很高<br>
3. 注意,classname会覆盖原有的类名<br>
4. 注意style获取的是可读写属性,这里是与offset不同的(offset最好只读),而且style里只能获取到行内样式的属性<br>
</div>
<button type="button">点一下变灰色</button>
<script type="text/javascript">
var btn = document.querySelector('button')
var box = document.querySelector('.box')
console.log(box.style.width) // 注意style里只包含行内样式的属性
btn.onclick = function(event) {
box.style.background = '#ccc'
box.className = 'my_style1 my_style2'
console.dir(box)
}
</script>
</body>
</html>
13_DOM操作元素-循环创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
width: 250px;
margin: 100px auto;
list-style: none;
}
ul li {
float: left;
width: 24px;
height: 24px;
background: pink;
margin: 15px;
background: url('jsapis_material/第一天/images/sprite.png') no-repeat;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
var y = i * -44
lis[i].style.backgroundPosition = '0 ' + y + 'px'
}
</script>
</body>
</html>
14_DOM操作元素-禁用选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="sel">
<option value ="haha">123</option>
</select>
<input type="" name="" id="" value="" />
<button type="button">点击禁用</button>
</body>
<script type="text/javascript">
let sel = document.querySelector('#sel')
let btn = document.querySelector('button')
btn.addEventListener('click',()=>{
sel.disabled = !sel.disabled
})
</script>
</html>
15_DOM操作元素-显示隐藏文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input {
color: #ccc;
color: #ccc;
}
.msg {
display: inline-block;
font-size: 12px;
color: #999;
background: url(jsapis_material/第一天/images/mess.png) no-repeat left center;
padding-left: 20px;
margin: 0;
}
</style>
</head>
<body>
<input type="text" value="手机" />
<p class="msg">请输入手机号</p>
</body>
<!--
onfocus 在该DOM元素获得焦点的时候触发
onblur 在该DOM元素失去焦点的时候触发
-->
<script type="text/javascript">
var ipt = document.querySelector('input')
var p = document.querySelector('.msg')
ipt.onfocus = function() {
if (this.value == '手机') {
this.value = ''
}
p.style.display = 'none'
// 获得焦点的时候需要把文本框内的文字变黑
this.style.color = '#333'
}
ipt.onblur = function() {
if (this.value == '') {
this.value = '手机'
this.style.color = '#ccc'
p.style.display = 'inline-block'
}
}
</script>
</html>
16_立即执行函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
不需要调用立即可以执行的函数:且可以传递参数到函数内部,不要忘了用分号隔开
立即执行函数最大的作用就是创建了一个独立的作用域类似 lambda , 有两种写法
1. (function(){})()
2. (function(){}())
-->
<script type="text/javascript">
(function(args){console.log('立即执行_1_'+args)})('hello');
(function(args){console.log('立即执行_2_'+args)}('hello'))
</script>
</body>
</html>
17_排它锁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">4</button>
</body>
<script type="text/javascript">
var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
console.log(this.innerText)
this.style.backgroundColor = 'pink';
}
}
</script>
</html>
18_事件-鼠标滑过
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
}
li {
display: inline-block;
/* background: pink; */
width: 300px;
padding-top: 10px;
border-bottom: #ccc solid 2px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!--
onmouseover: 为DOM元素绑定鼠标经过事件
-->
<script type="text/javascript">
var lis = document.querySelector('ul').querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
if (i % 2 == 0) {
lis[i].onmouseover = function() {
this.style.backgroundColor = 'pink'
};
lis[i].onmouseout = function() {
this.style.backgroundColor = ''
}
}
}
</script>
</body>
</html>
19_事件练习-全选和反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="checkbox" id="all" />全选
<ul>
<li><input type="checkbox" id="sub" />唱</li>
<li><input type="checkbox" id="sub" />跳</li>
<li><input type="checkbox" id="sub" />rap</li>
</ul>
<script type="text/javascript">
var all = document.querySelector('#all')
var subs = document.querySelector('ul').querySelectorAll('#sub')
// 全选/反选 检测全选按钮的选中状态,依次赋值给子元素
all.onclick = function(){
console.log(this.checked)
for (var i = 0; i < subs.length; i++) {
subs[i].checked = this.checked
}
}
var flag = 0
for (var i = 0; i < subs.length; i++) {
subs[i].onclick = function() {
if (this.checked) {
flag++
} else{
flag--
}
if (flag == subs.length) {
all.checked = true
} else{
all.checked = false
}
}
}
</script>
</body>
</html>
20_自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box" id="box_id" data-say_hello='hello'>
2233
</div>
<!--
document.attr: 只能获取document的内置属性,不支持自定义属性
document.getattribute('attr'): 可以获得document的所有属性,包括自定义的属性
document.setAttribute('age','18'): 手动设置一个age的属性
document.removeAttribute('age'): 删除DOM中的age属性
h5新增: 自定义的属性如果我们以 data-开头 则可以使用 document.dateset 这个属性histo拿到所有的自定义属性的集合
-->
<script type="text/javascript">
var box = document.querySelector('#box_id')
console.log(box.id)
// console.log(box.data-say_hello)
console.log('class: ',box.getAttribute('class')) // 获取元素使用的类, 注意这里不能使用className
console.log('data-say_hello: ', box.getAttribute('data-say_hello'))
box.setAttribute('age','18')
box.removeAttribute('age')
console.log(box.dataset.say_hello)
console.log(box.dataset['say_hello'])
</script>
</body>
</html>
21_父子兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">我是div</div>
<span>我是span</span>
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
<li>我是4</li>
<li>我是5</li>
</ul>
<!--
-- 节点分为: 元素节点, 文本节点, 属性节点
-- 节点可以通过nodetype来的获取节点的类型 1元素节点,3文本节点,2属性节点
parentNode: 得到DOM对象的最近的一个上级父节点,如果找不到父节点,则返回null
childNodes: 得到DOM对象所有的子节点(包含了文本节点和子节点)
children: 获得DOM对象的所有的子 "元素" 节点, 注意是元素
firstChild: 得到DOM对象的第一个子节点,不管是文本节点还是元素节点
firstElementChild: 得到DOM对象的第一个子元素节点(有兼容性情况)
nextSibling: 得到上一个兄弟节点
nextElementSibling: 得到上一个兄弟元素
-->
<script type="text/javascript">
var box = document.querySelector('.box')
var ul = document.querySelector('ul')
console.log(box.parentNode) // 得到box 的父节点
console.log(ul.childNodes) // 得到ul 的所有子节点
console.log(ul.children) // 得到ul 的所有的子元素节点
console.log(ul.firstChild) // 得到ul的第一个子节点
console.log(ul.lastChild) // 得到ul的最后一个子节点
console.log(ul.firstElementChild) // 得到ul第一个子元素节点
console.log(box.nextSibling) // 下一个节点
console.log(box.nextElementSibling) // 下一个元素节点
console.log(box.previousSibling, 1) // 上一个节点
console.log(box.previousElementSibling, 2) // 上一个元素节点
// 实际开发情况
console.log(ul.children[0]) // 第一个
console.log(ul.children[ul.children.length - 1]) //最后一个
// 循环注册事件
lis = ul.children //
for (var i = 0; i < lis.length; i++) {
if (i % 2 != 1) {
lis[i].style.background = 'coral'
}
}
</script>
</body>
</html>
22_创建节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>2333</li>
</ul>
<!--
createElement: 创建一个标签
appendChild: 追加元素
children: 插入元素,需要传入需要插入的位置
-->
<script type="text/javascript">
// 创建节点
li = document.createElement('li')
li.innerText = 'hello'
l1 = document.createElement('li')
li.innerHTML = 'say'
// 添加节点到 ul 中
var ul = document.querySelector('ul')
ul.insertBefore(li,ul.children[0]) // 添加到前面
// ul.appendChild(li) // 添加到后面
</script>
</body>
</html>
23_删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" id="" value="" />
<button type="button" id="pu">发布</button>
<button type="button" id="de">删除</button>
<ul>
</ul>
<!--
removeChild: 删除父节点中的子节点(需要传入子节点对象),注意!需要从父节点删除
-->
<script type="text/javascript">
var btn = document.querySelector('#pu')
var btn_de = document.querySelector('#de')
var ul = document.querySelector('ul')
var ipt = document.querySelector('input')
btn.onclick = function() {
if (ipt.value == '' || ipt.value.trim() == '') {
alert('不能输入空')
return
}
var li = document.createElement('li')
li.innerHTML = ipt.value + "<a href='#'>删除</a>"
li.style.background = 'pink'
// ul.appendChild(li)
ul.insertBefore(li, ul.children[0])
// 创建删除的按钮
var as = document.querySelectorAll('a')
console.log(as)
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 需要删除 ul中a 标签的父节点 就是li
ul.removeChild(this.parentNode)
}
}
}
btn_de.onclick = function() {
if (ul.children.length == 0) {
return
}
ul.removeChild(ul.children[0])
}
</script>
</body>
</html>
24_复制节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--
cloneNode(): 括号为空, 或者里面是false 则是浅拷贝(只赋值标签,不复制内容)
-->
<script type="text/javascript">
var ul = document.querySelector('ul')
// 获得ul 中第一个li
var li = ul.children[0]
// 克隆
lii = li.cloneNode(true)
// 添加克隆的节点
ul.appendChild(lii)
</script>
</body>
</html>
25_事件基础-注册事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" class="btn_1">1</button>
<button type="button" class="btn_2">2</button>
<!--
传统注册事件: 最后注册的事件会覆盖上面的事件
addEventListener: 监听事件注册,同一个元素对同一个事件可以注册多个监听器需要传递事件类型(事件类型不需要写 on了 比如 click),事件处理函数和useCapture(是否捕获),
相同事件类型触发的顺序,是按照注册顺序依次触发
-->
<script type="text/javascript">
btn_1 = document.querySelector('.btn_1')
btn_2 = document.querySelector('.btn_2')
// 传统注册方式
btn_1.onclick = function(){
alert(1)
}
// 传统注册方式
btn_1.onclick = function(){
alert(111)
}
// 事件监听
btn_2.addEventListener('click',function(){
alert(222)
})
btn_2.addEventListener('click',function(){
alert(233)
})
</script>
</body>
</html>
26_事件基础-解除事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" class="btn_1">
1. 只能点一次哦
</button>
<button type="button" class="btn_2">
2. 只能点一次哦
</button>
<!--
传统方法注册的事件 直接把事件名称 赋值为 none 即可解绑事件
或者使用 dom 对象 removeEventListener 方法
-->
<script type="text/javascript">
btn_1 = document.querySelector('.btn_1')
btn_2 = document.querySelector('.btn_2')
btn_1.onclick = function(){
alert(1)
btn.onclick = 'none'
}
function func(){
alert(2333)
// 移除事件
btn_2.removeEventListener('click',func)
}
// 添加事件监听
btn_2.addEventListener('click',func)
</script>
</body>
</html>
27_事件基础-事件流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box_1 {
width: 300px;
height: 300px;
background: pink;
padding: 100px;
box-sizing: border-box;
}
.box_2 {
width: 100px;
height: 100px;
background: #BEBEB3;
}
</style>
</head>
<body>
<div class="box_1">
box1
<div class="box_2">
box2
</div>
</div>
<!--
DOM事件流三个阶段
1. js 代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick 和attachevent 能得到冒泡阶段
3. 捕获阶段 如果addeventlistener 第三个参数是true那么则该事件处于捕获阶段,执行顺序是 box_1->box_2
3. 冒泡阶段 如果addeventlistener 第三个参数是false 或者省略那么会让该事件处于冒泡阶段会从内到外依次执行 box_2->box_1
-->
<script type="text/javascript">
var box_1 = document.querySelector('.box_1')
var box_2 = document.querySelector('.box_2')
// 添加box_2点击事件
box_2.addEventListener('click',function(){alert('box_2')})
// 添加box_1点击事件
box_1.addEventListener('click',function(){alert('box_1')},true)
</script>
</body>
</html>
28_事件基础-阻止行为与阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div>
<a href="https://www.baidu.com">百度一下你就知道</a>
</div>
<!--
stopPropagation: 阻止冒泡事 件
-->
<script type="text/javascript">
var div = document.querySelector('div')
var a = document.querySelector('a')
// 阻止 a 标签的默认行为
a.addEventListener('click', function(event) {
event.preventDefault() // 阻止默认行为,W3C DOM 推荐的写法
event.stopPropagation() // 阻止该事件冒泡
})
//
div.addEventListener('click', function(event) {
console.log(event)
})
</script>
</body>
</html>
29_事件基础-事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {openSUSE
width: 100px;
height: 100px;
background: pink;
text-align: center;
line-height: 100px;
}
span {
background: #1BA1E6;
}
</style>
</head>
<body>
<br>
<div>
<span>1231</span>
</div>
<!--
事件的回调函数可以接收一个形参event, 表示该事件对象,事件对象只有有了事件才会存在,对象内包含了和事件一些相关的数据的集合
clientX,clientY: 得到当前事件触发时的鼠标在 '可视区' 的坐标
pageX,pageY: 返回相对于文档页面的 坐标,比如网页很长需要获得当前元素距离整个页面头部的距离
target: 返回触发事件对象(取决于你点击了哪个元素),比如你点了ul中里的li 那么就返回li 包含了该li中的属性
this: 返回绑定事件的对象
-->
<script type="text/javascript">
var div = document.querySelector('div')
div.addEventListener('click', function(event) {
console.log(event) // 打印事件对象
console.log(event.type) // 打印事件类型
console.log(event.pageX) // 打印
console.log(event.target) // 返回触发事件对象(取决于你点击了哪个元素)
console.log(this) // 返回绑定事件的对象
})
div.addEventListener('mousemove', function(event) {
console.log(event.type)
console.log(event.clientX,event.clientY,event.pageY)
})
div.addEventListener('mouseout', function(event) {
console.log(event.type)
})
</script>
</body>
</html>
30_事件基础-委托
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--
事件委托是设置监听器到父节点上,然后利用冒泡实例影响设置每个节点
-->
<script type="text/javascript">
var ul = document.querySelector('ul')
ul.addEventListener('click', function(event) {
console.log(event.target.textContent)
// 得到父节点
var fat = event.target.parentNode
// 得到所有兄弟节点
lis = fat.children
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = 'none'
}
event.target.style.background = 'pink'
})
</script>
</body>
</html>
31_事件基础-鼠标事件的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: absolute;
width: 100px;
height: 100px;
background: url(jsapis_material/第三天/images/angel.gif) no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
var div = document.querySelector('div')
document.addEventListener('mousemove', function(event) {
var x = event.clientX
var y = event.clientY
div.style.left = x -50 + 'px'
div.style.top = y -40 + 'px'
})
</script>
</html>
32_事件基础-键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="" name="" id="" value="按下s自动获取焦点" />
<!--
keydown: 键盘按下的操作(此时输入的文本还没有传递到输入框中),keyCode不区分字母大小写
keyup: 键盘抬起的操作,keyCode不区分字母大小写
keypress: 键盘按下的操作,keyCode区分字母大小写,但是不识别 功能键 比如上下左右 ctrl shift enter键
event.keyCode: 返回键盘字母对应的ASCII码
-->
<script type="text/javascript">
var ipt = document.querySelector('input')
document.addEventListener('keyup', function(event) {
console.log('keyup:抬起' + event.keyCode)
if (event.keyCode == 83) {
ipt.value = ''
ipt.focus()
}
})
document.addEventListener('keydown', function(event) {
console.log('keydown:按下' + event.keyCode)
})
document.addEventListener('keypress', function(event) {
console.log('keypress:按下' + event.keyCode)
})
</script>
</body>
</html>
33_事件基础-键盘事件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
</head>
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script type="text/javascript">
var con = document.querySelector('.con')
var jd = document.querySelector('.jd')
jd.addEventListener('keyup', function(event) {
if (this.value == '') {
con.style.display = 'none'
} else {
con.innerText = this.value
con.style.display = 'block'
}
})
jd.addEventListener('blur',function(event){
con.style.display = 'none'
})
jd.addEventListener('focus',function(event){
if (this.value != '') {
con.style.display = 'block'
con.innerText = this.value
}
})
</script>
</body>
</html>
34_BOM基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
BOM: 浏览器对象模型 window
定义在全局作用域中的变量和函数, 都会变成window对象的属性和方法
当然全局作用域中的函数或者变量使用时,可以省略window
-->
</body>
<script type="text/javascript">
// window.alert(123)
flag = '张三'
console.dir(window)
console.dir(window.flag) // window 直接调用全局中的变量
console.dir(window.name)
</script>
</html>
35_BOM基础-窗口加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.addEventListener('load', function() {
console.log('后执行了 load')
// var btn = document.querySelector('button')
// btn.addEventListener('click', function() {
// alert('点我干嘛')
// })
})
document.addEventListener('DOMContentLoaded',function(){
console.log('先执行了 DOMContentLoaded')
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
alert('点我干嘛')
})
})
</script>
</head>
<body>
<button type="button">点一下</button>
</body>
<!--
load: BOM的事件(类似window.onload),该事件会在页面所有的元素加载完毕之后再加载,所以上面script放在body上面也可以执行
DOMContentLoaded: DOM事件,该事件是DOM加载完毕(但是不包含图片 css等)就可以执行,加载速度比 load 更快
-->
</html>
36_BOM基础-浏览器窗口大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div>调整一下窗口高度试试</div>
<!--
resize: 当浏览器窗口的大小发生变化的时候触发该事件
innerHeight: 获得当前window窗口的高度
innerWidth: 获得当前window窗口的宽度
-->
<script type="text/javascript">
var div = document.querySelector('div')
window.addEventListener('resize',function(event){
console.log(window.innerHeight)
console.log(window.innerWidth)
if (window.innerHeight < 300) {
div.style.display = 'none'
}else {
div.style.display = 'block'
}
})
</script>
</body>
</html>
37_定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">点一下让广告不消失</button>
<img src="jsapis_material/第四天/images/ad.jpg">
<div>1</div>
</body>
<!--
this: 定时器中的this 指的是window对象
setTimeout: 设置定时器(只调用一次)接收两个参数, 回调函数,以及延迟时间(毫秒)可以省略默认为0立即执行,并返回一个 定时器对象,
clearTimeout,clearInterval: 停止一个定时器,接收一个参数,传入一个定时器对象
setInterval: 设置一个周期定时器, 每隔一段时间开就运行一次回调函数
-->
<script type="text/javascript">
var ad = document.querySelector('img')
// 设置一个一次性任务
var func = function() {
console.log('时间到了')
ad.style.display = 'none'
}
var ret = setTimeout(func, 2000)
console.dir(ret)
// 设置一个周期性任务
flag = 1
div = document.querySelector('div')
var func_1 = function() {
div.innerText = flag
flag++
}
var ret_1 = setInterval(func_1, 1000)
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
console.log('停止了一些任务')
clearTimeout(ret)
clearTimeout(ret_1)
clearInterval(ret_1)
})
</script>
</html>
38_定时器案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span {
/* float: left; */
display: inline-block;
width: 40px;
height: 40px;
background: #ccc;
margin-left: 10px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</body>
<script type="text/javascript">
var hour = document.querySelector('.hour')
var minute = document.querySelector('.minute')
var second = document.querySelector('.second')
var countDown = function() {
var inputTime = +new Date('2019-05-01 18:00:00')
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
// 设置一个周期性定时器来刷新秒杀的时间
setInterval(countDown, 1000)
// 先调用一次函数,防止页面刷新时还没到执行时间导致页面闪烁
countDown()
</script>
</html>
39_定时器案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" id="" value="" />
<button type="button">发送</button>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
var flag = 3
btn.addEventListener('click', function(event) {
btn.innerText = '请' + flag + '秒后发送'
btn.disabled = 'true'
// 添加一个周期性定时器
var ret = setInterval(function() {
if (flag == 0) {
clearTimeout(ret)
btn.disabled = false
btn.innerText = '发送'
} else {
console.log(flag)
flag--
btn.innerText = '请' + flag + '秒后发送'
}
}, 1000)
// 添加一个一次性定时器用于清除定时器
// var clear_flag = function(){
// clearTimeout(ret)
// btn.disabled = 'false'
// }
// setTimeout(clear_flag,1000*60)
})
</script>
</html>
40_location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">点击后跳转百度</button>
</body>
<!--
location: 包含了请求路径的一些参数
href: 获取或者设置整个URL
hash: 获取hash 就是锚点后的值
assign: 和href一样可以跳转界面(重定向界面)
replace: 替换当前界面但是不能后退回来页面了
reload: 刷新界面
-->
<script type="text/javascript">
console.log(location) // 获得 location 对象
console.log(location.href) // 获取或者设置整个URL
console.log(location.hash) // 获取hash
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
console.log('即将改变页面地址')
btn.disabled = 'true'
setTimeout(function() {
clearTimeout(ret)
location.href = 'https://www.baidu.com'
}, 5000);
flag = 5
ret = setInterval(function() {
btn.innerText = '' + flag + '秒后跳转到百度'
flag--
}, 1000)
})
</script>
</html>
41_location案例-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<button type="button">点击回到刚才界面</button>
</body>
<script type="text/javascript">
var div = document.querySelector('div')
console.log(location.search)
var querystring = location.search.substr(1)
var querystring = querystring.split('=')
var user_name = querystring[1]
div.innerHTML = '' + user_name + '欢迎你'
var btn = document.querySelector('button')
btn.addEventListener('click',function(){
console.log(history)
history.back()
})
</script>
</html>
42_location案例_login
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="38_location案例_index.html">
<input type="text" name="user_name" />请输入用户名
<br>
<input type="submit" value="点击提交"/>
</form>
</body>
</html>
43_navigator对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
navigator: 包含了浏览器的一些信息系统版本,浏览器内核以及版本等等
-->
<script type="text/javascript">
console.log(navigator)
console.log(navigator.userAgent)
</script>
</body>
</html>
44_history对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
history: 包含了浏览器左右箭头的一些信息
back: 相当于后退按钮
forward: 相当于前进按钮
go(参数): 相当于前进按钮但是可以通过参数控制前进几个界面
-->
<script type="text/javascript">
console.dir(history)
</script>
</body>
</html>
45_offset系列-元素偏移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box_1 {
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background: pink;
padding: 50px;
box-sizing: border-box;
}
.box_2 {
width: 100px;
height: 100px;
background: paleturquoise;
border: 10px solid #ccc;
}
</style>
</head>
<body>
<div class="box_1">
<div class="box_2">
</div>
</div>
<!--
offset: 的属性只能获取,而不能进行修改,但是却能得到任意样式表中的样式值(style只能得到行内样式的样式值,但是却可以修改)
offsetWidth,offHeight: 该DOM的宽度和高度,包含padding 和border的
offsetTop: DOM的顶部距离父元素的距离,如果父元素没有使用定位,则获取到距离浏览器窗体的距离
offsetParent: 返回带有定位的父元素(如果父元素没有定位属性,那么则返回body)
-->
<script type="text/javascript">
b1 = document.querySelector('.box_1')
b2 = document.querySelector('.box_2')
console.log('包含了边框和padding的宽度:', b2.offsetWidth)
console.log('距离顶部父元素的高度:', b2.offsetTop)
console.log('带有定位的父元素:',b2.offsetParent)
</script>
</body>
</html>
46_offset案例-计算鼠标位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background: pink;
margin: 100px;
}
</style>
</head>
<body>
<div>
鼠标放上来试试
</div>
<script type="text/javascript">
var div = document.querySelector('div')
div.addEventListener('mousemove', function(e) {
// 1. 首先得到鼠标在页面中的坐标
ex = e.pageX
ey = e.pageY
// 2. 得到盒子距离页面的距离
px = this.offsetLeft
py = this.offsetTop
console.log(`盒子距离页面(${px}, ${py}), 鼠标在页面中的坐标: (${ex}, ${ey})`)
// 3. 鼠标在页面中的坐标 减去 盒子距离页面的距离, 就得到了鼠标距离盒子边距的距离
nx = ex - px
ny = ey - py
this.innerHTML = nx + ',' + ny
})
</script>
</body>
</html>
47_offset案例-拖动模态框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script type="text/javascript">
var bg = document.querySelector('#bg')
var login = document.querySelector('.login')
var a = document.querySelector('.login-header')
var close = document.querySelector('.close-login')
var title = document.querySelector('#title')
a.addEventListener('click', function() {
login.style.display = 'block'
bg.style.display = 'block'
})
close.addEventListener('click', function() {
login.style.display = 'none'
bg.style.display = 'none'
})
title.addEventListener('mousedown', function(e) {
// 1. 鼠标按下,获得鼠标在盒子内的坐标
var lx = e.pageX - login.offsetLeft
var ly = e.pageY - login.offsetTop
console.log(e.pageX,e.pageY,login.offsetLeft,login.offsetTop)
// 2. 添加鼠标移动事件(鼠标移动的坐标减去 鼠标在盒子中的坐标就是模态框的left和top)
var func = function(e) {
var nx = e.pageX - lx
var ny = e.pageY - ly
// console.log(ny, nx)
login.style.left = nx + 'px'
login.style.top = ny + 'px'
}
document.addEventListener('mousemove', func)
// 3. 添加鼠标弹开事件
document.addEventListener('mouseup', function(e) {
// 移除鼠标移动事件
document.removeEventListener('mousemove', func)
})
})
</script>
</body>
</html>
48_clint系列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box_1 {
width: 200px;
height: 100px;
background: pink;
border: solid 15px #ccc;
padding: 3px;
}
</style>
</head>
<body>
<div class="box_1">
这个粉色区域是200x100,边框宽度是15b <br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1
</div>
</body>
<!--
client: 返回不包含边框的 可视区域 的大小(不包含border)
-->
<script type="text/javascript">
box_1 = document.querySelector('.box_1')
console.log(box_1.clientHeight) // 打印 可视区域的高度(边框内元素的高度)
console.log(box_1.clientWidth) // 打印可视区域的宽度
console.log(box_1.clientLeft) // 打印可视区域左边框的宽度
console.log(box_1.clientTop) // 打印可视区域上边框的高度
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 130px;
height: 170px;
border: solid 15px pink;
background: #1BA1E6;
padding: 13px;
overflow: auto;
}
</style>
</head>
<body>
<div><br>1111111111111111111111111111<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>2<br>1<br>11<br>1<br>1<br>1</div>
<!--
scroll: 可以动态的的到该元素 内容 的大小(不包含border),滚动距离,如果盒子内的内容超出了盒子 则会获得内容的实际大小
scrolltop: 返回被卷去的上侧距离,返回数值不带单位
scrollleft: 返回被卷去的左侧距离
scrollwidth: 返回自身实际的宽度,不含边框
scrollheight: 返回自身实际的高度 不含边框
注意:如果是浏览器最右边的系统拉选框滚动则需要使用 window.pageYOffset 获得卷起值
-->
<script type="text/javascript">
var div = document.querySelector('div')
console.log(div.scrollHeight)
console.log(div.scrollWidth)
console.log(div.scrollTop)
console.log(div.scrollLeft)
div.addEventListener('scroll',function(){
console.log('内容的高',div.scrollHeight)
console.log('内容的宽',div.scrollWidth)
console.log('被卷去的头部',div.scrollTop)
console.log('被卷去的左边',div.scrollLeft)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box_1 {
width: 400px;
height: 3000px;
background:-webkit-linear-gradient(top left,pink,red,pink);
margin: 0 auto;
}
.box {
position: absolute;
top: 120px;
left: 50%;
margin-left: 200px;
width: 50px;
height: 100px;
background: palegoldenrod;
}
span {
display: none;
}
</style>
</head>
<body>
<div class="box_1">
<div class="box">
<span>返回顶部</span>
</div>
</div>
<script type="text/javascript">
// 注意对于整个页面获取被卷去的头部需要使用 window.pageYOffset
var box_1 = document.querySelector('.box_1')
var box = document.querySelector('.box')
var sp = document.querySelector('span')
box_top = box.offsetTop // 得到小盒子距离顶部的距离
// document.addEventListener('scroll',function(){
window.addEventListener('scroll',function(){
if (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop > 100) {
sp.style.display = 'inline';
box.style.top = box_top - 100 + 'px' // 顶部的距离减去需要停止的距离就得到定位的距离
box.style.position = 'fixed'
}else {
box.style.position = 'absolute'
sp.style.display = 'none';
box.style.top = box_top + 'px'
}
})
</script>
</body>
</html>
51_动画运动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: absolute;
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button type="button">点击动画开始</button>
<div class="box">
</div>
</body>
<script type="text/javascript">
function action(obj, target) { // 封装的一个动画函数
clearInterval(obj.t) // 每次开启一个新的定时器的时候就关闭obj的上一个定时器,否则会开很多的定时器,动画会越来越快
obj.t = setInterval(() => { // 定时器直接赋值成obj的一个对象避免开辟内存的消耗
if (obj.offsetLeft >= target) {
console.log('任务结束了')
clearInterval(obj.t)
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 10)
}
let box = document.querySelector('.box');
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
action(box, 50)
})
</script>
</html>
52_动画缓动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
position: absolute;
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button type="button" class="btn_200">点击动画开始200</button>
<button type="button" class="btn_300">点击动画开始300</button>
<div class="box">
</div>
</body>
<script type="text/javascript">
// 缓动动画原理: 每次移动的距离 = (目标值 - 现在的位置) / 10
function action(obj, target) {
clearInterval(obj.t)
obj.t = setInterval(() => {
// 得到每次移动的距离
let setp = (target - obj.offsetLeft) / 10
// 取整,防止因为出现小数而导致到不了目标位置的情况
setp > 0 ? Math.ceil(setp) : Math.floor(setp)
if (obj.offsetLeft == target) {
obj.t = null
clearInterval(obj.t)
}
obj.innerHTML = target
obj.style.left = obj.offsetLeft + setp + 'px';
}, 10)
}
let box = document.querySelector('.box');
let btn_200 = document.querySelector('.btn_200')
btn_200.addEventListener('click', function() {
action(box, 200)
})
let btn_300 = document.querySelector('.btn_300')
btn_300.addEventListener('click', function() {
action(box, 300)
})
</script>
</html>