JS定时器应用
- 题目来源:B站JS从入门到精通视频
1.建议动态时钟
题目描述
通过定时器根据系统刷新显示时间。
题目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background: black;
font-size:50px;
color:white;
}
</style>
<script>
function toDouble(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=toDouble(odate.getHours())+toDouble(odate.getMinutes())+toDouble(odate.getSeconds());
//alert(odate.getHours())
for(var i=0;i<aimg.length;i++){
aimg[i].src='img/'+str.charAt(i)+'.png';
}
}
setInterval(tick,1000);
tick();
}
</script>
<title></title>
</head>
<body>
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
:
<img src="img/0.png"/>
<img src="img/0.png"/>
</body>
</html>
- charAt(i)解决str[i]的兼容性问题
- 通过单独执行一遍tick()函数使得开始运行时不会有全零出现。
延迟显示
题目描述
移入元素A,延迟显示元素B;移出元素A,延迟消失元素B;移入元素B,元素B保持显示;移出至空白处,元素B消失。
题目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {float:left;margin:10px}
#div1 {width:50px;height:50px;background:red;}
#div2 {width:200px; height:180px;background:blue;display:none}
</style>
<script>
window.onload=function(){
var odiv1=document.getElementById("div1");
var odiv2=document.getElementById("div2");
odiv1.onmouseover=function(){
odiv2.style.display="block";
clearTimeout(time2);
}
odiv1.onmouseout=function(){
time1=setTimeout(function(){odiv2.style.display="none"},500);
}
odiv2.onmouseover=function(){
odiv2.style.display="block";
clearTimeout(time1);
}
odiv2.onmouseout=function(){
time2=setTimeout(function(){odiv2.style.display="none"},500);
}
}
</script>
<title></title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
- 移入元素B时,需要关闭定时器以防其消失;从B移入A同理。
3.无缝滚动效果
题目描述
实现几幅图片的无缝滚动效果,并使得运动方向可控以及鼠移入移出的暂停开始。
题目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {margin:0; padding:0;}
#div1 {width:712px;height:108px;margin:50px auto;position:relative;background:red;overflow:hidden}
#div1 ul{position:absolute;left:0;top:0;}
#div1 ul li {float:left;width:178px; height:108px;list-style: none;}
a {font-size: 30px;margin:200px}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var oLi=oDiv.getElementsByTagName("li");
var oa=document.getElementsByTagName("a");
var speed=2
oa[0].onclick=function(){
speed=-2;
}
oa[1].onclick=function(){
speed=2;
}
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=oLi.length*oLi[0].offsetWidth+'px';
function move(){
if (oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+'px';
}
if (oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer=setInterval(move,30);
oDiv.onmouseover=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
}
</script>
<title></title>
</head>
<body>
<a href="javascript:;">left</a>
<a href="javascript:;">right</a>
<div id="div1">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
</ul>
</div>
</body>
</html>
- 通过像素加减控制滚动方向
- 无缝效果通过重复两组相同图片,以关键位置的瞬移实现。