**
實例： 利用html表單和js的數學對象及函數做一個有驗證碼的簡單登錄表單
。。。。。。。
**
今天也是學習的一天，學習了知識之後，使用才能加深我們的記憶，今天做的是一個簡單的實際操作，就是利用鍵盤事件實現小人快跑。
**
關注小文我們一起學習進步。
我們可以利用我們的“上、下、左、右”和“W、S、A、D”來控制我們的小人在屏幕上進行上下左右的移動。
注意：光理論是不夠的 ,在此送大家2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，點擊此處免費獲取，小白勿進哦
首先肯定要想到我們的鍵盤事件，然後要想到我們的keycode。然後我們就可以開始一步一步的寫了：
首先將我們最起初的第一張圖放上去就是我們打開頁面是一個正對着我們的小人
然後將他設置定位，這樣我們纔可以在後面讓它動起來
然後獲取我們圖片的節點：
前面的鍵盤事件我們有學過，要讓他動起來不是給這個要動的對象添加節點，而是給我們的document文檔添加事件：裏面用一個if函數來判斷我們小人移動的條件，滿足即可移動，由於上下左右和WSAD都可以控制，那麼在條件裏還需要用到我們的 “||” 或，
當然這裏因爲我們的小人動起來是五張圖片進行切換實現它的動起來，而不僅僅是圖片的平移，圖片的變化是從圖0到圖4，然後返回圖0繼續循環，所以我們每一個if判斷之後的執行裏都要這麼寫一個循環，那就會顯得有一點麻煩，所以我們就在開頭先封裝一個函數，（這樣只用寫一次），我們下面只需要進行調用即可
那麼這個小訓練到此便是完成了，
那麼下面附上我們完整的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
//給小人設置定位
#xiaoren{
left: 500px;
top: 250px;
position: absolute;
}
</style>
<body>
//初始的小人圖片
<img src="images/down-0.png" id="xiaoren">
<script>
var xr = document.getElementById("xiaoren");
//小人移動的圖片循環
var i = -1;
function fn(fangxiang){
i++;
if(i>=5){
i=0;
}
xr.src ="images/"+fangxiang+"-"+i+".png";
}
document.onkeydown = function(e){
var evt=window.event || e;
if(evt.keyCode==37 || evt.keyCode==65){
xr.style.left = xr.offsetLeft-10+"px";
fn("left");
}else if(evt.keyCode==38 || evt.keyCode==87){
xr.style.top = xr.offsetTop-10+"px";
fn("up")
}else if(evt.keyCode==39 || evt.keyCode==68){
xr.style.left = xr.offsetLeft+10+"px";
fn("right");
}else if(evt.keyCode==40 || evt.keyCode==83){
xr.style.top = xr.offsetTop+10+"px";
fn("down");
}
}
</script>
</body>
</html>
**
