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

于 2024-06-11 16:23:42 发布
阅读量227 收藏 5
点赞数 5
文章标签： javascript 算法 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85123689/article/details/139602403
版权

//顾名思义：间隔时间内执行语句一次，并循环执行




![](https://img-blog.csdnimg.cn/1e92b91e4b224c89a8c7c8fa8a5b4b4f.png)

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




![](https://img-blog.csdnimg.cn/2589a72d56f24c5d98788fdc4b150c87.png)



 二、定时器实现运动逻辑

============



一、变量抽离分析

--------




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

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




![](https://img-blog.csdnimg.cn/5d2aaa3ae8a946a0ba9d27a4d894ce96.png)



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



起点和终点变量赋值

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)




### 三、实现上下左右运动




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

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




### 四、定时器编号存储 识别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(“计时”);

});




![](https://img-blog.csdnimg.cn/df27a634423847aba03e2c4540899721.png)



 三、应用实操

=======



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




二、方法

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

![HTML、CSS部分截图](https://img-blog.csdnimg.cn/img_convert/2bb6b442a4432372fe5b9ccea2ad93d0.png)

### 进阶阶段



进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。



我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。



**1、JavaScript 和 ES6**



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。



![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)



**2、前端框架**

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。



以 Vue 为例，我整理了如下的面试题。



![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)
2401_85123689
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值