JavaScript Day8

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量39 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Follow_haodi/article/details/132698517
版权

1. 设置定时器

1.1设置超时定时器

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

 

<!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>
</head>
<body>
    <script>
        // 超时定时器：超过规定时间后所执行的代码
        // setTimeout(callback,time);   time 毫秒

        setTimeout(function(){
            console.log("三秒之后执行");
        },3000);

        // 给超时定时器一个名字
        var timeoutId = setTimeout(function(){
            console.log("有名字的超时定时器");
        },5000);
    </script>
</body>
</html>
1.2 清除超时定时器

clearTimeout();  注意：需要给超时定时器起名字才能清除

<!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>
</head>
<body>
    <script>
        setTimeout(function(){
            console.log("三秒之后执行");
        },3000);

        // 给超时定时器一个名字
        var timeoutId = setTimeout(function(){
            console.log("有名字的超时定时器");
        },5000);

        // 通过 clearTimeout() 方法清除超时定时器
        clearTimeout(timeoutId);
    </script>
</body>
</html>
1.3 设置间歇定时器

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

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

<!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>
</head>
<body>
    <script>

        // 间歇定时器 每多长事件执行一次
        setInterval(function(){
            console.log("每三秒执行一次");
        },3000);

        var intervalId = setInterval(function(){
            console.log("有名字的间歇定时器");
        },1000)
    </script>
</body>
</html>
1.4 清除间歇定时器

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

<!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>
</head>
<body>
    <script>
        // 间歇定时器 每多长事件执行一次
        setInterval(function(){
            console.log("每三秒执行一次");
        },3000);

        var intervalId = setInterval(function(){
            console.log("有名字的间歇定时器");
        },1000);

        // 通过 clearInterval() 清除间歇定时器
        clearInterval(intervalId);
    </script>
</body>
</html>

2.JS动画

主要实现以下几种简单的动画效果（其实原理基本相同）：

1.匀速动画：物体的速度固定

2.缓动动画：物体速度逐渐变慢

2.1 匀速动画

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

  • 动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。

  • 将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负；

  • 然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值（要给物体设置定位）；

  • 当物体到达目标位置时清除定时器；

 

<!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>
        .father {
            width: 1200px;
            height: 800px;
            position: relative;
            margin: 0 auto;
            border: 1px solid #ccc;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div>
        <input type="button" value="向右走">
        <input type="button" value="向左走">
        <input type="button" value="向上走">
        <input type="button" value="向下走">
    </div>

    <div class="father">
        <div class="box"></div>
    </div>

    <script>
        var rightbtn = document.getElementsByTagName("input")[0];
        var leftbtn = document.getElementsByTagName("input")[1];
        var topbtn = document.getElementsByTagName("input")[2];
        var bottombtn = document.getElementsByTagName("input")[3];
        var father = document.getElementsByClassName("father")[0];
        var son = document.getElementsByClassName("box")[0];

        // btn.onclick = function(){
        //     son.style.left = son.offsetLeft + 10 + "px";
        // }
        var boxMove;

        rightbtn.onclick = function () {
            clearInterval(boxMove);

            boxMove = setInterval(function () {
                if (son.offsetLeft >= father.clientWidth - son.offsetWidth) {
                    clearInterval(boxMove);
                }else{
                    son.style.left = son.offsetLeft + 10 + "px";
                }
            }, 50);
        }

        leftbtn.onclick = function () {
            clearInterval(boxMove);

            boxMove = setInterval(function () {
                if (son.offsetLeft <= 0) {
                    clearInterval(boxMove);
                } else {
                    son.style.left = son.offsetLeft - 10 + "px";
                }
            }, 50);
        }

        topbtn.onclick = function () {
            clearInterval(boxMove);

            boxMove = setInterval(function () {
                if (son.offsetTop <= 0) {
                    clearInterval(boxMove);
                } else {
                    son.style.top = son.offsetTop - 10 + "px";
                }
            }, 50);
        }

        bottombtn.onclick = function () {
            clearInterval(boxMove);

            boxMove = setInterval(function () {
                if (son.offsetTop >= father.clientHeight - son.offsetHeight) {
                    clearInterval(boxMove);
                } else {
                    son.style.top = son.offsetTop + 10 + "px";
                }
            }, 50);
        }
    </script>
</body>

</html>
2.2 缓动动画

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

  • 让速度等于目标值和当前位置之差/10，二者之差会越来越小，即速度speed也会越来越小；

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1000px;
            height: 800px;
            border: 1px solid #ccc;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

    <script src="animation.js"></script>
</head>

<body>
    <input type="button" value="向右">
    <input type="button" value="向左">
    <div class="father">
        <div class="son"></div>
    </div>

    <script>
        var btn1 = document.getElementsByTagName("input")[0];
        var btn2 = document.getElementsByTagName("input")[1];
        var father = document.getElementsByClassName("father")[0];
        var son = document.getElementsByClassName("son")[0];
        var timer;
        btn1.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                // 900 810 729 656 590 ....
                // 90 81 73 66  59  ....        1
                son.style.left = son.offsetLeft + Math.ceil((900 - son.offsetLeft) / 10) + "px";
            }, 30)

        }

        btn2.onclick = function () {
            clearInterval(timer);
            timer = setInterval(function () {
                son.style.left = son.offsetLeft + Math.floor((0 - son.offsetLeft) / 10) + "px";
            }, 30)

        }
    </script>
</body>

</html>

 

Follow_浩弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript程序设计训练 Day3
qq_55786319的博客
04-15 2147
1、编写程序，根据用户输入的数值，计算其平方、平方根和自然对数 <script> var input_num=Number(prompt("请输入一个数字:")); var sqrt_num=Math.sqrt(input_num);//开方 var pow_num=Math.pow(input_num,2);//平方 var log_num=Math.log(input_num);//ln,即e的多少次方等于input_n
四天学会JavaScript(Day1~Day4)
热门推荐
qq_41424688的博客
10-06 6万+
七天学完JavaSctipt~Day1 前言        在9月22号当时距离国庆还有8天的时候,原本是说国庆计划五天的时间来总结微服务的(详情见微服务架构设计模式与CAP定理),可没想到自己太过心急...提前过了一遍。。所以这次就打算用国庆的时间来好好学学JavaScript。其实前端这一块呢,我几乎是一个小白。过去也只是写写Ajax,或者整几个XX事件,接收接收数据而已。所以这个国庆我是计划用七天的时间把JavaScript语言从头
JavaScript Day_03
m0_66095162的博客
03-24 1069
Javascript学习笔记
JavaScript Day01
m0_61373758的博客
03-08 876
JavaScript历史：网景公司（布兰登·艾奇）ECMAScript是一个标准，JavaScript是语言 js概念 概念：支持面向对象的跨平台脚本语言。 理解： 脚本语言：依赖别的语言才能运行 html必须在浏览器中才能运行，js嵌套在html中才能运行 跨平台：可以在不同的平台上运行 windows、linux、安卓... 支持面向对象 使用面向对象的思想编程 应用场景： 表单验证：规范用户输入数据，和后台数据进行交互 网页特效：给页
JavaScript---day09
Amanecer_的博客
09-01 346
时间对象、字符串对象
JavaScript Day_02
03-24
javascript第二天笔记
JavaScript Day_01
03-24
javascript学习第一天笔记
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"这个压缩包中，我们很显然关注的是JavaScript技术，特别是与“futdraft”程序相关的应用。"futdraft"可能是一个足球模拟选秀或者阵容构建的应用，这需要对JavaScript有深入的理解以及对...
day1_javascript_
09-30
"day1_javascript_"这个标题可能指的是一个学习序列的开始，聚焦于JavaScript的基础知识。描述中提到的"javaweb的编程资料"表明这组资料不仅限于JavaScript，可能还涉及到将JavaScript应用于JavaWeb开发的场景。 ...
nodejs安装
a1241436267的博客
08-19 376
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 317
npm。
2024前端面试题-js篇
FormAda的博客
08-22 687
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 563
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 313
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 990
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1016
react详细自我学习笔记，内容包括JSX、Redux、Router等
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 882
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 215
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值