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

定时器、offset系列、document获取元素

时间:2020-10-22 22:12:24      阅读:13      评论:0      收藏:0      [点我收藏+]

标签:mon   UNC   bsp   index   abs   eth   tar   ber   javascrip   

定时器

BOM中的定时器
setInterval()

页面加载完毕后过了指定的之间后执行

该定时器循环执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //BOM中有两个定时器---计时器
  </script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>
  //定时器
  //参数1:函数  参数2:时间 单位毫秒
?
  //执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....
  //返回值就是定时器的id值
  var timeId = window.setInterval(function () {
    alert("hello");//断言
  }, 1000);
  document.getElementById("btn").onclick = function () {
    //点击按钮,停止定时器
    //参数:要清理的定时的id的值
    window.clearInterval(timeId);
  };
</script>
?
</body>
</html>
setTimeout()

一次性的定时器,只执行一次

但是用完需要清理,因为占空间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //另一个定时器-------一次性的定时
      
    //页面加载后
    window.onload=function () {
      //一次性的定时器
      var timeId=window.setTimeout(function () {
        alert("您好");
      },1000);
?
      //点击这个按钮,停止这个一次性的定时器
      document.getElementById("btn").onclick=function () {
        clearTimeout(timeId);
      };
    };
?
  </script>
</head>
<body>
<input type="button" value="停下" id="btn"/>
<script>
</script>
</body>
</html>

 

定时器案例

元素的移动

offsetLeft 获取元素当前的位置:使用offset的方式可以避免style中的值获取不到的情况

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
?
    * {
      margin: 0;
      padding: 0;
    }
?
    input {
      margin-top: 20px;
    }
?
    div {
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取
  //获取div的当前位置
  //console.log(my$("dv").offsetLeft);
?
  //点击第一个按钮移动到400px
?
  my$("btn1").onclick = function () {
    animate(my$("dv"), 400);
  };
  //点击第二个按钮移动到800px
?
  my$("btn2").onclick = function () {
    animate(my$("dv"), 800);
  };
  //动画函数---任意一个元素移动到指定的目标位置
  function animate(element, target) {
    //先清理定时器
    clearInterval(element.timeId);
    //一会要清理定时器(只产生一个定时器)
    element.timeId = setInterval(function () {
      //获取div的当前的位置
      var current = element.offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 10;
      step = current < target ? step : -step;
      //每次移动后的距离
      current += step;
      //判断当前移动后的位置是否到达目标位置
      if (Math.abs(target - current) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval( element.timeId );
        element.style.left = target + "px";
      }
    }, 20);
  }
</script>
</body>
</html>
轮播图案例?
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
?
    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }
?
    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
?
    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
?
    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }
?
    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
?
    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
?
    .all ol li.current {
      background: #DB192A;
    }
?
    #arr {
      display: none;
    }
?
    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: ‘黑体‘;
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }
?
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id=‘box‘>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="common.js"></script>
<script>
  //获取最外面的div
  var box = my$("box");
  //获取相框
  var screen = box.children[0];
  //获取相框的宽度
  var imgWidth = screen.offsetWidth;
  //获取ul
  var ulObj = screen.children[0];
  //获取ul中的所有的li
  var list = ulObj.children;
  //获取ol
  var olObj = screen.children[1];
  //焦点的div
  var arr = my$("arr");
?
  var pic = 0;//全局变量
  //创建小按钮----根据ul中的li个数
  for (var i = 0; i < list.length; i++) {
    //创建li标签,加入到ol中
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = (i + 1);
    //在每个ol中的li标签上添加一个自定义属性,存储索引值
    liObj.setAttribute("index", i);
    //注册鼠标进入事件
    liObj.onmouseover = function () {
      //先干掉所有的ol中的li的背景颜色
      for (var j = 0; j < olObj.children.length; j++) {
        olObj.children[j].removeAttribute("class");
      }
      //设置当前鼠标进来的li的背景颜色
      this.className = "current";
      //获取鼠标进入的li的当前索引值
      pic = this.getAttribute("index");
      //移动ul
      animate(ulObj, -pic * imgWidth);
    };
  }
  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";
?
?
  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));
?
  //自动播放
var timeId= setInterval(clickHandle,1000);
?
  //鼠标进入到box的div显示左右焦点的div
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠标进入废掉之前的定时器
    clearInterval(timeId);
  };
  //鼠标离开到box的div隐藏左右焦点的div
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠标离开自动播放
    timeId= setInterval(clickHandle,1000);
  };
  //右边按钮
  my$("right").onclick =clickHandle;
  function clickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
?
  };
  //左边按钮
  my$("left").onclick = function () {
    if (pic == 0) {
      pic = 5;
      ulObj.style.left = -pic * imgWidth + "px";
    }
    pic--;
    animate(ulObj, -pic * imgWidth);
    //设置小按钮的颜色---所有的小按钮干掉颜色
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
?
  };
?
  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>
?
</body>
</html>
?

 

offset系列

获取元素的宽和高等位置数据

 //红色div的宽和高
  my$("btn").onclick=function () {
    //在style标签中设置的样式属性获取不到
    //style属性中设置的样式属性是可以获取到的
    //获取元素的样式,下面的方式废了
    console.log(my$("dv1").style.width);
    console.log(my$("dv1").style.height);
   
   // offsetWidth:获取元素的宽 + 边框
   console.log(my$("dv1").offsetWidth);
   // offsetHeight:获取元素的高 + 边框
   console.log(my$("dv1").offsetHeight);
?
   // 获取元素距离左边位置的值
    console.log(my$("dv1").offsetLeft);
   // 获取元素距离上面位置的值   
    console.log(my$("dv1").offsetTop);
  };
?

 

 

通过document获取元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>24kcs好帅哦</title>
?
</head>
<body>
<script>
  //获取body
  console.log(document.body);//获取的是元素--标签
  //获取title
  console.log(document.title);//标签中的值
  document.title="嘎嘎去";
  //获取html
  console.log(document.documentElement);
</script>
?
</body>
</html>

  

定时器、offset系列、document获取元素

标签:mon   UNC   bsp   index   abs   eth   tar   ber   javascrip   

原文地址:https://www.cnblogs.com/minnersun/p/13854347.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!