JS小项目实践-定时器应用

最新推荐文章于 2022-10-26 23:19:26 发布

莉亚小屋

最新推荐文章于 2022-10-26 23:19:26 发布

阅读量218

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/corneliawang/article/details/106769440

版权

web 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

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>

通过像素加减控制滚动方向
无缝效果通过重复两组相同图片，以关键位置的瞬移实现。

莉亚小屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS小项目实践-定时器应用

JS定时器应用题目来源：B站JS从入门到精通视频1.建议动态时钟题目描述通过定时器根据系统刷新显示时间。题目代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <style> body { background: black; font-size:50px; color:white; } </style> &
复制链接

扫一扫