JavaScript—DOM基础

最新推荐文章于 2023-08-09 21:19:03 发布

总会吃到鸡的

最新推荐文章于 2023-08-09 21:19:03 发布

阅读量120

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_42436355/article/details/96302710

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript—DOM基础

1.DOM节点
childNodes 子节点

function show() {
     alert('a')
   }
   setInterval(show,1000);   //方法一  setInterval  每隔一段时间触发一次
   
function show() {
     alert('a')
   }
   setTimeout(show,1000);   //方法二 setTimeout  只执行一次

2.定时器的开启和关闭
定时器只有开启和关闭两个状态，没有重启状态，关闭定时器分别有：clearInterval()、 clearTimeout()

window.onload=function () {
    let oBtn1=document.getElementById('btn1');
    let oBtn2=document.getElementById('btn2');
    let timer = null;
    oBtn1.onclick=function ()
    {
      timer = setInterval(function () {
        alert('a');
      },3000);
    };
    oBtn2.onclick=function ()
    {
      clearInterval(timer);
    };
  };

<body>
<input id="btn1" type="button" value="开启">
<input id="btn2" type="button" value="关闭">
</body>

3.延时提示框
本案例主要利用定时器的延时作用，让鼠标可以短时间内在两个Div之间任意移动。

 window.onload = function () {
   let oDiv1 = document.getElementById('div1');
   let oDiv2 = document.getElementById('div2');
   oDiv2.onmouseover =oDiv1.onmouseover = function () {
     oDiv2.style.display = "block";
     clearInterval(timer);
   };
   oDiv2.onmouseout = oDiv1.onmouseout = function () {
     let timer = setTimeout(function () {
       oDiv2.style.display = "none"
     }, 500);
   };
 }
<style>
  *{
    float:left;
    margin:10px;
  }
  #div1{
    width:50px;
    height:50px;
    background: darkred;
  }
  #div2{
    width:250px;
    height:180px;
    background: #CCCCCC;
    display: none;
  }
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

4.数码时钟
本案例主要利用 setInterval()，每隔一段时间调用一次，从而实现时钟的自动时间跳转。

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

5.无缝滚动
本案例主要利用短时间的快速移动，用障眼法的形式让两组图片在Div中来回移动，当一组图片小于或者大于offsetLeft 设定值时，立刻移动到起始位置。

<style>
    *{
      margin: 0;padding: 0;
    }
    #div1{
      width: 712px;
      height: 108px;
      margin: 100px 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;
    }
    #div1 ul li img{
      width: 178px;
      height: 108px;
    }
  </style>
  <script>
    window.onload = function () {
      let oDiv = document.getElementById('div1');
      let oUl = oDiv.getElementsByTagName('ul')[0];
      let aLi = oUl.getElementsByTagName('li');
      let speed = 2;
      oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
      oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

      function move() {
        if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
          oUl.style.left = '0';
        }
        if (oUl.offsetLeft > 0) {
          oUl.style.left = -oUl.offsetWidth / 2 + 'px';
        }
        oUl.style.left = oUl.offsetLeft + speed + 'px';
      };
      let timer = setInterval(move, 30);
      oDiv.onmouseover = function () {
        clearInterval(timer);
      };
      oDiv.onmouseout = function () {
        timer = setInterval(move, 30);
      };
      document.getElementsByTagName('a')[0].onclick = function () {
        speed = -2;
      };
      document.getElementsByTagName('a')[1].onclick = function () {
        speed = 2;
      };
    }
  </script>
</head>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
  <ul>
    <li><img src="images/1.png"></li>
    <li><img src="images/1.png"></li>
    <li><img src="images/1.png"></li>
    <li><img src="images/1.png"></li>
  </ul>
</div>
</body>

6.总结
1、定时器有两种setInterval(); 每隔一段时间触发一次 setTimeout(); 只触发一次，关闭这两个定时器分别要用到： clearInterval()和clearTimeout()。
2、一般网站上看到可以自己移动的东西，大多可以利用定时器实现。
3、定时器应用的范围很广泛：轮播图、数码时钟、延时提示等都需要用到定时器。
4、本章记录的是定时器的最基本使用。

总会吃到鸡的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—DOM基础

JavaScript—DOM基础1.DOM节点childNodes 子节点function show() { alert('a') } setInterval(show,1000); //方法一 setInterval 每隔一段时间触发一次 function show() { alert('a') } setTimeout(show...
复制链接

扫一扫