码迷,mamicode.com
首页 > 其他好文 > 详细

setInterval和clearInterval应用小实例

时间:2016-12-05 22:42:22      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:orm   minutes   clock   use   fse   out   html   ack   css   

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>水平动态伸缩</title>
<link rel="stylesheet" href="水平动态伸缩.css">
<script>
window.onload=function(){
var aa=document.getElementsByTagName("a");
for(var i=0;i<aa.length;i++){
aa[i].onmouseover=function() {
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth + 8 + "px";
if (This.offsetWidth >= 160) {
clearInterval(This.time)
}
}, 30)
}

aa[i].onmouseout=function() {
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth - 8 + "px";
if (This.offsetWidth <= 120) {
This.style.width = "120px";
clearInterval(This.time)
}
}, 30)
}
}
}
</script>
</head>
<body>
<ul>
<li><a class="on" href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">金融</a></li>
</ul>
</body>
</html>

定时器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时器</title>
<style>
.time {
padding:20px;
background-color: lightcoral;
border:3px solid #ff6600;
}
</style>
<script type="text/javascript">
var attime;
function clock(){
var time=new Date();
attime = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
document.getElementById("clock").value=attime;
}
setInterval(clock,100);
</script>
</head>
<body>
<div class="time">
<form>
<input type="text" id="clock" size="20"/>
</form>
</div>
</body>
</html>









setInterval和clearInterval应用小实例

标签:orm   minutes   clock   use   fse   out   html   ack   css   

原文地址:http://www.cnblogs.com/liufangdekele/p/6135622.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!