显示时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script>
function toDob(n){
if(n<9){
return '0'+n;
}else{
return n;
}
}
function show(){
var date1 = new Date();
var div1 = document.getElementById('div1');
var h = toDob(date1.getHours());
var m = toDob(date1.getMinutes());
var s = toDob(date1.getSeconds());
div1.innerHTML=h+':'+m+':'+s;
}
window.onload=function(){
setInterval(show,1000);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
延时提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>延时提示框</title>
<style>
#div1{width: 50px;height: 50px; background-color: #0000FF;float: left;cursor: pointer;}
#div2{width: 200px;height: 200px; background-color: brown;float: left;margin-left: 20px;display: none;cursor: pointer}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var time = null;
//简化代码写法,即不同的事件可以设置相同的函数
div2.onmouseover = div1.onmouseover=function(){
clearTimeout(time);
div2.style.display='block';
}
div2.onmouseout = div1.onmouseout=function(){
time = setTimeout(function(){
div2.style.display='none';
},500);
}
/*
//鼠标移入div1时,div2显示
div1.onmouseover=function(){
clearTimeout(time);
div2.style.display='block';
}
//鼠标移出div1时,div2消失
div1.onmouseout=function(){
time = setTimeout(function(){
div2.style.display='none';
},500);
}
//鼠标移入div2时,div2不消失
div2.onmouseover = function(){
clearTimeout(time);
}
//鼠标移出div2时,div2消失
div2.onmouseout = function(){
time=setTimeout(function(){
div2.style.display='none';
},500);
}
*/
</script>
</html>