20191013class
This commit is contained in:
parent
019d49adbf
commit
3dbc2fd147
@ -36,10 +36,13 @@
|
||||
* `back()` 回退
|
||||
* `forward()` 前进
|
||||
|
||||
* 定时器
|
||||
* `setInterval(<function>,time)`
|
||||
* function: 函数体
|
||||
* time: 每次重复的时间
|
||||
* return：IntervalId 定时器ID，用于清空定时器
|
||||
* `clearInterval(timerId)`
|
||||
* timerId: 定时器ID
|
||||
* `setInterval(<function>,time)`
|
||||
* function: 函数体
|
||||
* time: 每次重复的时间
|
||||
* return：IntervalId 定时器ID，用于清空定时器
|
||||
|
||||
* `clearInterval(timerId)`
|
||||
* 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
|
||||
@ -22,6 +25,8 @@
|
||||
* e.type 获取当前事件
|
||||
* a标签 href属性为 javascript:; 阻止默认事件
|
||||
|
||||
* [上课视频链接](https://pan.baidu.com/s/1o0cJLaZeUlyeqZVHdOjWGw)
|
||||
提取码：txxm
|
||||
---
|
||||
|
||||
## 20191009
|
||||
@ -32,7 +37,10 @@
|
||||
* window
|
||||
* history
|
||||
* location
|
||||
* setInterval
|
||||
|
||||
* [上课视频链接](https://pan.baidu.com/s/1ANHcpZAG7c5wXo5eHX-y-w)
|
||||
提取码：9liy
|
||||
---
|
||||
|
||||
## 20191013
|
||||
@ -40,4 +48,7 @@
|
||||
|
||||
[linkToMd](./20191013/20191013.md)
|
||||
|
||||
* 复习上节内容
|
||||
* setTimeout
|
||||
* setTimeout案例
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user