您的位置：首页 > Web前端 > JavaScript
js笔记（9）之定时器&&数字时钟&&延时提示框

2016-04-02 20:57 417 查看
定时器
function show(){
alert('a');
}
setInterval(show,1000); 函数，毫秒（间隔型、无限次执行）
setTimeout(show,1000);             (延时型、只执行一次)

clearInterval
clearTimeout

------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器的开启和关闭</title>
<script type="text/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');
},1000);
}
oBtn2.onclick = function(){
clearInterval(timer);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开启" />
<input id="btn2" type="button" value="关闭" />
</body>
</html>
----------------------------------------------------------------------
获取当前时间

var oDate = new Date();
alert(getHours());
getMinutes();
getSeconds();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数码时钟</title>
<style type="text/css">

</style>
<script type="text/javascript">
function toDou(n){
if(n < 10)
return '0' + n;
else return '' + n;
}
window.onload = function(){
var aImg = document.getElementsByTagName('img');
function tick(){
var oDate = new Date();
var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) +toDou(oDate.getSeconds());
for(var i = 0;i < aImg.length;i++){
aImg[i].src = 'img/'+str.charAt(i)+'.jpg';
}
}
setInterval(tick,1000);
tick();
}
</script>
</head>
<body style="background: #262626; color: white; font-size: 50px" >
<img src="img/0.jpg">
<img src="img/0.jpg">
:
<img src="img/0.jpg">
<img src="img/0.jpg">
:
<img src="img/0.jpg">
<img src="img/0.jpg">
</body>
</html>
-------------------------------------------------------------------------------

获取年月日

var oDate = new Date();
oDate.getFullYear();//年
oDate.getMonth()+1;//月
oDate.getDate();//哪一天
oDate.getDay();//当前星期几
---------------------------------------------------------------------------------
延时提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>延时提示框</title>
<style type="text/css">
div{
float: left;
margin: 10px;
}
#div1{
width: 50px;
height: 50px;
background: red;
}
#div2{
width: 250px;
height: 180px;
background: #CCC;
display: none;
}
</style>
<script type="text/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);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
---------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>延时提示框之函数合并</title>
<style type="text/css">
div{
float: left;
margin: 10px;
}
#div1{
width: 50px;
height: 50px;
background: red;
}
#div2{
width: 250px;
height: 180px;
background: #CCC;
display: none;
}
</style>
<script type="text/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);
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航