js實現小球在頁面規(guī)定的區(qū)域運動
更新時間：2020年06月16日 14:13:23 作者：Lv_SFeng
這篇文章主要為大家詳細介紹了js控制小球在規(guī)定范圍運動，碰到邊界就改變運動方向，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js控制小球在規(guī)定范圍運動的具體代碼，供大家參考，具體內容如下
小球在頁面規(guī)定的區(qū)域運動，碰到邊界就改變運動方向。
<!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>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Math?是javaScript的內置對象，包含了部分數學常數屬性和數學函數方法。本文將詳細講解Math基本方法的使用，感興趣的小伙伴可以學習一下2022-04-04
下面小編就為大家?guī)硪黄猨s 判斷一組日期是否是連續(xù)的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要給大家介紹了關于ES6中箭頭函數的定義與調用方式的相關資料，文中通過示例代碼介紹的非常詳細，相信會對大家的學習或者工作帶來一定的幫助，需要的朋友們下面來一起看看吧。2017-06-06
本篇文章主要是對JS中的構造函數進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
在 JavaScript 開發(fā)中,變量類型的檢查是一個常見且重要的需求,無論是調試還是數據校驗,了解變量的類型可以幫助我們編寫更加健壯的代碼,本文將詳細講解 JavaScript 中用于檢查變量類型的多種方法,并分析它們的優(yōu)缺點以及適用場景2025-04-04
網頁自動跳轉代碼收集2009-09-09
異步是指進程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進程的狀態(tài),下面這篇文章主要給大家介紹了關于JS異步編程方法的6種方案,需要的朋友可以參考下2023-01-01
像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當然jquery也提供了這種蒙灰方法，下面有個示例，大家可以參考下2014-06-06
一般的面向對象程序語言，有兩種繼承方法——接口繼承（interface inheritance）和實現繼承（implementation inheritance）。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。在JavaScript中，函數沒有簽名，所以在JavaScript只支持實現繼承，而且主要是依靠原型鏈（prototype chaining）來是實現的2013-05-05
javascript中的window.location.search方法簡介
window.location.search方法是截取當前url中“?”后面的字符串，示例如下，感興趣的朋友可以參考下2013-09-09