Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "moving up and down left and right with native js operation dom". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "so use native js operation dom to move up and down left and right" can help you solve the problem.

The code is as follows:

Document

* {

Padding: 0

Margin:0

}

Html,body,main {

Height: 100%

Width: 100%

}

.box {

Height: 20px

Width: 20px

Border-radius: 50%

Background:red

Position: absolute

Left: 0

Right: 0

}

.lookFood {

Font-size: 20px

Position: absolute

Left: 50%

Top:40px

Transform: translateX (- 50%)

}

.food {

Height: 20px

Width: 20px

Background: # faa

Border-radius: 50%

Position: absolute

}

Footer span {

Position: absolute

Bottom: 20px

Left: 50%

Transform: translateX (- 50%)

}

Got 0 food

Tip: press the ↑↓←→ key to start collecting food.

Var box = document.getElementsByClassName ("box") [0]

Food = document.getElementsByClassName ("food") [0]

Span = document.getElementsByTagName ("span") [0]

/ / the number of food obtained

I = 0

/ / initialize the location of the food; call every time you eat

Function foodInit () {

Food.style.left = Math.random () * parseInt (window.getComputedStyle (document.body) .width)-20 + "px"

Food.style.top = Math.random () * parseInt (window.getComputedStyle (document.body) .height)-20 + "px"

/ / get random hexadecimal color values

Food.style.background ='#'+ (~ (Math.random ()) * (1 1? (speed/60): 1

}

Var left = parseInt (window.getComputedStyle (dom) .margin left)

Top = parseInt (window.getComputedStyle (dom) .marginal Top)

MainHeigeht=parseInt (window.getComputedStyle (main) .height)-20

MainWidth=parseInt (window.getComputedStyle (main) .width)-20

/ / for left and right and up and down penetration

ChangeXY=function (xy,min,max) {

If (xy=max) {

Xy=min

}

Return xy

}

Document.addEventListener ("keydown", function (e) {

E.preventDefault ()

KeyCode.downKeyCode ()

If (keyCode [37] & &! keyCode.time [37]) {

KeyCode.time [e.keyCode] = setInterval (function () {

Var x = dom.offsetLeft-left-speed

X=changeXY (xpeno mainWidth)

Dom.style.left = x + "px"

Callback&&callback ()

}, 50apace 3)

}

If (keyCode [38] & &! keyCode.time [38]) {

KeyCode.time [e.keyCode] = setInterval (function () {

Var y = dom.offsetTop-top-speed

Y=changeXY (YBEO MainmainHeigeht)

Dom.style.top=y+ "px"

Callback&&callback ()

}, 50apace 3)

}

If (keyCode [39] & &! keyCode.time [39]) {

KeyCode.time [e.keyCode] = setInterval (function () {

Var x = dom.offsetLeft-left + speed

X=changeXY (xpeno mainWidth)

Dom.style.left = x + "px"

Callback&&callback ()

}, 50apace 3)

}

If (keyCode [40] & &! keyCode.time [40]) {

KeyCode.time [e.keyCode] = setInterval (function () {

Var y = dom.offsetTop-top + speed

Y=changeXY (YBEO MainmainHeigeht)

Dom.style.top=y+ "px"

Callback&&callback ()

}, 50apace 3)

}

/ / remove the timer in the current direction each time the button is popped

Document.addEventListener ("keyup", function (e) {

KeyCode.upKeyCode ()

ClearInterval (keyCode. Time [e.keyCode])

KeyCode.time [e.keyCode] = null

})

})

}

) ()

Function init () {

FoodInit (food)

KeyDomMove (box, document.body,500,start)

}

Init ()

This is the end of the content about "so use native js to operate dom to move up and down, left and right". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.