js-API 一次性定时器 offset系列 与及相关案例

一次性定时器

• 第一种定时器

 //常用的,反复的执行
//    window.setInterval(function () {
//      alert("哈哈");
//    },1000);

    //window.clearInterval(定时器id);//清理定时器

• 另一种定时器

第一个参数函数 第二参数 时间

返回值是id 可以用变量来接收

window.setTimeout(函数,时间);

清理定时器

clearTimeout(timeId);

需要清楚掉 因为执行完了，没有清理这个定时会一致占空间

所以用完需要给予清除

协议中按钮禁用

注意方法使用 （）什么的

属性使用对象.属性= 什么的

首先先设置一个时间

设置定时器当 时间满足什么条件时 设置相应的设置，

不满足时清楚定时器

案例div渐变效果 慢慢的消失

思路

消失的属性跟opacity相关 每隔一段时间opacity 减少

先设置opacity的属性 设置为 10 设置成小数不好操作

后面在除10就可以了

div的宽度变长

还是同样的套路 需要设置一个变量 width 每隔一段时间加一定长度

具体实现在js第五天案例

document.getElementById(“dv”).style.width = width + “px”;

注意这边需要加上px字符串的拼接

移动的元素

//div要移动,要脱离文档流---position:absolute
  //如果样式的代码是在style的标签中设置,外面是获取不到
  //如果样式的代码是在style的属性设置,外面是可以获取
  //获取div的当前位置
  //console.log(my$("dv").offsetLeft);

• 所以使用offsetLeft可以获取到当前元素的位置 获取元素距离左边的距离
• 宽 offsetWidth offsetHight offsetTop获取元素距离顶部的位置

这几种方式获取到的都是数字

使用的方式如下

var current = my$("dv").offsetLeft;

Math.abs()可以获取绝对值

• 封装的动画函数 左右移动

  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);
          }
  

防止重复点击按钮 造成一个时间拥有很多的定时器的问题

就是在设置定时器 前 clearInterval(element.timeId);清除定时器

就可以le

轮播图

在案例里面 有详细的代码 会使用就好了 js5 里面

等js复习完了 轮播图敲三遍

offset系列

三个大的系列

三组属性

1 . offset系列中的属性

offsetWidth:获取元素的宽
* offsetHeight:获取元素的高
* offsetLeft:获取元素距离左边位置的值
* offsetTop:获取元素距离上面位置的值

//没有脱离文档流:
    /*
    *
    * offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin
    *
    *
    * 脱离文档流了
    * 主要是自己的left和自己的margin
    * */
    //子级元素的

一种是脱离文档流的 一种是 没有脱离文档流的

####直接通过document获取元素

<script>
    //获取body
    console.log(document.body); //获取的是元素--标签
    //获取title
    console.log(document.title); //标签中的值
    document.title = "嘎嘎去";
    //获取html
    console.log(document.documentElement);
</script>

document.documentElement 获取的是html

document.title 获取的是标签中值

document.body 获取的是元素 --标签

图片跟着鼠标飞

鼠标需要在整个页面中进行移动 需要需要使用document进行注册

<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
  //鼠标在页面中移动,图片跟着鼠标移动
  document.onmousemove=function (e) {
    //鼠标的移动的横纵坐标
    //可视区域的横坐标
    //可视区域的纵坐标
    my$("im").style.left=e.clientX+"px";
    my$("im").style.top=e.clientY+"px";
  };
</script>

onmousemove 鼠标移动事件

e.clientX e.clientY

这两个可以返回当前鼠标的坐标

使用left 图片需要使用绝对定位

通过调用函数 自己封装的那个进行编写就可以了

获取元素计算后的样式属性值