[toc]
# 每日英语
1. `tick` 滴答声
2. `interval` 间隔
3. `timeout` 超时
# 定时器的使用
## 开启定时器
### `setInterval` 间隔
```html
<!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>
<script>
function show() {
alert("a");
}
setInterval(show, 1000);
</script>
</body>
</html>
```
### `setTimeout` 延迟
```javascript
function show() {
alert("a");
}
setTimeout(show, 5000);
```
### 两种定时器的区别
> `setInterval`会一直执行
> `setTimeout`只执行一次
## 停止定时器
### clearInterval
使用按钮开启定时器
```html
<!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>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
oBtn1.onclick = function() {
setInterval(function() {
alert("a");
}, 500);
};
};
</script>
</head>
<body>
<input type="button" value="开启" id="btn1" />
<input type="button" value="关闭" id="btn2" />
</body>
</html>
```
使用按钮, 停止计时器
> 因为一个页面有很多定时器, 所以关闭时, 需要指定要关哪个定时器
```javascript
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var timer = null;
oBtn1.onclick = function() {
timer = setInterval(function() {
alert("a");
}, 500);
};
oBtn2.onclick = function() {
clearInterval(timer);
};
};
```
还有第二种关闭方式...
```javascript
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var timer = null;
oBtn1.onclick = function() {
setInterval(function() {
alert("a");
}, 500);
setInterval(function() {
alert("b");
}, 500);
};
oBtn2.onclick = function() {
clearInterval(1);
clearInterval(2);
};
};
```
如果改变顺序呢?
```javascript
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var timer = null;
oBtn1.onclick = function() {
setInterval(function() {
alert("b");
}, 500);
setInterval(function() {
alert("a");
}, 500);
};
oBtn2.onclick = function() {
clearInterval(1);
// clearInterval(2);
};
};
```
### clearTimeout
> 关闭延时任务
```html
<!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>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var timer = null;
var timer1 = null;
oBtn1.onclick = function() {
// setInterval(function() {
// alert("a");
// }, 500);
// setInterval(function() {
// alert("b");
// }, 500);
timer = setTimeout(function() {
alert("c");
}, 5000);
};
oBtn2.onclick = function() {
clearInterval(1);
clearInterval(2);
};
oBtn3.onclick = function() {
timer1 = setTimeout(function() {
alert("c");
}, 5000);
};
oBtn4.onclick = function() {
console.log(timer);
console.log(timer1);
clearTimeout(timer);
clearTimeout(timer1);
};
};
</script>
</head>
<body>
<input type="button" value="开启" id="btn1" />
<input type="button" value="关闭" id="btn2" />
<input type="button" value="延迟5秒开启" id="btn3" />
<input type="button" value="关闭原来的开启计划" id="btn4" />
</body>
</html>
```
**因为顺序不固定, 所以不推荐使用数字的方式, 关闭定时器**
```html
<!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>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var oBtn5 = document.getElementById("btn5");
var oBtn6 = document.getElementById("btn6");
var oBtn7 = document.getElementById("btn7");
var oBtn8 = document.getElementById("btn8");
var timer1, timer2, timer3, timer4;
oBtn1.onclick = function() {
timer1 = setInterval(function() {
alert("AAA");
}, 3000);
};
oBtn2.onclick = function() {
timer2 = setInterval(function() {
alert("BBB");
}, 3000);
};
oBtn3.onclick = function() {
timer3 = setInterval(function() {
alert("CCC");
}, 3000);
};
oBtn4.onclick = function() {
timer4 = setInterval(function() {
alert("DDD");
}, 3000);
};
oBtn5.onclick = function() {
clearInterval(timer1);
};
oBtn6.onclick = function() {
clearInterval(timer2);
};
oBtn7.onclick = function() {
clearInterval(timer3);
};
oBtn8.onclick = function() {
clearInterval(timer4);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="开启定时A" />
<input id="btn2" type="button" value="开启定时B" />
<input id="btn3" type="button" value="开启定时C" />
<input id="btn4" type="button" value="开启定时D" />
<input id="btn5" type="button" value="关闭定时A" />
<input id="btn6" type="button" value="关闭定时B" />
<input id="btn7" type="button" value="关闭定时C" />
<input id="btn8" type="button" value="关闭定时D" />
</body>
</html>
```
# 数码时钟
## 先来一个简单的布局
```html
<!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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="img/0.png" />
<img src="img/1.png" />
:
<img src="img/0.png" />
<img src="img/2.png" />
:
<img src="img/0.png" />
<img src="img/3.png" />
</body>
</html>
```
```css
body {
background: #000;
color: white;
font-size: 50px;
}
```
第一步: 获取时间
第二步: 修改图片的 src
获取时间需要用到 Date 类
```javascript
var oDate = new Date();
console.log(oDate.getHours()); // 获取当前的小时数
console.log(oDate.getMinutes()); // 获取当前的分钟数
console.log(oDate.getSeconds()); // 获取当前的秒数
```
如何修改图片路径
```html
<!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>
<link rel="stylesheet" href="style.css" />
<script>
window.onload = function() {
var aImg = document.getElementsByTagName("img");
var str = "221744";
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
};
</script>
</head>
<body>
<img src="img/2.png" />
<img src="img/3.png" />
:
<img src="img/2.png" />
<img src="img/7.png" />
:
<img src="img/3.png" />
<img src="img/3.png" />
</body>
</html>
```
> 通过修改字符串, 就可以控制时间的显示
> js 代码修改如下
```javascript
window.onload = function() {
var aImg = document.getElementsByTagName("img");
// var str = "221744";
var oDate = new Date();
var str = "" + oDate.getHours() + oDate.getMinutes() + oDate.getSeconds(); // 注意数字直接相加的问题以及补零问题
// console.log(str)
// console.log(str.length)
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
};
```
解决数字相加和补零之后...
```javascript
function toDouble(num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
window.onload = function() {
var aImg = document.getElementsByTagName("img");
// var str = "221744";
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
};
```
最后, 还得让表自己动起来
```javascript
window.onload = function() {
setInterval(function() {
var aImg = document.getElementsByTagName("img");
// var str = "221744";
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
}, 1000);
};
```
刚刷新的时候, 还有一个小问题...
```javascript
function toDouble(num) {
if (num < 10) {
return "0" + num;
} else {
return "" + num;
}
}
window.onload = function() {
var aImg = document.getElementsByTagName("img");
function tick() {
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str[i] + ".png";
}
}
setInterval(tick, 1000);
tick();
};
```
## 获取系统时间
### Date 对象
### `getHours`,`getMinutes`,`getSeconds`
## 显示系统时间
```javascript
var oDate = new Date();
console.log(oDate.getFullYear()); // 年
console.log(oDate.getMonth()); // 月+1
console.log(oDate.getDate()); // 日期, 第几号
console.log(oDate.getDay()); // 周几
```
### 字符串连接
### 空位补零
## 设置图片路径(注意兼容性)
### 字符串可以像数组那样取值吗？
```javascript
var str = "I love China!!!";
console.log(str[0]);
console.log(str[1]);
console.log(str[2]);
console.log(str[3]);
```
charAt 的使用
```html
<!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>
<script>
window.onload = function() {
var str = "hello world";
alert(str.charAt(0));
alert(str.charAt(1));
};
</script>
</body>
</html>
```
解决兼容性问题
遍历字符串时的代码需要修改一下
```javascript
var oDate = new Date();
var str =
toDouble(oDate.getHours()) +
toDouble(oDate.getMinutes()) +
toDouble(oDate.getSeconds());
console.log(str);
console.log(str.length);
for (var i = 0; i < str.length; i++) {
aImg[i].src = "img/" + str.charAt(i) + ".png";
}
```
## 如何获取年月日?
```javascript
var oDate = new Date();
console.log(oDate.getFullYear());
console.log(oDate.getMonth());
console.log(oDate.getDate());
console.log(oDate.getDay());
```
# 延时提示框
## 效果展示
## 具体方法
先写 html
```html
<!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 {
float: left;
margin: 10px;
}
#div1 {
width: 50px;
height: 50px;
background: red;
}
#div2 {
width: 250px;
height: 180px;
background: #ccc;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
```
再写移入移出隐藏
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.onmouseover = function() {
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function() {
oDiv2.style.display = "none";
};
};
```
需要给 div1 移出时加上延迟效果
```javascript
oDiv1.onmouseout = function() {
setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
```
移到 div2 上以后, 需要取消定时, 添加`div2`的`onmouseover`函数
完整 js 代码如下
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = function() {
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
oDiv2.onmouseover = function() {
clearTimeout(timer);
};
};
```
但是移出时,div2 需要消失...
需要添加`div2`的`onmouseout`函数
```javascript
oDiv2.onmouseout = function() {
oDiv2.style.display = "none";
};
```
从 div2 向 div1 移入时, 会闪一下...
所以, div2 移出时, 也需要有延迟
现在需要给`div2`的`onmuseout`函数, 添加延迟
同时移入`div1`时, 延迟需要关掉, 完整的 js 代码如下:
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
oDiv2.onmouseover = function() {
clearTimeout(timer);
};
oDiv2.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
};
```
## 简化代码(代码合并)
合并`div1`和`div2`的`onmouseout`
js 完整代码如下
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv2.onmouseout = oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
oDiv2.onmouseover = function() {
clearTimeout(timer);
};
};
```
合并`div1`和`div2`的`onmouseover`
不过需要加一行代码, 让他们一样
完整 js 代码如下
```javascript
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var timer = null;
oDiv2.onmouseover = oDiv1.onmouseover = function() {
clearTimeout(timer);
oDiv2.style.display = "block";
};
oDiv2.onmouseout = oDiv1.onmouseout = function() {
timer = setTimeout(function() {
oDiv2.style.display = "none";
}, 500);
};
};
```
- 每日单词
- JavaScript 入门
- JavaScript 基础
- JavaScript 基础回顾
- JavaScript 函数
- 匿名函数,多维数组,数据类型转换
- JavaScript 类型转换, 变量作用域
- js 运算符(一)
- js 运算符(二)
- js 流程控制语句
- JavaScript 扫盲日
- JavaScript 牛刀小试(一)
- JavaScript 牛刀小试(二)
- JavaScript 再谈函数
- JavaScript-BOM
- JavaScript-定时器(一)
- JavaScript-定时器(二)
- 番外-轮播图源码
- JavaScript 轮播图和 DOM 简介
- JavaScript-DOM 基础-NODE 接口-属性
- JavaScript-DOM 基础-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 节点
- CSS 复习与扩展(一)
- CSS 复习与扩展(二)
- 走进 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高级
- jquery 备忘清单-1
- jquery 备忘清单-2
- 聊聊 json
- jquery 备忘清单-3