投稿
  1. 极客之音首页
  2. 技术随笔

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

飞熊 • • 技术随笔 • 阅读 187

生活中，最使人疲惫的往往不是道路的遥远，而是心中的郁闷;最使人痛苦的往往不是生活的不幸，而是希望的破灭;最使人颓废的往往不是前途的坎坷，而是自信的丧失;最使人绝望的往往不是挫折的打击，而是心灵的死亡。所以我们要有自己的梦想，让梦想的星光指引着我们走出落漠，走出惆怅，带着我们走进自己的理想。

导读：本篇文章讲解 基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

        有人问：成为优秀工程师的具体体现在哪些方面？在于你能利用技术解决生活中遇到的题；在于你能保持对新技术的热爱；在于你能时刻保持着好奇心；更重要的是在于你能不忘初心，关注博主一起学习…..咳，扯远了，废话不多说，直接开始今天的学习。

目录

一、简述定时器

一、定时器的分类

二、清除除定时器

三、定时器功能

 二、定时器实现运动逻辑

一、变量抽离分析

二、变量封装

一、实现正向运动

二、实现正反向运动

三、实现上下左右运动

四、定时器编号存储 识别tms面完成运动

 三、应用实操

一、random用法

二、方法

一、简述定时器

一、定时器的分类

setInterval(fn, time) //间隔定时器
var t = setInterval(function () {
    console.log(1);
}, 1000);
//顾名思义：间隔时间内执行语句一次，并循环执行

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

setTimeout(fn, time) //超时定时器
var tt = setTimeout(function () {
    console.log(2);
}, 1000);
//顾名思义：超时就不执行语句，换言之，在规定时间内执行语句一次，不循环

二、清除除定时器

// 定时器编号， 用于关闭定时器
clearInterval(tid)
clearTimeout(tid)
//例如上文 clearInterval(t)

三、定时器功能

js定时器是利用js实现定时的一种方法,在网站上有很多用途都是用到定时器,很多在线时钟的制作,图片轮播的实现,还有一些广告弹窗,但凡可以自动执行的东西,都是可以和定时器有关的。

// 每隔1秒，时间+1
var tNumber = 0;
var ttid = setInterval(function () {
  tNumber++;
  console.log(tNumber);
}, 1000);

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

 二、定时器实现运动逻辑

一、变量抽离分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>      
        var box = document.getElementsByClassName("box")[0];
        var left = 0;
        var tid = setInterval(function () {
            left += 2;
            box.style.left = left + "px";
            if (left == 100) {
                clearInterval(tid);
            }
        }, 100);
    </script>
</body>
</html>

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

 现在对运动逻辑进行封装和变量抽离

起点和终点变量赋值

var start = 0;
var end = 100;

相对起点的值

var distance = start;

影响元素运动快慢的因素，时间间隔、步长

var step = 3;

地界线从左边开始

var prop = "left";

变量引用

var tid = setInterval(function () {
    // left++;
    distance += step;
    box.style[prop] = distance + "px";
    // 校准
    if (distance >= end) {
        clearInterval(tid);
        // 归位
        box.style[prop] = end + "px";
    }
}, 100);

结果和上图红色盒子效果一样

二、变量封装

一、实现正向运动

//box 的 prop 属性 从 start 运动到 end
function move (box, prop, start, end) {
    var distance = start;
    var step = 3;
    var tid = setInterval(function () {
        distance += step;
        box.style[prop] = distance + "px";
        if (distance >= end) {
            clearInterval(tid);
            box.style[prop] = end + "px";
        }
    }, 100);
}
move(box,'left',0,300)

二、实现正反向运动

//扩展1： 方向 0 =》 100 3 向右， 向右为正 100 =》 0， -3向左为负
//0 100 99 101 100 distance >= end
//100 0 1 0 - 1    diantacne <= end;
function move (box, prop, start, end) {
    var distance = start;
    var step = 3;
    if (end < start) {
        step *= -1;
    }
    var tid = setInterval(function () {
        distance += step;
        box.style[prop] = distance + "px";
        if ((distance >= end && step > 0) || (step < 0 && distance <= end)) {
            clearInterval(tid);
            box.style[prop] = end + "px";
        }
    }, 10);
}
move(box,'left',500,0)

三、实现上下左右运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box = document.getElementsByClassName("box")[0];
        //运动完成后，要做的事
        //fn
        function move (box, prop, start, end, fn) {
            var distance = start;
            var step = 3;
            if (end < start) {
                step *= -1;
            }
            var tid = setInterval(function () {
                distance += step;
                box.style[prop] = distance + "px";
                if ((distance >= end && step > 0) || (step < 0 && distance <= end)) {
                    clearInterval(tid);
                    box.style[prop] = end + "px";
                    if (typeof fn === "function") {
                        fn();
                    }
                }
            }, 10);
        }

        move(box, "left", 0, 300, function () {
            move(box, "top", 0, 300, function () {
                move(box, "left", 300, 0, function () {
                    move(box, "top", 300, 0, function () {
                        alert("运动完成");
                    });
                });
            });
        });
    </script>
</body>
</html>

四、定时器编号存储 识别tms面完成运动

function move(box, prop, start, end, t, fn) {
var distance = start;
// var step = 3;
// v = l / t
// 1h走了1km
// 1km/h
var step = ((end - start) / t) * 10;
var tid = setInterval(function () {
    distance += step;
    box.style[prop] = distance + "px";
    if ((distance >= end && step > 0) || (step < 0 && distance <= end)) {
    clearInterval(tid);
    box.style[prop] = end + "px";
    if (typeof fn === "function") {
        fn();
    }
    }
}, 10);
box.setAttribute("tid", tid);
}

Element.prototype.clearInterval = function () {
var tid = this.getAttribute("tid");
clearInterval(tid);
};

console.time("计时");
move(box, "left", 0, 300, 6000, function () {
console.timeEnd("计时");
});

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

 三、应用实操

一、random用法

使用random这里借用内置对象Math函数方法，相关介绍：

JavaScript入门到精通（四）连载_亦世凡华、的博客-CSDN博客

// 随机数
// Math.random() [0, 1)

// 简单的数学运算
// Math.random() + 3 => [3, 4)

// Math.random() * 5 => [0, 5)

// Math.random() * (5-2) + 2 => [0, 5-2) + 2 => [2, 5)

// 任意区间[x, y) => Math.random() * (y-x) + x
// [0, 1) * (y-x) + x
// [0, y-x) + x
// [x, y)

// 封装： 获得[x, y) 随机数
function getRandom(x, y) {
  return Math.random() * (y - x) + x;
}

通过上文分析可知，获得区间[x,y)的方法为 Math.random() * (y – x) + x;那么便可以获得区间0到26范围内的数字，那么便可以实现 a~z随机字母与相应数字进行映射

这里介绍三个方法

// [] 数组[索引] = 数组中的元素
// var alphaBet = ["a", "b", "c", "d"];
// 0 => 'a'
// 1 => 'b'
// 2 => 'c'
// 3 => 'd'

// 随机生成0，1，2，3 整数
var index = parseInt(getRandom(0, 4));
console.log(alphaBet[index]);

// unicode编码 97~a
// String.fromCharCode()
// 97到122随机整数
String.fromCharCode(parseInt(getRandom(97, 123)));

// 进制转换
// 10
// 0123456789
// 16
// 0123456789abcdef
// 36 
// 0123456789abcdefghijklmnopqrstuvwxyz
// Number.prototype.toString(36);
// [10, 36)
parseInt(getRandom(10, 36)).toString(36);

二、方法

//index.js
// 1. 计时功能
var tNumber = 0;
var tDom = document.getElementById("timer");
var ttid = setInterval(function () {
  tNumber++;
  tDom.innerText = tNumber;
}, 1000);

// 2. 生成气球
// 可视区域内 innerWidth innerHeight
// 不断生成 setInterval
// img元素 document.createElement('img')

// 生成气球
function createLetter() {
  var img = document.createElement("img");
  // 初始位置
  img.style.top = innerHeight + "px";
  // 随机 0， innerWidth-80
  img.style.left = getRandom(0, innerWidth - 80) + "px";

  // 引入图片
  var letter = String.fromCharCode(parseInt(getRandom(97, 123)));
  img.title = letter;
  img.src = "./img/" + letter + ".png";
  document.body.appendChild(img);
  move(img, "top", innerHeight, 0, 5000, function () {
    // 到顶了 gameover
    gameOver();
  });
}

// 不断
var createId = setInterval(function () {
  createLetter();
}, 500);

// 键盘事件
var score = 0;
var scoreDom = document.getElementById("score");
var imgs = document.getElementsByTagName("img");

document.body.onkeydown = function (e) {
  for (var i = 0; i < imgs.length; i++) {
    if (e.key === imgs[i].title) {
      imgs[i].clearInterval();
      document.body.removeChild(imgs[i]);
      score++;
      scoreDom.innerText = score;
      break;
    }
  }
};

// 4. gameOver

function gameOver() {
  // 取消事件
  document.body.onkeydown = null;
  // 关闭定时器
  clearInterval(ttid);
  clearInterval(createId);
  // 每个img定时器
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].clearInterval();
  }
  alert("最终得分" + score);
}
//tool.js
function getRandom(x, y) {
  return Math.random() * (y - x) + x;
}
function move(box, prop, start, end, t, fn) {
  var distance = start;
  var step = ((end - start) / t) * 10;
  var tid = setInterval(function () {
    distance += step;
    box.style[prop] = distance + "px";
    if ((distance >= end && step > 0) || (step < 0 && distance <= end)) {
      clearInterval(tid);
      box.style[prop] = end + "px";
      if (typeof fn === "function") {
        fn();
      }
    }
  }, 10);
  box.setAttribute("tid", tid);
}
Element.prototype.clearInterval = function () {
  var tid = this.getAttribute("tid");
  clearInterval(tid);
};
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>打文字游戏</title>
  <link rel="stylesheet" href="./index.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-image: url(./img/bg.png);
      overflow: hidden;
    }

    .score {
      width: 300px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      font-size: 64px;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .score::before {
      content: "得分";
    }

    .timer {
      width: 200px;
      height: 200px;
      font-size: 50px;
      line-height: 200px;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
    }

    img {
      width: 80px;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="score" id="score">0</div>
  <div class="timer" id="timer">0</div>
  <script src="./tools.js"></script>
  <script src="./index.js"></script>
</body>

</html>

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用 基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用 基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用 基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

imgs图片如上。

        呜呜，看到这都还不点赞加收藏？？？

基于JavaScript定时器功能-实现运动逻辑结构算法并简单应用

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140142.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！