关键词：定时器、清除定时器、Date对象、charAt()
定时器：间隔性(setInterval)、延时性(setTimeout);
清除定时器：clearInterval(name),name为需要关闭的定时器的名称；对应的还有clearTimeout;
Date(): 包括getHours(),getMinutes(),getSeconds(),getFullYear(),getMonth(),getDate(),getDay()，其中getMonth()获取的月份是从0开始的；
charAt: 兼容低版本的获取元素的方法，比如获取str中第i位元素：str[i]=str.charAt(i);
测试题
延时提示框（如何实现）
这个是延长提示的实际应用.png
代码演示
<!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 lang="">
.box{
width: 350px;
height: 200px;
}
#left{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
display: none;
}
#right{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div id="left"></div>
<div id="right"></div>
</div>
<script>
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
var timer = null;
// oRight.onmouseover = function(){
// clearTimeout(timer); // 防止鼠标离开左边 div 的时候 div 消失
// oLeft.style.display = 'block'
// };
// oRight.onmouseout = function(){
// timer = setTimeout(function(){
// oLeft.style.display = 'none'
// },500)
// };
// oLeft.onmouseover = function(){
// clearTimeout(timer)
// };
// oLeft.onmouseout = function(){
// timer = setTimeout(function(){
// oLeft.style.display = 'none'
// },500)
//简化代码 合并 mouseover 和 mouseout
oRight.onmouseover = oLeft.onmouseover = function () {
clearTimeout(timer); // 防止鼠标离开左边 div 的时候 div 消失
oLeft.style.display = 'block'
};
oRight.onmouseout = oLeft.onmouseout = function () {
timer = setTimeout(function () {
oLeft.style.display = 'none'
}, 500)
};
</script>
</body>
</html>
网友评论