运动基础 学习笔记

http://bbs.zhinengshe.com/thread-1194-1-1.html

运行效果:[http://runjs.cn/code/riwpoev9]

问题1:不会在特定的位置停止 ~

解决方案:添加if判断条件,达到特定位置时关闭定时器 ;

运行效果:[http://runjs.cn/code/aoznxlv9] ;

问题2:如何改变物体运动速度 ?

(1)不可行方案:修改定时器间隔为300ms ;

       存在问题:物体运动卡顿 ;

运行效果:[http://runjs.cn/code/x4akoomk]

(2)解决方案:修改oDiv.style.left = oDiv.offsetLeft + 10 + "px" 中的 10 ;

    运行效果:[http://runjs.cn/code/x8mtz0vr]

问题3:物体运动到终点后,点击按钮,物体仍然会运动 ~

原因:这里虽然在offsetLeft>=300时clearInterval,但是setInterval()仍然会被执行一次;

1 setInterval(function () {
2     if (oDiv.offsetLeft >= 300) {
3         clearInterval(timer);
4     }
5     oDiv.style.left = oDiv.offsetLeft + speed + "px";
6 }, 30);

解决方案:添加else从句;

运行效果:[http://runjs.cn/code/ewbl7uzy]

问题4:物体运动过程中,连续点击按钮会叠加定时器 ~

解决方案:在打开定时器前关闭之前的定时器,保证每次只有一个定时器在工作 ;

运行效果:[http://runjs.cn/code/i89ybgtc]

时间: 2024-11-14 12:37:34

运动基础 学习笔记的相关文章

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

首页 头条 文章 频道                         设计频道 Web前端 Python开发 Java技术 Android应用 iOS应用 资源 小组 相亲 频道 首页 头条 文章 小组 相亲 资源 设计 前端 Python Java 安卓 iOS 登录 注册 首页 最新文章 经典回顾 开发 Web前端 Python Android iOS Java C/C++ PHP .NET Ruby Go 设计 UI设计 网页设计 交互设计 用户体验 设计教程 设计职场 极客 IT技术

JAVA基础学习笔记(2)

看了几天的视频了,都没时间来写下学习笔记,今天来写下第二次的学习笔记,前几天看的给忘记了,就写最新看到的吧 主要内容:1.类的变量与函数(方法) 2.对象的存储方式 3.新建一个对象及对象的赋值与调用 4.空对象 5.匿名对象 1.类的变量与函数(方法) class Dog      //类名 { String name;  //变量的声明 int age; String color; void bark()   //方法的定义(返回值为空,不带参数) { System.out.println(

ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASPX引擎或者第三方的NVelocity模板引擎. Razor在减少代码冗余.增强代码可读性和Visual Studio智能感知方面,都有着突出的优势.Razor一经推出就深受广大ASP.Net开发者的喜爱. 1.2 Razor的语法 (1)Razor文件类型:Razor支持两种文件类型,分

JAVA基础学习笔记(1)

今天第一天开始学JAVA,时间:2014年6月17日 学习内容:1.java环境的架设 2.JAVA基本数据类型 1.JAVA环境的架设       1.要先去下载JDK,下载地址 2.安装完成后,设置环境变量 1.1环境变量的设置        1.右键-我的电脑-属性-高级-环境变量-系统变量,找到PATH,在里面加入jdk里bin目录的地址 如:c:\java\bin; 2.新建-名为classpath,值为. 1.2测试JAVA是否配置正确        1.在cmd里面输入javac.

java基础学习笔记day01

java基础学习笔记day01 1.软件开发: 软件:按照特定顺序组织的计算机数据和指令的集合 开发:软件的制作过程 软件开发:借助开发工具和计算机语言制作软件 2.java概述: java之父:詹姆斯·高斯林 JDK:java开发环境 jre:java运行环境 JVM:java虚拟机 java跨平台是因为,JVM能在不同的平台运行,JVM是跨平台的 JavaSE:标准版 JavaME:手机端,物联网 JavaEE:企业版,互联网项目 3.java语言特点: 简单性 解释性 面向对象 高性能 分

linux基础学习笔记——操作大全

作者:liaoyi 更新时间:2014-6-2 ****************基本操作***************** 关机 shutdown -h now    root用户               init 0              root用户halt      root+一般用户poweroff 重启shutdown -r now    root用户init6     root用户reboot            root+一般用户 注意:1.shutdown 比较灵活,可

HTML&CSS基础学习笔记15-合并单元格

合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下: 1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数: 2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数: 3.这2个标签也可以同时使用. 样式示例: 现在就来试试合并单元格吧: <!DOCTYPE