如果你曾經(jīng)上過一個(gè)網(wǎng)站，看到了在頁面上跑動(dòng)的小人，你一定會(huì)覺得這非常有趣。這樣的小人跑動(dòng)特效是通過 JavaScript 實(shí)現(xiàn)的，而且不難學(xué)習(xí)。在這篇文章中，我們會(huì)學(xué)習(xí)如何用 JavaScript 創(chuàng)建一個(gè)跑動(dòng)的小人。

首先，我們需要設(shè)計(jì)一個(gè)小人的圖標(biāo)。這個(gè)圖標(biāo)應(yīng)該是一個(gè) PNG 或 GIF 圖像，它應(yīng)該有一個(gè)透明的背景。我們可以用如下 HTML 代碼插入這個(gè)小人的圖標(biāo)：

<img id="runner" src="runner.png" style="position: absolute; bottom: 0; left: 0;">

這個(gè)代碼會(huì)創(chuàng)建一個(gè)帶有 ID 為 “runner” 的 img 元素。通過設(shè)置它的 style 屬性，我們可以把這個(gè)圖像放到頁面底部左側(cè)位置。

接下來，我們需要寫 JavaScript 代碼來使小人跑動(dòng)起來。我們可以用 setInterval 函數(shù)來設(shè)置一個(gè)定時(shí)器，每隔一段時(shí)間就改變小人的位置。例如，如果我們希望小人每 10 毫秒向右移動(dòng) 10 像素：

setInterval(function() {
var runner = document.getElementById('runner');
runner.style.left = (parseInt(runner.style.left) + 10) + 'px';
}, 10);

在這個(gè)代碼中，我們先獲取 ID 為 “runner” 的元素。然后，我們通過 parseInt 把 runner.style.left 轉(zhuǎn)換為數(shù)字。再加上 10，就把小人向右移動(dòng)了 10 像素。最后，我們把新的位置設(shè)置上去。

有了這段代碼，小人就會(huì)一直向右移動(dòng)。但是，我們希望小人能夠跑過屏幕右邊緣后從屏幕左邊緣重新出現(xiàn)。為了實(shí)現(xiàn)這個(gè)效果，我們可以加上如下代碼：

if (runner.offsetLeft > document.documentElement.clientWidth) {
runner.style.left = '-60px';
}

在這個(gè)代碼中，我們先比較小人在頁面中的左偏移量與頁面寬度。如果小人已經(jīng)移到了頁面外面，我們就把小人的位置調(diào)整到頁面左側(cè) 60 像素的位置上。

有了這些代碼，我們就可以創(chuàng)建一個(gè)跑動(dòng)的小人了。我們可以通過調(diào)整讓小人跑得更快或者更慢，或者加上其他效果。不過，這已經(jīng)足夠讓我們了解如何使用 JavaScript 創(chuàng)建一個(gè)跑動(dòng)的小人了。