20191013class
This commit is contained in:
parent
019d49adbf
commit
3dbc2fd147
@ -36,10 +36,13 @@
|
|||||||
* `back()` 回退
|
* `back()` 回退
|
||||||
* `forward()` 前进
|
* `forward()` 前进
|
||||||
|
|
||||||
* 定时器
|
* `setInterval(<function>,time)`
|
||||||
* `setInterval(<function>,time)`
|
* function: 函数体
|
||||||
* function: 函数体
|
* time: 每次重复的时间
|
||||||
* time: 每次重复的时间
|
* return：IntervalId 定时器ID，用于清空定时器
|
||||||
* return：IntervalId 定时器ID，用于清空定时器
|
|
||||||
* `clearInterval(timerId)`
|
* `clearInterval(timerId)`
|
||||||
* timerId: 定时器ID
|
* timerId: 定时器ID
|
||||||
|
|
||||||
|
|
||||||
|
* 感谢高同学提供的html文件，阿里嘎多
|
||||||
@ -3,4 +3,27 @@
|
|||||||
|
|
||||||
|
|
||||||
* 复习上节内容
|
* 复习上节内容
|
||||||
[linkToHtml](./test1.html)
|
[linkToHtml](./test1.html)
|
||||||
|
|
||||||
|
* setTimeout
|
||||||
|
[linkToHtml](./setTimeout.html)
|
||||||
|
* `setTimeout(<function>,time)` 一次性定时器
|
||||||
|
* function: 函数体
|
||||||
|
* time: 每次重复的时间
|
||||||
|
* return timerID 该定时器ID，用于清除定时器
|
||||||
|
* `clearTimeout(timerID)` 清除定时器
|
||||||
|
* timerID 定时器ID
|
||||||
|
|
||||||
|
* setTimeout案例
|
||||||
|
[linkToHtml](./setTimeout案例.html)
|
||||||
|
* input type="hidden" 创建隐藏域，将不想被用户知道还想发送的东西放在里边
|
||||||
|
|
||||||
|
* 表单属性操作
|
||||||
|
* 表单中属性名等于属性值，html表单可以简写
|
||||||
|
* js中操作属性时，值为Boolean
|
||||||
|
|
||||||
|
* 渐变案例
|
||||||
|
[linkToHtml](./渐变案例.html)
|
||||||
|
|
||||||
|
* 不要使用js进行小数计算，精度问题
|
||||||
|
|
||||||
28
20191013/setTimeout.html
Normal file
28
20191013/setTimeout.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input type="button" value="boom!" id="btn">
|
||||||
|
<input type="button" value="stop!" id="btn1">
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.onload = function() {
|
||||||
|
var timerId;
|
||||||
|
document.getElementById('btn').onclick = function() {
|
||||||
|
//处理定时器叠加
|
||||||
|
clearTimeout(timerId);
|
||||||
|
timerId = setTimeout(function() {
|
||||||
|
alert('boom!');
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
document.getElementById('btn1').onclick = function() {
|
||||||
|
clearTimeout(timerId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
20191013/setTimeout案例.html
Normal file
46
20191013/setTimeout案例.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<textarea name="" id="" cols="30" rows="10" readonly>
|
||||||
|
考试不及格，就要疯狂写代码，不写代码，就疯狂的打死
|
||||||
|
</textarea>
|
||||||
|
<input type="button" value="请在(10s)之后点击同意" disabled id="btn">
|
||||||
|
<input type="button" value="瓦达西，扣涂挖路" id="btn1">
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.onload = function() {
|
||||||
|
var btn = document.getElementById('btn')
|
||||||
|
var btn1 = document.getElementById('btn1')
|
||||||
|
//控制value里边的时间，每隔1s变化一次 -1
|
||||||
|
var num = 10;
|
||||||
|
var timer1 = setInterval(function() {
|
||||||
|
num--;
|
||||||
|
btn.value = "请在("+ num +"s)之后点击同意"
|
||||||
|
//在num = 0 的时候清除定时器并改变按钮状态可点击，改变按钮的value
|
||||||
|
if(num <= 0) {
|
||||||
|
clearInterval(timer1);
|
||||||
|
//表单中属性名等于属性值，html表单可以简写
|
||||||
|
//js中操作属性时，值为Boolean
|
||||||
|
btn.disabled = false;
|
||||||
|
btn.value = '我同意';
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
//时间结束之后将“我同意”置不可点击
|
||||||
|
btn1.onclick = function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
if(num <= 0) {
|
||||||
|
btn.disabled = true;
|
||||||
|
}
|
||||||
|
},num*1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
36
20191013/渐变案例.html
Normal file
36
20191013/渐变案例.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
background: hotpink;
|
||||||
|
/* opacity: 0; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='dv'></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.onload = function() {
|
||||||
|
document.getElementById('dv').onclick = function() {
|
||||||
|
//一点一点慢慢的变成透明背景 opacity = 0
|
||||||
|
var num = 10;
|
||||||
|
var timer = setInterval(function() {
|
||||||
|
//js 不要处理小数的加减，精度问题
|
||||||
|
num --
|
||||||
|
dv.style.opacity = num/10;
|
||||||
|
if(num <= 0) {
|
||||||
|
clearInterval(timer);
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
README.md
11
README.md
@ -9,6 +9,9 @@
|
|||||||
* 给任意事件解绑监听器封装函数
|
* 给任意事件解绑监听器封装函数
|
||||||
* 阻止事件冒泡
|
* 阻止事件冒泡
|
||||||
|
|
||||||
|
[上课视频链接](https://pan.baidu.com/s/1x8Bedgte67XhVMjLImboZw)
|
||||||
|
提取码：lzcc
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 20190926
|
## 20190926
|
||||||
@ -22,6 +25,8 @@
|
|||||||
* e.type 获取当前事件
|
* e.type 获取当前事件
|
||||||
* a标签 href属性为 javascript:; 阻止默认事件
|
* a标签 href属性为 javascript:; 阻止默认事件
|
||||||
|
|
||||||
|
* [上课视频链接](https://pan.baidu.com/s/1o0cJLaZeUlyeqZVHdOjWGw)
|
||||||
|
提取码：txxm
|
||||||
---
|
---
|
||||||
|
|
||||||
## 20191009
|
## 20191009
|
||||||
@ -32,7 +37,10 @@
|
|||||||
* window
|
* window
|
||||||
* history
|
* history
|
||||||
* location
|
* location
|
||||||
|
* setInterval
|
||||||
|
|
||||||
|
* [上课视频链接](https://pan.baidu.com/s/1ANHcpZAG7c5wXo5eHX-y-w)
|
||||||
|
提取码：9liy
|
||||||
---
|
---
|
||||||
|
|
||||||
## 20191013
|
## 20191013
|
||||||
@ -40,4 +48,7 @@
|
|||||||
|
|
||||||
[linkToMd](./20191013/20191013.md)
|
[linkToMd](./20191013/20191013.md)
|
||||||
|
|
||||||
|
* 复习上节内容
|
||||||
|
* setTimeout
|
||||||
|
* setTimeout案例
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user