HTML——功能案例②

1. 全局css

*::before,
*::after{
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/
    box-sizing: border-box;
    /*兼容性问题 更加健壮*/
    -webkit-box-sizing: border-box;
    /*点击高亮效果的清除*/
    tap-highlight-color:transparent;
    -webkit-tap-highlight-color:transparent;
}

2. scroll系列

部分代码

<input type="button" value="显示效果" id="btn"/>
<script src="common.js"></script>
<script>

//  my$("btn").onclick=function () {
//    console.log(my$("dv").offsetWidth);
//    console.log(my$("dv").offsetHeight);
//  };

  /*
  * 元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置)
  * offset系列:
  * offsetLeft:距离左边位置的值
  * offsetTop:距离上面位置的值
  * offsetWidth:元素的宽(有边框)
  * offsetHeight:元素的高(有边框)
  *
  * scroll系列:卷曲---滚出去
  *
  * scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
  * scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高
  *
  * */
//my$("btn").onclick=function () {
//  //console.log(my$("dv").offsetWidth);//元素的宽,有边框
//  //console.log(my$("dv").offsetHeight);//元素的高,有边框
//
//  //console.log(my$("dv").scrollWidth);//元素中内容的实际的宽
//  //console.log(my$("dv").scrollHeight);//元素中内容的实际的高
//  console.log(my$("dv").scrollTop);//向上卷曲出去的距离
//  console.log(my$("dv").scrollLeft);//向左卷曲出去的距离
//};

  //时时的获取向上卷曲出去的距离的值

  //div的滚动事件
  my$("dv").onscroll=function () {
    console.log(this.scrollTop);
  };

3. 动画函数列表

<script src="common.js"></script>
  <script>
    //点击按钮移动div

    my$("btn1").onclick = function () {
      animate(my$("dv"), 400);
    };
    my$("btn2").onclick = function () {
      animate(my$("dv"), 800);
    };

    //匀速动画
    function animate(element, target) {
      //清理定时器
      clearInterval(element.timeId);
      element.timeId = setInterval(function () {
        //获取元素的当前位置
        var current = element.offsetLeft;
        //移动的步数
        var step = 10;
        step = target > current ? 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);
    }
  </script>

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

<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//  my$("btn").onclick=function () {
//    //获取元素距离左边位置的值
//    //console.log(my$("dv").offsetLeft);
//
//    //谷歌,火狐支持
//    //console.log(window.getComputedStyle(my$("dv"),null).left);
//
//    //console.log(window.getComputedStyle(my$("dv"),null)["left"]);
//    //IE8支持
//    //console.log(my$("dv").currentStyle.left);
//  };

  //获取任意一个元素的任意一个样式属性的值

//  function getStyle(element,attr) {
//    //判断浏览器是否支持这个方法
//    if(window.getComputedStyle){
//      return window.getComputedStyle(element,null)[attr];
//    }else{
//      return element.currentStyle[attr];
//    }
//  }

  function getStyle(element,attr) {
    //判断浏览器是否支持这个方法
   return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
  }

my$("btn").onclick=function () {
  console.log(getStyle(my$("dv"),"top"));
};

//  var obj={
//    sayHi:function () {
//      console.log("哈哈");
//    }
//  };
//
//  if(obj.sayHi){
//
//  }
</script>

5. 变速动画函数封装增加任意多个属性

<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
  //点击按钮,改变宽度到达一个目标值,高度到达一个目标值

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }

  function animate(element,json) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;//默认,假设,全部到达目标
      for(var attr in json){
        //获取元素这个属性的当前的值
        var current=parseInt(getStyle(element,attr));
        //当前的属性对应的目标值
        var target=json[attr];
        //移动的步数
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;//移动后的值
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        //清理定时器
        clearInterval(element.timeId);
      }

      //测试代码
      console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
    },20);
  }

  my$("btn1").onclick=function () {

      animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80});
  };
//回调函数
/*my$("btn1").onclick=function () {

    var json1={"width":400,"height":500,"left":500,"top":80};
      animate(my$("dv"),json1,function () {
        var json2={"width":40,"height":50,"left":50,"top":800};
        animate(my$("dv"),json2,function () {
          var json3={"width":450,"height":550,"left":550,"top":600};
          animate(my$("dv"),json3);
        });
      });
  };*/
//zIndex:1000
  //透明度: 数字类型----小数---放大100倍
 /* my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };*/

</script>

6. 数组中的方法

 <script>

    var arr=[10,20,30,40,50];
    //把第一个元素的值删除,追加到数组的最后
//    arr.push(arr.shift());
//    console.log(arr);
//    arr.push(arr.shift());
//    console.log(arr);
//    arr.push(arr.shift());
//    console.log(arr);
//    arr.push(arr.shift());
//    console.log(arr);
//    arr.push(arr.shift());
//    console.log(arr);


    arr.unshift(arr.pop());
    console.log(arr);
    arr.unshift(arr.pop());
    console.log(arr);
    arr.unshift(arr.pop());
    console.log(arr);
    arr.unshift(arr.pop());
    console.log(arr);
    arr.unshift(arr.pop());
    console.log(arr);
  </script>

7. client系列

  <script>
    /*
    * offset系列:获取元素的宽,高,left,top, offsetParent
    * offsetWidth:元素的宽,有边框
    * offsetHeight:元素的高,有边框
    * offsetLeft:元素距离左边位置的值
    * offsetTop:元素距离上面位置的值
    *
    * scroll系列:卷曲出去的值
    * scrollLeft:向左卷曲出去的距离
    * scrollTop:向上卷曲出去的距离
    * scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框
    * scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框
    *
    *
    * client系列:可视区域
    * clientWidth:可视区域的宽(没有边框),边框内部的宽度
    * clientHeight:可视区域的高(没有边框),边框内部的高度
    * clientLeft:左边边框的宽度
    *clientTop :上面的边框的宽度
    * */
  </script>