<head> <title>Exercise</title> </head> <body> <script type="text/javascript"> function jump() { let elementStyle = document.getElementById("text").style; elementStyle.bottom = "0.5in"; elementStyle.color = "red"; setTimeout(function() {elementStyle.bottom = "0in"; elementStyle.color="black"}, 5000) } </script> <div onclick="jump()"> <p id="text" style="position: relative; font-size: 32px; color: black;">Jump!</p> </div> </body></html>
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Jump!</title> <script type="text/javascript"> function jump() { var jump = document.getElementById('jump'); jump.style = "top: 0.5in; color: red;"; setTimeout(function () { var jump = document.getElementById('jump'); jump.style = "top: 1in; color: black;"; }, 5000); } </script> <style> #jump { position: absolute; top: 1in; font-size: 32px; } </style> </head> <body> <div onclick="jump()" id="jump">Jump!</div> </body> </html>
<!doctype html><html> <head> <title> jumping text exercise </title> </head> <body> <div id="jumpText" style="color:black;font-size:32px;position: absolute; left:1in; top: 2in" onclick="move('0.5')"> Jump! <div> <script> function goBack(movement){ temp = document.getElementById("jumpText").style; temp.color= "black"; temp.top = movement + "in"; }//goBack function move(movement){ temp = document.getElementById("jumpText").style; temp.color= "red"; temp.top = movement + "in"; setTimeout(function(){goBack(2);}, 5000); }//move </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ajay Salh</title> <style> div { font-size: 32px; padding: 1in 0.25in; } </style> </head> <body> <div id="jump">Jump!</div> <script type="text/javascript"> document.getElementById("jump").onclick = function() { myStyle = document.getElementById("jump").style; myStyle.color="red"; myStyle.padding = "0.5in 0.25in" setTimeout(revert, 5000); }
function revert() { myStyle = document.getElementById("jump").style; myStyle.color="black"; myStyle.padding = "1in 0.25in" } </script> </body> </html>
<!DOCTYPE html> <html> <head></head> <body> <div id="jump" onclick="jump()" style="font-size:32px;position:relative;top: 0.5in">Jump!</div> <script> var jumper = document.getElementById("jump"); function jump() { jumper.style.cssText = "font-size:32px;color:red;position:relative;"; setTimeout(jumpEnd, 5000);} function jumpEnd() {
jumper.style.cssText = "font-size:32px;position:relative;top: 0.5in";} </script> </body> </html>
<!DOCTYPE html> <html lang="en" dir="ltr">
<head> <meta charset="utf-8"> <title>In-class exercise</title> </head>
<body> <div id="jump" style="color: black; font-size: 32pt; position: relative;" onclick='jump()'>Jump!</div>
<script> function jump() { var myStyle = document.getElementById("jump").style; myStyle.bottom = "0.5in"; myStyle.color = "red"; setInterval(function() {myStyle.bottom = "0in"; myStyle.color="black"}, 5000); } </script> </body> </html>