javascript每日一练(九)——运动一:匀速运动
一、js的运动
匀速运动
- 清除定时器
- 开启定时器
- 运动是否完成:a、运动完成,清除定时器;b、运动未完成继续
匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动距离
div的匀速运动(简单运动)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;} span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); }; }; var timer = null; function startMove(obj, iTarget) { clearInterval(timer); timer = setInterval(function(){ var iSpeed = 0; if(obj.offsetLeft < iTarget) { iSpeed = 7; } else { iSpeed = -7; } if( Math.abs( obj.offsetLeft - iTarget ) < 7 ) { clearInterval(timer); obj.style.left = iTarget + 'px'; } else { obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); } </script> </head> <body> <button id="btn1">移动</button> <div id="div1"></div> <span></span> </body> </html>
javascript每日一练(九)——运动一:匀速运动的更多相关文章
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十四)——弹性运动
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(一)——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- javascript每日一练(八)——事件三:默认行为
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...
- javascript每日一练(七)——事件二:键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...
随机推荐
- QQ聊天原理初识
1:qq之间文件的传输是通过p2p通信进行的. 2:qq之间的表情发送实际上就是文字的发送,是client再接受到文字之后在本地自己进行转换 3:qq之间的通信既能够通过udp也能够通过Tcp 尽管u ...
- [LeetCode] Longest Substring Without Repeating Characters (LinkedHashSet的妙用)
Given a string, find the length of the longest substring without repeating characters. For example, ...
- 解决 win10 预览版开始菜单打不开的问题
除了该文章[http://jingyan.baidu.com/article/64d05a025d2668de55f73b9e.html]里面说的解决方法之外,我只加上一点 . 打开本机防火墙,或者调 ...
- URAL 1009 K-based Numbers
题目:Click here #include <bits/stdc++.h> using namespace std; typedef long long ll; const int IN ...
- python命令行解析工具argparse模块【2】
上一节,我们简要的介绍了argparse的用法,接下来几节,将详细讲解其中的参数及用法,这一节我们讲解ArgumentParser对象. argparse.ArgumentParser([descri ...
- jquery自定义分页插件
//每次只显示5个页码(function ($) { //设定页码方法,初始化 $.fn.setPager = function (options) { var opts = $.extend({}, ...
- day4作业
作业内容:计算器 #!/usr/bin/env python # -*- coding:utf-8 -*- import re,time #加减字符处理函数 def handle_symbol(cal ...
- 「操作系统」: Conditional Move Instructions(trap)
Not all conditional expressions can be compiled using conditional moves. Most significantly, the abs ...
- FastStone Capture(FSCapture) 注册码 _图形图像_软件教程_脚本之家
FastStone Capture(FSCapture) 注册码 _图形图像_软件教程_脚本之家 FastStone Capture 注册码 序列号: name/用户名:TEAM JiOO key/注 ...
- layer 的常用属性
layer的各种属性代码示例: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading ...