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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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位字符代码
2009/03/26 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php简单图像创建入门实例
2015/06/10 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
jQuery 树形结构的选择器
2010/02/15 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
vue cli 全面解析
2018/02/28 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue实现搜索功能
2019/05/28 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
python中的字典详细介绍
2014/09/18 Python
Python多线程和队列操作实例
2015/06/21 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
2014年计算机专业个人自我评价
2014/01/19 职场文书
党员公开承诺事项
2014/03/25 职场文书
爱心倡议书范文
2014/05/12 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
县级文明单位申报材料
2014/05/23 职场文书
幽默导游词开场白
2015/05/29 职场文书
小学入学感言
2015/08/01 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang