So use native js to operate dom to move up and down, left and right.
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.
