[TOC]

✊总有人要成为第一，为什么不是你。

2021年08月18日

工作重点

1 工作重点事项 进度 已完成
2 早上讲js超时定时器和循环定时器 已完成
- [x]

| | 3 | 下午讲js的匀速动画和缓慢动画 | 已完成 |
- [x]

| | 4 | 晚上做练习 | 已完成 |
- [x]

|

遇到的问题和解决思路

遇到的问题

  1. 有时候通过按钮触发定时器,多次点击时，速度会越来越快


  2. 解决思路

  3. 这是因为会叠加，所以每次触发定时器时，先清除定时器


  4. 今日总结

    (1)超时定时器

    <!DOCTYPE html>










    (2)循环定时器

    <!DOCTYPE html>










    (3)匀速动画

    <!DOCTYPE html>












    (4)匀速动画

    <!DOCTYPE html>












    (5)解决浏览器的间隙问题

    <!DOCTYPE html>

















    (6)关于鼠标点击移动

    <!DOCTYPE html>














    (7)缓慢动画

    <!DOCTYPE html>













    JavaScript-设置定时器

    1.1设置超时定时器

超时调用需要使用window对象的setTimeout()方法，该方法接受两个参数：调用函数或计算表达式和以毫秒为单位的时间（即在执行代码前需要等待多少毫秒）。
setTimeout(callback, after)
callback：时间到了之后要执行的方法(回调方法)；
after： 多长时间之后去执行这个方法

//设置超时定时器

//调用函数
setTimeout("fun()", 3000);

//执行js代码
setTimeout("alert(“Hello world”)", 3000);

//直接写执行方法
var timeoutId = setTimeout(function(){
    alert(“Hello world”);
}, 1000);

1.2 清除超时定时器

//取消定时器
clearTimeout(timeoutId);

只要是指定的时间尚未到来之前调用clearTimeout()，就可以取消掉超时定时器。

1.3 设置间歇定时器

间歇定时器与超时定时器类似，只不过它会按照指定的时间间隔重复执行代码，直到间歇定时器被取消或者页面被关闭。

setInterval(callback， repeat)

callback： 时间到了之后要执行的方法(回调方法)；

repeat： 每隔多长时间调用一次，单位是毫秒（ms）。

设置间歇定时器的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。

如下例：

//设置间歇定时器
setInterval(function(){
    console.log(“Hello world”);
}, 1000);

1.4 清除定时器

调用setInterval()方法同样会返回一个定时器的唯一标识（ID）。要取消间歇定时器，可以用clearInterval()方法并传入相应的ID值就行了。

clearInterval(intervalId)

2. JS动画

主要实现以下几种简单的动画效果（其实原理基本相同）：
1.匀速动画：物体的速度固定
2.缓动动画：物体速度逐渐变慢

2.1 匀速动画

（以物体左右匀速运动为例）

  • 动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。
  • 将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负；
  • 然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值（要给物体设置定位）；
  • 当物体到达目标位置时清除定时器；

2.2 缓动动画

（和匀速运动相同原理，只不过速度做些改变）

  • 让速度等于目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；
  • 二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整

自己总结

定时器

定义定时器
setTimeout()
setInterval()
返回值是一个定时器的id(随机的)
记得要清除定时器
clearTimeout()
clearInterval()

清除浏览器的间隙

// 修复浏览器空隙bug
function fixGap(height) {
// 宽度高度个位清零后除以10之后与2取余，如果为偶数会产生空隙的个位数
var bugEventArr = [2, 3, 6, 7];
// 宽度高度个位清零后除以10之后与2取余，如果为奇数会产生空隙的个位数
var bugOddArr = [0, 1, 4, 5, 8, 9];
// 获取个位数
var unit = Number(height.toString().slice(-1));
// 判断当前宽度高度个位清零后除以10之后与2取余，如果为偶数
if (((height - unit) / 10) % 2 === 0) {
// 如果是偶数并且个位数是bug数组中的数，则减1
if (bugEventArr.includes(unit)) {
return height - 1
} else {
// 否则说明此数不会产生空隙，直接返回即可
return height
}
} else {
// 如果为奇数
if (bugOddArr.includes(unit)) {
return height - 1
} else {
return height
}
}
}

缓动动画

  • 让速度等于目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；
  • 二者之差除以十并不总是整数，可能会导致物体位置和目标值不能完全相等，所以需要对speed进行取整，大于0向上取整，小于0向下取整