<!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>