1. 程式人生 > >JavaScript 字符串拼接 & setInterval()實現簡單動畫

JavaScript 字符串拼接 & setInterval()實現簡單動畫

一次 spa bsp pan 加油 move col func prop

在學習JavaScript DOM編程藝術第十章時,遇到了一個小問題:

想要實現的最終效果:一個小方塊不斷的向下移動。

小方塊絕對定位,設置好top與left值後,寫了一個動態獲取方塊到上方距離並在每次調用中加50px的函數

function move(){
            box.style.top += 50px;//錯在這一行
            console.log(getComputedStyle(box).top);
        }

由於還比較小白,忘記了.style.property只能獲取內聯樣式,用console.log發現問題(輸出的是空值)之後,又改成了= getComputedStyle(box).top + "50px"

還是不行,查了一下發現這樣相當於"200px10px"的一個字符串,沒有意義的。然後我也不知道我咋想的,= getComputedStyle(box).top -"px"+"50px"(我可真是鬼才)突然想到了用parseInt,我直接給你變成數值類型,然後在末尾拼個px

var mid = parseInt(getComputedStyle(box).top);
box.style.top = mid+50+"px";

寫到這裏,我又回去用typeOf確認了box.style.top是string~(我記性真的bad)

這裏還犯了一個小錯誤,把var mid 寫在了函數外面,這樣只會改變一次,因為mid的值不會變~

加油!!

JavaScript 字符串拼接 & setInterval()實現簡單動畫