JavaScript語法 --> 碰壁反彈

阿新 • • 發佈：2019-02-14

JavaScript語法 –> 碰壁反彈

在js語法中，正確使用clientWidth、offsetWidth等屬性，並結合定時器，可以形成如下所示碰壁反彈效果。
這裡寫圖片描述

程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>碰壁反彈</title>
    <style type="text/css">  
        #mod {
            position:relative 
; 
            width: 500px; 
            height: 300px; 
            margin: 0px auto; 
            border:5px #000 solid;
        }
        #box {
            position:absolute;
            width: 50px; 
            height: 50px; 
            line-height:50px; 
            text-align:center; 
            color 
:#fff; 
            background: #00f; 
            border-radius:50%;
        }
    </style>
</head>
<body>
    <div id="mod">
        <div id="box">1</div>
    </div>
    <script type="text/javascript">    
        function rebound() {
            var mod = document.getElementById("mod" 
);
            var box = document.getElementById("box");

            var maxWidth = mod.clientWidth - box.offsetWidth;
            var maxHeight = mod.clientHeight - box.offsetHeight;

            var top = box.offsetTop,
                left = box.offsetLeft;

            var speedY = 5,
                speedX = 2;

            function move() {
                top += speedY;
                left += speedX;

                if (top >= maxHeight) {  
                    speedY *= -1;
                }else if (top <= 0) {  
                    speedY *= -1;
                }

                if (left >= maxWidth) {  
                    speedX *= -1;
                }else if (left <= 0) {  
                    speedX *= -1;
                }

                box.style.left = left +"px";
                box.style.top = top +"px";
            }

            function autoPlay(){
                setInterval(move,10);
            }
            autoPlay();
        }
        rebound();
    </script>
</body>
</html>

程式碼解釋：

Css部分：先要設定跳動的元素CSS屬性，position:absolute;絕對定位，但不設定left、top屬性值，待使用js程式碼得出。
js部分：
1>.clientWidth不包括邊框的可視寬（width+padding），clientHeight不包括邊框的可視高（height+padding）。
2>.offsetWidth包括邊框的寬（width+padding+border）、offsetHeight包括邊框的高（height+padding+border）。
3>.最大運動寬、高 = 容器不包括邊框的可視寬、高 - 跳動元素包括邊框的寬、高。
4>.speedX水平方向的速度、speedY垂直方向的速度。
5>. speedY = -1; speedX = -1;當元素超出設定範圍的一瞬間，速度變為負值，元素反向移動。
6>.box.style.left = left +”px”;box.style.top = top +”px”;使用js得到Css屬性中絕對定位的left、top屬性值。
7>.定時器不變，當速度值變大，元素移動速度變快。

var speedY = 10,
    speedX = 5;

效果如圖：
這裡寫圖片描述
8>.速度不變，當定時器定時值變大，元素移動速度變慢。

function autoPlay(){
    setInterval(move,30);
}
autoPlay();

效果如圖：
這裡寫圖片描述

以上就是使用js程式碼達到碰壁反彈效果，希望對大家有所幫助。

JavaScript語法 --> 碰壁反彈

JavaScript語法 –> 碰壁反彈在js語法中，正確使用clientWidth、offsetWidth等屬性，並結合定時器，可以形成如下所示碰壁反彈效果。

JavaScript 實現碰壁反彈

前言：碰壁反彈所要的效果就是一個小塊在一個大的DIV裡做X軸和Y軸的勻速運動，當碰到大DIV的邊框時，反方向移動。正文：步驟1：首先來分析，怎麼樣才能使得小球動起來。 a、給小球一個絕對定位absolute,通過每秒改變它的left和top的值

JavaScript--語法2--語句結構

pub 支持 col str title ase -- write 種類 JavaScript--語法2 一、心得判斷的時候常量放左邊java中switch只支持四種類型，javaScript是弱類型，所有的都支持。顯示方法： 77 //

JSLint檢測Javascript語法規範

sin 大寫字母之前 before sco document cts secure 使用 “Missing semicolon.” : “缺少分號.”,（這個一般都是自己忘記寫了，但是有一個需要註意的是，對於只有一句的結構，後面也需要寫分號。）“Use the funct

JavaScript語法

網頁 java pro script scrip 結束 char head test 1.內部引用 JavaScript 代碼可以直接嵌在網頁的任何地方。不過現在我們通常都把 JavaScript 代碼放到 `` （結束標簽）之前。由 `` 包含的代碼就是 JavaScr

JavaScript語法基礎(1)

返回導致順序結構 ava 含義 tex 其他自動 color 1、JavaScript是什麽？ 1）定義： JavaScript「JS」是一種高級的、動態的、弱類型的、解釋型的計算機編程腳本語言。 2）原理： 3）組成： 3大部分： ◆ ECMAScript： JS

JavaScript語法和類型

font define highlight 導致數字 eof null nan 求值 var 聲明一個變量，可選擇將其初始化為一個值let 聲明一個塊作用域的局部變量，可選擇將其初始化為一個值const 聲明一個只讀的常量變量一個JS標識符必須以字母、下劃線或者

JavaScript DOM 編程藝術（1）---> JavaScript語法

cti scrip 回車括號全局運行方法回車換行 charset 一. JavaScript語法目錄語法操作條件語句循環語句函數對象二. 具體內容 2.1 語法　　javaScript代碼要通過HTML/XHTML文檔才能執行

二、JavaScript語法

ant 第一個一切都大括號大小寫 ict 一個函數的參數 1.5 1.1 區分大小寫 JavaScript一切都區分大小寫。 1.2 標識符標識符概念：指變量、函數、屬性的名字，或者函數的參數。字符可以是字母、下劃線、美元符號或數字。第一個字符不能是數字。

詳解HTML&CSS&JavaScript語法辭典-(專業版) (半場方人) PDF掃描版

屬性 top lin lang number jin 環境語法特征這是一本詳細講解htmt+css+javascript語法詞典，是讀者學習網頁編程技術的必備參考書。書中詳細講解了超文本標記語言（hypertext markup language 4.01）中各種標記

2018-5-11 常用javascript語法句式,包打天下那種

“.” 正則表達式驗證正則表達範圍完全多多支持一個數 pla ext1 兩個特殊的符號‘^‘和‘$‘。他們的作用是分別指出一個字符串的開始和結束。例子如下： "^The"：表示所有以"The"開始的字符串（"There"，"The cat"等）； "of desp

javascript 語法問題：

asc ann try style this tel broadcast all com https://www.w3schools.com/js/tryit.asp?filename=tryjs_change_innerhtml received: function

JavaScript語法之對象

get 成對 pan 子類 var 對象類型 des ret prototype 今天總結一下關於對象的重點和容易理解不清的知識點。 1 JavaScript中主要有兩種類型，即基本類型（包括string,number,boolean,null,undefined）和對

_.each _.map _.filter javascript 語法

ava fun 個數 nbsp function ray arr 遍歷針對 1.forEach():沒有返回值，只是針對每個元素調用func 簡單來說，就是將數組中的每個值，依次進行遍歷，執行功能函數如果只需對數組元素進行操作，不需返回任何值時適用

js01-javascript語法標準和數據類型

ron 有意義情況根據語法出現 shift 字母但是語法規則（1）JavaScript對換行、縮進、空格不敏感。備註：每一條語句末尾要加上分號，雖然分號不是必須加的，但是為了程序今後要壓縮，如果不加分號，壓縮之後將不能運行。（2）所有的符

canvas製作(小demo)---圓球碰壁反彈

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

javascript語法 --- forEach()，map()，filter()，includes()，startsWith()，find()，some()，every()

arr.forEach() 遍歷陣列全部元素，利用回撥函式對陣列進行操作，自動遍歷陣列.length次數，且無法break中途跳出迴圈，因此不可控。不支援return操作輸出，return只用於控制迴圈是否跳出當前迴圈。 var arr = [1,2,3,4,5,] ; arr.forEac

javascript語法 --- for of/for in迴圈與Map物件

迴圈陣列 var arr = [a,b,c,d] for (var i in arr){ console.log(i) //0 1 2 3 } for (var i of arr){ console.log(i) //a b c d } 迴圈jso

JSON語法和JavaScript語法分別

JSON是獨立於語言存在的，在不同的程式語言中對這種資料型別的實現不同，例如在JavaScript中使用JavaScript物件對這種資料格式進行實現，那麼在java中當然是用java物件實現。描述JSON格式資料的語法採用了JS物件字面量的表示方法,所以描述JSON的語法是js物件字

sublime text 3 javascript 語法檢查

本文是基於 sublime text 3 進行 javascript css html 的語法檢查。正式開始前，再囉嗦一遍關於外掛安裝的： 1、Package Control 元件安裝 ctrl+`調出 console，貼上以下程式碼到命令列並回車： import urllib

JavaScript語法 --> 碰壁反彈

JavaScript語法 –> 碰壁反彈

相關推薦