Created
March 31, 2018 18:32
-
-
Save ryu1-1uyr/c887ffd7b6e1a29df9f901a45effa896 to your computer and use it in GitHub Desktop.
move by Style
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html,body{ | |
| height: 100%; | |
| width: auto; | |
| } | |
| #red-box,#blue-box,#yellow-box{ | |
| width: 100px; | |
| height: 100px; | |
| margin:40px; | |
| position: relative; | |
| text-align: center; | |
| } | |
| #red-box{ | |
| background-color: red; | |
| } | |
| #blue-box{ | |
| background-color: blue; | |
| } | |
| #yellow-box{ | |
| background-color: yellow; | |
| } | |
| .center{ | |
| display: flex; /* 2 */ | |
| justify-content: center;/* 3 */ | |
| align-items: center; /* 4 */ | |
| } | |
| input{ | |
| padding: 2px; | |
| margin: 10px; | |
| width: 80px; | |
| height: 30px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <link rel="stylesheet" href="index.css"> | |
| </head> | |
| <body> | |
| <div class="center"> | |
| <div class="drag-and-drop" id="red-box"></div> | |
| <div class="drag-and-drop" id="blue-box"></div> | |
| <div class="drag-and-drop" id="yellow-box"></div> | |
| </div> | |
| <div class="center"> | |
| <input type="button" value="right_R" onclick="moverightR()"> | |
| <input type="button" value="right_B" onclick="moverightB()"> | |
| <input type="button" value="right_Y" onclick="moverightY()"><br> | |
| </div> | |
| <div class="center"> | |
| <input type="button" value="left_R" onclick="moveleftR()"> | |
| <input type="button" value="left_B" onclick="moveleftB()"> | |
| <input type="button" value="left_Y" onclick="moveleftY()"><br> | |
| </div> | |
| <div class="center"> | |
| <input type="button" value="STOP_R" onclick="stopR()"> | |
| <input type="button" value="STOP_B" onclick="stopB()"> | |
| <input type="button" value="STOP_Y" onclick="stopY()"> | |
| </div> | |
| <div class="center"><input type="button" value="ReSet" onclick="reSet()"></div> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log("helloJS"); | |
| let sr; | |
| let sb; | |
| let sy; | |
| let xR = document.getElementById("red-box"); | |
| let xB = document.getElementById("blue-box"); | |
| let xY = document.getElementById("yellow-box"); | |
| const firstSetUp = () => { | |
| xR.style.left ='0px'; | |
| xB.style.left ='0px'; | |
| xY.style.left ='0px'; | |
| xR.style.right ='0px'; | |
| xB.style.right ='0px'; | |
| xY.style.right ='0px'; | |
| }; | |
| firstSetUp(); | |
| const moverightR = () =>{ | |
| xR.style.left = parseInt(xR.style.left) + 1 + 'px'; | |
| console.log(xR.style.left); | |
| sr = setTimeout(moverightR,20); | |
| }; | |
| const moverightB = () =>{ | |
| xB.style.left = parseInt(xB.style.left) + 1 + 'px'; | |
| console.log(xB.style.left); | |
| sb= setTimeout(moverightB,20); | |
| }; | |
| const moverightY = () =>{ | |
| xY.style.left = parseInt(xY.style.left) + 1 + 'px'; | |
| console.log(xY.style.left); | |
| sy= setTimeout(moverightY,20); | |
| }; | |
| const moveleftR = () =>{ | |
| xR.style.left =parseInt(xR.style.left) - 1 + 'px'; | |
| console.log(xR.style.left); | |
| sr = setTimeout(moveleftR,20); | |
| }; | |
| const moveleftB = () =>{ | |
| xB.style.left =parseInt(xB.style.left) - 1 + 'px'; | |
| console.log(xB.style.left); | |
| sb = setTimeout(moveleftB,20); | |
| }; | |
| const moveleftY = () =>{ | |
| xY.style.left =parseInt(xY.style.left) - 1 + 'px'; | |
| console.log(xY.style.left); | |
| sy = setTimeout(moveleftY,20); | |
| }; | |
| /* | |
| const moveleftY = () =>{ | |
| xR.style.right = parseInt(xR.style.right) + 1 + 'px'; | |
| console.log(xR.style.right); | |
| sr = setTimeout(moveleftY,20); | |
| };*/ | |
| const stopR = () => { | |
| clearTimeout(sr); | |
| }; | |
| const stopB = () => { | |
| clearTimeout(sb); | |
| }; | |
| const stopY = () => { | |
| clearTimeout(sy); | |
| }; | |
| const reSet = () => { | |
| firstSetUp(); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment