<!doctype html> <html> <head> <title>Test</title> <meta charset='utf-8'> <script> var val = 30; var msg = ' Seconds Left!'; function process_stuff() { var name_field = document.getElementById('name_field'); if (name_field.value == '') alert('Please Enter Your Name'); else if (val > 0) { document.getElementById('message_div').innerHTML = 'Congratulations, you won!'; clearInterval(); } return false; } setInterval(function() { val -= 5; if (val > 0) { document.getElementById('message_div').innerHTML = val + msg; } else { document.getElementById('message_div').innerHTML = "Times up, you missed a great opportunity!"; document.getElementById('btn').style.visibility = 'hidden'; } }, 5000); </script> </head> <body> <h1>Enter Your Name To Win</h1> <form onsubmit='return false;'> <input type='text' id='name_field' name='name' placeholder='Your name here' /> <input type='submit' id='btn' onclick='process_stuff();' value='Enter' /> </form> <div id='message_div'>30 Seconds Left!</div> </body> </html>(Edited: 2016-04-13)
<meta charset="UTF-8"> <title>Title</title></head> <body>
<h1>Enter Your Name to Win</h1> <form onsubmit="return false;"> <input type="text" name="userinput" id="userinput"/> <input type="submit" value="Enter" id="Enter" onclick="checkEmpty();"/> </form> <div id="test"> 30 Seconds Left! </div><script>
var timeLeft=30; var flag= true; var inputted=true; setInterval(checkTime,5000);
function checkTime(){ timeLeft-=5; if (timeLeft>0) { var userinput = elt('userinput'); elt('test').innerHTML=timeLeft+" seconds left!"; } else if (flag){ elt('test').innerHTML="Time is up!"; clearInterval(checkTime()); } else { clearInterval(checkTime()); } } function elt(id){ return document.getElementById(id); } /* function checkTime(){ var userinput=document.getElementById("userinput");
output=document.getElementById("outputmes"); output.innerHTML= "Please Enter Your Name"; output.style.visibility="visible";
}*/
function checkEmpty() { var userinput=elt('userinput').value; if(userinput=="") { alert("Please Enter Your Name"); } else { if (inputted) { elt('test').innerHTML = "Congratulations! You won! " + userinput; } timeLeft=0; flag=false; inputted=false; } }</script> </body> </html>
<head> <title>April 13</title> <meta charset="utf-8"/> <meta name="author" content="Tyler Jones"/> <meta name="description" content="April13 Lets build something"/> </head> <body> <h1> Enter Your Name to Win </h1> <form> <p><label for="name"> Name: </label> <input id="name" type="text" name="name" /></p> <p><button id="enter" onclick="return checkEmpty();">Enter</button></p> </form> <div id="timer"> 30 Seconds Left! </div> </body> <script type="text/javascript" > var timeLeft= 30; var msg = " Seconds Left!"; var youWon = false; setInterval(updateTime, 5000); function elt(id) { return document.getElementById(id); } function checkEmpty() { if(elt('name').value == "") { alert("Please Enter Your Name"); } else if(timeLeft > 0) { elt('timer').innerHTML = "Congratulations, you won!"; youWon = true; clearInterval(updateTime); } return false; } function updateTime() { timeLeft -= 5; if(!(youWon)) { if(timeLeft > 0) { elt('timer').innerHTML = timeLeft + msg; } else { elt('timer').innerHTML = "Times up, you missed a great opportunity!"; } } } </script></html>
<DOCTYPE html> <html> <h1>Enter your name to win</h1> <form> <label for="name">Name</label> <input type="text" name = "name" id ="name"/> </form> <button onclick="return won()">Try it</button> <div id="adviceBox" ></div> <script> var timeout = 30000 ; document.getElementsByTagName('div')[0].innerHTML = 30000;
myFunction(); function myFunction() { myVar = setInterval(timer, 3000); } function timer() { if ( timeout > 0 ) { document.getElementsByTagName('div')[0].innerHTML = timeout timeout=timeout - 5000;}
else if(timeout == 0) { document.getElementsByTagName('div')[0].innerHTML = 0;
alert("You have missed a great opportunity!") clearInterval(myVar)
}}
var box = document.getElementById('name') if (box.value == "") { alert("Please enter your name"); } else { if(timeout > 0) { alert("Congratulations!You have won") clearInterval(myVar)
} } return false}