JavaScript学习记录十一

另一个定时器-------一次性的定时

    window.onload=function () {
      //一次性的定时器
      var timeId=window.setTimeout(function () {
        alert("您好");
      },1000);

      //点击这个按钮,停止这个一次性的定时器
      document.getElementById("btn").onclick=function () {
        clearTimeout(timeId);
      };
    };

案例：定时器阅读协议

<textarea name="texta" id="" cols="30" rows="10">
  这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>

  var time=5;
 var timeId= setInterval(function () {

    time--;
   my$("btn").value="请仔细阅读协议("+time+")";
    if(time<=0){
      //停止定时器就可以
      clearInterval(timeId);
      //按钮可以被点击了
      my$("btn").disabled=false;
      my$("btn").value="同意";
    }

  },1000);
</script>

案例：透明度渐变

<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {
    var opacity=10;
    //按钮的点击事件
    var timeId=setInterval(function () {
      //透明化了
      opacity--;
      if(opacity<=0){
        clearInterval(timeId);//清理定时器
      }
      //设置div的透明度
      my$("dv").style.opacity=opacity/10;
    },200);

案例：修改宽度实现loading的效果

<input type="button" value="变宽" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  my$("btn").onclick = function () {
    var width = 200;
    var timeId = setInterval(function () {
      width+=10;
      if(width==800){
        clearInterval(timeId);
      }
      my$("dv").style.width=width+"px";
    }, 20);
  };
</script>

案例：移动div

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

<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
  //点击第一个按钮移动到400px

  my$("btn1").onclick = function () {
    //一会要清理定时器(只产生一个定时器)
   var timeId= setInterval(function () {
      //获取div的当前的位置
      var current = my$("dv").offsetLeft;//数字类型,没有px
      //div每次移动多少像素---步数
      var step = 9;
      //每次移动后的距离
      current += step;
     //判断当前移动后的位置是否到达目标位置
      if(current<=400){
        my$("dv").style.left=current+"px";
      }else{
        //清理定时器
        clearInterval(timeId);
      }
    }, 20);
  };

上个案例移动方法的封装第二版

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

上个案例移动方法的封装第三版

    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";
        }
      }, 20);
    }

获取元素的位置信息

    *在style标签中设置的样式属性获取不到
    *style属性中设置的样式属性是可以获取到的
    *获取元素的样式,无法获取。

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

    //没有脱离文档流:
    *
    * offsetLeft:父级元素margin+父级元素padding+父级元素的border+自己的margin

    * 脱离文档流了

    *position: absolute;
    * 主要是自己的left和自己的margin

  my$("btn").onclick=function () {
    console.log(my$("dv1").style.width);
    console.log(my$("dv1").style.height);

    //以后获取元素的宽和高,应该使用offset系列来获取
   console.log(my$("dv1").offsetWidth);
   console.log(my$("dv1").offsetHeight);
    console.log(my$("dv1").offsetLeft);
    console.log(my$("dv1").offsetTop);
  };

通过document直接获取元素

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

案例：图片跟着鼠标飞

<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";

 

案例：动态轮播图三部曲，不难是不难但是css看的好麻烦啊

     *第一步：实现点击图片下的按钮，图片更换

  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 730px;
      height: 454px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 730px;
      height: 454px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }

    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .inner li {
      float: left;
    }

    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }

    .square span.current {
      background-color: orangered;
      color: #fff;
    }

  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner"><!--相框-->
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
    </ul>
    <div class="square">
      <span class="current">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </div>
</div>
<script src="common.js"></script>
<script>
  //获取最外面的div
  var box=my$("box");
  //获取相框
  var inner=box.children[0];
  //获取相框的宽度
  var imgWidth=inner.offsetWidth;
  //获取ul
  var ulObj=inner.children[0];
  //获取所有的span标签
  var spanObjs=inner.children[1].children;
  //循环遍历所有的span标签,注册鼠标进入的事件
  for(var i=0;i<spanObjs.length;i++){
    //循环的时候把索引值保存在每个span的自定义属性中
    spanObjs[i].setAttribute("index",i);
    //注册鼠标进入事件
    spanObjs[i].onmouseover=function () {
      //先干掉所有的span的背景颜色
      for(var j=0;j<spanObjs.length;j++){
        //移除了每个span的类样式
        spanObjs[j].removeAttribute("class");
      }
      //设置当前的span的背景颜色
      this.className="current";
      //移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
      //获取当前鼠标进入的span的索引
      var index=this.getAttribute("index");
      animate(ulObj,-index*imgWidth);
    };
  }
  //设置任意的一个元素,移动到指定的目标位置
  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";
      }
    }, 20);

  *点击左右焦点更换图片

  <style>
    body, ul, ol, li, img {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #box {
      width: 520px;
      height: 280px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }

    .ad {
      width: 520px;
      height: 280px;
      overflow: hidden;
      position: relative;
    }

    #box img {
      width: 520px;
    }

    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }

    .ad ol li.current {
      background: yellow;
    }

    .ad ul li {
      float: left;
    }

    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }

    .ad ul li.current {
      display: block;
    }

    #focusD {
      display: none;
    }

    #focusD 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;
    }

    #focusD #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div id="box" class="all">
  <div class="ad">
    <ul id="imgs">
      <li><img src="images/01.jpg"/></li>
      <li><img src="images/02.jpg"/></li>
      <li><img src="images/03.jpg"/></li>
      <li><img src="images/04.jpg"/></li>
      <li><img src="images/05.jpg"/></li>
    </ul>
  </div><!--相框-->
  <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
  </div>
</div>
<script src="common.js"></script>
<script>

  //获取最外面的div
  var box = my$("box");
  //获取相框
  var ad = box.children[0];
  //获取相框的宽度
  var imgWidth = ad.offsetWidth;
  //获取ul
  var ulObj = ad.children[0];
  //获取左右焦点的div
  var focusD = my$("focusD");

  //显示和隐藏左右焦点的div----为box注册事件
  box.onmouseover = function () {
    focusD.style.display = "block";
  };
  box.onmouseout = function () {
    focusD.style.display = "none";
  };


  //点击右边按钮
  var index=0;
  my$("right").onclick = function () {
    if(index<ulObj.children.length-1){
      index++;
      animate(ulObj,-index*imgWidth);
    }

  };
  //点击左边按钮
  my$("left").onclick = function () {
    if(index>0){
      index--;
      animate(ulObj,-index*imgWidth);
    }
  };


  //设置任意的一个元素,移动到指定的目标位置
  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";
      }
    }, 20);
  }

     *自动轮播实现

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;

    }

    img {
      vertical-align: top;
    }

    /*取消图片底部3像素距离*/
    .box {
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
    }

    .box ul li {
      float: left;
    }

    .box ul {
      width: 1500px;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<div class="box" id="screen">
  <ul>
    <li><img src="imagess/01.jpg" alt=""/></li>
    <li><img src="imagess/02.jpg" alt=""/></li>
    <li><img src="imagess/03.jpg" alt=""/></li>
    <li><img src="imagess/04.jpg" alt=""/></li>
    <li><img src="imagess/01.jpg" alt=""/></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  var current = 0;//只声明了一次
  function f1() {
    var ulObj = my$("screen").children[0];
    current -= 10;

    if (current < -1200) {
      ulObj.style.left = 0 + "px";
      current = 0;
    } else {
      ulObj.style.left = current + "px";
    }


  }

  var timeId=setInterval(f1, 20);


  my$("screen").onmouseover=function () {
    //停止
    clearInterval(timeId);
  };
  my$("screen").onmouseout=function () {
    //继续
    timeId=setInterval(f1, 20);
  };

最后揉到一块就是一个完整的前台动态轮播图了。