当前位置: 首页 > 编程笔记 >

JS运动基础框架实例分析

贺彬
2023-03-14
本文向大家介绍JS运动基础框架实例分析,包括了JS运动基础框架实例分析的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下:

这里需要注意:

1. 在开始运动时关闭已有的定时器
2. 把运动和停止隔开

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="utf-8">  

        <title></title>  

        <style type="text/css">  

            #div1{  

                width: 200px;  

                height: 200px;  

                background: red;  

                position: absolute;  

                left:0;  

                top:60px;  

            }  

        </style>  

        <script type="text/javascript">  

            window.onload=function(){  

                var oDiv=document.getElementById("div1");  

                var oBt=document.getElementsByTagName('input')[0];  

                var time=null;  

                oBt.onclick=function(){  

                    clearInterval(time);//这里首先要关闭一个定时器,这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug  

                    time=setInterval(function(){  

                        var speed=7;  

                        if(oDiv.offsetLeft<=600)  

                        oDiv.style.left=oDiv.offsetLeft+speed+'px';  

                        else{  

                            clearInterval(time);  

                        }  

                    },30);  

                }  

            }  

        </script>  

    </head>  

    <body>  

        <input type="button" value="开始运动" />  

        <div id="div1"></div>  

    </body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JS运动框架之分享侧边栏动画实例,包括了JS运动框架之分享侧边栏动画实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下: 优化后的代码: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍js对象基础实例分析,包括了js对象基础实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js对象基础用法。分享给大家供大家参考。具体分析如下: js对象在本质上与数组相同,都是存放一组数据。但创建方法有所不同,对象需要添加属性。 这里简单讲述对象的创建、读取/遍历,如下: 另外,如果对象中某个方法,需要调用该对象中的某个属性,则使用this关键词,如this.属性名

  • 主要内容:基础类的功能如果您参考Apple文档,应该会看到框架的详细信息,如下所示。 框架定义了Objective-C类的基础层。 除了提供一组有用的原始对象类之外,它还引入了几个定义Objective-C语言未涵盖的功能的范例。 框架的设计考虑了这些目标 - 提供一小组基本实用程序类。 通过为解除分配等事项引入一致的约定,使软件开发更容易。 支持Unicode字符串,对象持久性和对象分发。 提供一定程度的操作系统独立

  • Java集合框架提供了数据持有对象的方式,提供了对数据集合的操作。Java集合框架位于java.util包下,主要有三个大类:Collection、Map接口以及对集合进行操作的工具类。 Collection ArrayList:线程不同步。默认初始容量为10,当数组大小不足时增长率为当前长度的50%。 Vector:线程同步。默认初始容量为10,当数组大小不足时增长率为当前长度的100%。它的同

  • easySwoole 项目依赖于 Swoole 扩展,在使用 easySwoole 之前需要先安装 swoole 扩展。 快速安装 命令行快速安装: bash <(curl https://www.easyswoole.com/installer.sh) 或是: curl https://www.easyswoole.com/installer.php | php 手动安装 从 easyswool

  • 本文向大家介绍原生js封装运动框架的示例讲解,包括了原生js封装运动框架的示例讲解的使用技巧和注意事项,需要的朋友参考一下 昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框