Mudanças entre as edições de "Teste"
De Cliomatica - Digital History
(Tiago alterou o modelo de conteúdo da página Teste de "wikitexto" para "Javascript": teste) (Etiqueta: Mudança de modelo de conteúdo) |
|||
| Linha 1: | Linha 1: | ||
| − | + | <!DOCTYPE html> | |
| + | <html> | ||
| + | <style> | ||
| + | #myContainer { | ||
| + | width: 400px; | ||
| + | height: 400px; | ||
| + | position: relative; | ||
| + | background: yellow; | ||
| + | } | ||
| + | #myAnimation { | ||
| + | width: 50px; | ||
| + | height: 50px; | ||
| + | position: absolute; | ||
| + | background-color: red; | ||
| + | } | ||
| + | </style> | ||
| + | <body> | ||
| + | |||
| + | <p> | ||
| + | <button onclick="myMove()">Click Me</button> | ||
| + | </p> | ||
| + | |||
| + | <div id ="myContainer"> | ||
| + | <div id ="myAnimation"></div> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | function myMove() { | ||
| + | var elem = document.getElementById("myAnimation"); | ||
| + | var pos = 0; | ||
| + | var id = setInterval(frame, 10); | ||
| + | function frame() { | ||
| + | if (pos == 350) { | ||
| + | clearInterval(id); | ||
| + | } else { | ||
| + | pos++; | ||
| + | elem.style.top = pos + 'px'; | ||
| + | elem.style.left = pos + 'px'; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
Edição das 19h58min de 15 de setembro de 2019
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
