【重温JS】JavaScript 巩固基础day19-运动函数封装☆☆☆ 今天学习的内容: 开始学习**( 运动函数封

这是我参与8月更文挑战的第19天，活动详情查看：8月更文挑战

☆☆☆ 今天学习的内容: ( 运动函数的封装 ) !重要! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、梳理复习昨天知识点

1、严格模式 "use strict" 变量定义 var 八进制被禁用函数必须声明在最顶端 arguments 和形参不同
2、let 关键字块级作用域 { }
3、改变 this 指向: bind() apply() call()
4、for of 和 for in
5、定义常量关键字 const
6、解构赋值 [] {}
7、字符串模板 ${ 变量或函数 }
8、箭头函数 () => {} (a,b)=>{ return a + b }
9、将具有 length 属性的伪数组转成数组 Array.from
10、set 集合自动去重不会有类型转换数组去重 Array.from( new Set([8,8,8,]) ) [...new Set([])] Map 集合 var map = new Map() map.set("name","jack")
11、Symbol 类型

      var name = Symbol();
      var json = {
           sex ： ""
      }
      json[name] = "lichune"

运动函数封装

// obj 操作的元素
// json 参数为要操作的属性和目标值键--属性值--目标值
// callback 回调函数
// flag 开关变量当值为 true 时，表示所有的动作都执行完毕，可以关掉定时器，也可以进入下一个动作

var flag //开关变量  当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
function startMove(obj, json, callback) {
  //attr表示要操作的属性
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    flag = true
    var current = 0
    for (var attr in json) {
      if (attr == 'opacity') {
        //操作透明度
        //获取透明度的样式值
        current = parseFloat(getStyle(obj, attr)) * 100
      } else if (attr == 'zIndex') {
        current = parseInt(getStyle(obj, attr)) //接收当前元素的样式值
      } else {
        current = parseInt(getStyle(obj, attr)) //接收当前元素的样式值
      }
      var speed = (json[attr] - current) / 10
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
      if (current != json[attr]) {
        //动作完成后的条件
        flag = false //当目标值和当前的样式值 不相等时  ， 将开关变量值关闭 false
      } //定时器开启时  不停的改变元素的样式
      if (attr == 'opacity') {
        obj.style.opacity = (current + speed) / 100
      } else if (attr == 'zIndex') {
        obj.style.zIndex = json[attr]
      } else {
        obj.style[attr] = current + speed + 'px'
      }
    } // 循环结束后判断flag的值，当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
    if (flag) {
      clearInterval(obj.timer) // 上一个动作完成后 就开启下一个动作的执行    调用callback //判断 callback是否存在 存在就调用
      if (callback) {
        callback()
      }
    }
  }, 30)
}

获取样式值函数

function getStyle(obj, attr) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(obj, false)[attr]
  } else {
    return obj.currentStyle[attr]
  }
}

运动实现

匀速运动 --- 缓冲运动 --- 多物体运动 --- 链式运动 --- 完美运动

抛物线运动、圆周运动

多物体运动-需要各自拥有各自的定时器,互不干扰

缓冲运动 - -- 速度是可变的：

应用: 轮播图上的运用.

原理：

var speed = (target - oDiv.offsetLeft) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)

多物体运动：关键让每一个物体运动时定时器是独立的互相不产生干扰

解决：将每一个运动的对象添加一个属性，属性值就是一个定时器

多物体运动函数封装:

function move(obj, target) {
  clearInterval(obj.timer)
  obj.timer = setInterval(function () {
    var speed = (target - obj.offsetLeft) / 8
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
    if (target == obj.offsetLeft) {
      clearInterval(obj.timer)
    } else {
      obj.style.left = obj.offsetLeft + speed + 'px'
    }
  }, 30)
}

获取非行内元素样式值 >有兼容问题<

function getStyle(obj, attr) {
  return window.getComputedStyle
    ? window.getComputedStyle(obj, false)[attr]
    : obj.currentStyle[attr]
}

预告: 加油, 追梦人

【预告】: 接下来学习 js 运动函数封装-链式运动, 争取学到必知必会的吧..

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!

【重温JS】JavaScript 巩固基础day19-运动函数封装

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中