js实现小球在页面规定的区域运动


Posted in Javascript onJune 16, 2020

本文实例为大家分享了js控制小球在规定范围运动的具体代码,供大家参考,具体内容如下

小球在页面规定的区域运动,碰到边界就改变运动方向。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>小球运动</title>
 <style type="text/css">
 #box {
 width: 600px;
 height: 300px;
 border: 1px solid red;
 position: relative;
 }
 #ball {
 width: 50px;
 height: 50px;
 border-radius: 25px;
 background-color: yellow;
 position: absolute;
 top: 0;
 left: 0;
 }
 button {
 position: relative;
 }
 </style>
 </head>
 <body>
 <div id="box">
 <div id="ball">
 
 </div>
 </div>
 <button id="stop" onclick="fly()">开始</button>
 <button id="stop" onclick="stop()">停止</button>
 <script type="text/javascript">
 var ball = document.getElementById("ball");
 //console.log(ball.offsetLeft);
 var sport;
 function fly() {
 var speedx = 1;
 var speedy = 1;
 
 sport = setInterval(function () {
  ball.style.left = ball.offsetLeft + speedx + 'px';
  ball.style.top = ball.offsetTop + speedy + 'px';
  
  if (ball.offsetTop >= 300 -50 || ball.offsetTop <= 0) {
  speedy *= -1; 
  }
  if (ball.offsetLeft >= 600 -50 || ball.offsetLeft <= 0) {
  speedx *= -1; 
  }
 }, 10)
 }
 function stop() {
 clearInterval(sport); //停止小球的运动
 }
 </script>
 </body>
</html>

效果图:

js实现小球在页面规定的区域运动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
Jun 16 #Javascript
详解JS预解析原理
Jun 16 #Javascript
深入了解JS之作用域和闭包
Jun 16 #Javascript
JS数组及对象遍历方法代码汇总
Jun 16 #Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 #Javascript
原生JS实现天气预报
Jun 16 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python修改注册表终止360进程实例
2014/10/13 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
用Python读取几十万行文本数据
2018/12/24 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书