快捷導(dǎo)航

js實(shí)現(xiàn)小球在頁面規(guī)定的區(qū)域運(yùn)動(dòng)

更新時(shí)間：2020年06月16日 14:13:23 作者：Lv_SFeng

這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運(yùn)動(dòng)，碰到邊界就改變運(yùn)動(dòng)方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js控制小球在規(guī)定范圍運(yùn)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

小球在頁面規(guī)定的區(qū)域運(yùn)動(dòng)，碰到邊界就改變運(yùn)動(dòng)方向。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>小球運(yùn)動(dòng)</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); //停止小球的運(yùn)動(dòng)
 }
 </script>
 </body>
</html>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript中Math內(nèi)置對(duì)象基本方法的使用
Math?是javaScript的內(nèi)置對(duì)象，包含了部分?jǐn)?shù)學(xué)常數(shù)屬性和數(shù)學(xué)函數(shù)方法。本文將詳細(xì)講解Math基本方法的使用，感興趣的小伙伴可以學(xué)習(xí)一下
2022-04-04
js 判斷一組日期是否是連續(xù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
ES6中箭頭函數(shù)的定義與調(diào)用方式詳解
這篇文章主要給大家介紹了關(guān)于ES6中箭頭函數(shù)的定義與調(diào)用方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，相信會(huì)對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助，需要的朋友們下面來一起看看吧。
2017-06-06
JS中的構(gòu)造函數(shù)詳細(xì)解析
本篇文章主要是對(duì)JS中的構(gòu)造函數(shù)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-03-03
JavaScript檢查變量類型的常用方法
在 JavaScript 開發(fā)中,變量類型的檢查是一個(gè)常見且重要的需求,無論是調(diào)試還是數(shù)據(jù)校驗(yàn),了解變量的類型可以幫助我們編寫更加健壯的代碼,本文將詳細(xì)講解 JavaScript 中用于檢查變量類型的多種方法,并分析它們的優(yōu)缺點(diǎn)以及適用場(chǎng)景
2025-04-04
網(wǎng)頁自動(dòng)跳轉(zhuǎn)代碼收集
網(wǎng)頁自動(dòng)跳轉(zhuǎn)代碼收集
2009-09-09
JS異步編程方法的6種方案總結(jié)
異步是指進(jìn)程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進(jìn)程的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于JS異步編程方法的6種方案,需要的朋友可以參考下
2023-01-01
使用原生js實(shí)現(xiàn)頁面蒙灰(mask)效果示例代碼
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當(dāng)然jquery也提供了這種蒙灰方法，下面有個(gè)示例，大家可以參考下
2014-06-06
JS Pro-深入面向?qū)ο蟮某绦蛟O(shè)計(jì)之繼承的詳解
一般的面向?qū)ο蟪绦蛘Z言，有兩種繼承方法——接口繼承（interface inheritance）和實(shí)現(xiàn)繼承（implementation inheritance）。接口繼承只繼承方法簽名，而實(shí)現(xiàn)繼承則繼承實(shí)際的方法。在JavaScript中，函數(shù)沒有簽名，所以在JavaScript只支持實(shí)現(xiàn)繼承，而且主要是依靠原型鏈（prototype chaining）來是實(shí)現(xiàn)的
2013-05-05
javascript中的window.location.search方法簡(jiǎn)介
window.location.search方法是截取當(dāng)前url中“?”后面的字符串，示例如下，感興趣的朋友可以參考下
2013-09-09