html - How to use local storage in Javascript and output the stored elements in a table? -
this first question on stackoverflow.
so created this "mini-game" html, css , javascript. reaction tester. try click on squares , circles fast can. can play visiting http://output.jsbin.com/xejihojifa
what want have play button. when user clicks on play button, give prompt user or input user's name , store it. once user starts playing, want store highest score (least time in case) user gets, , display in table publicly visible leader board.
this first app using 3 html, css, , javascript. , have asked lot of friends , people @ local meetup groups, , have recommended me use html5 local storage or json. have no experience json @ moment. how go creating such thing.
and love criticisms or suggestions or comments or improve code below. thank in advance.
<!doctype html> <html> <head> <title>example domain</title> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body { font-family: verdana, geneva, sans-serif; } .container { padding: 20px 20px; text-align: center; color: #204056; } #border { border: 1px solid black; border-color: #204056; background-color: #f1f2f2; width: 700px; height: 700px; position:fixed; margin-left: 30%; } #box { width: 80px; height: 80px; background-color: red; display: none; position: relative; } .bold { font-weight: bold; color: #46c9b6; } </style> </head> <body> <div id="border"> <div class = "container"> <h1>test reactions!</h1> <p>click on boxes , circles can.</p> <p class="bold">your time: <span id="time">0</span>s</p> <div id="box"> </div> </div> </div> <script type="text/javascript"> function getrandomcolor() { var letters = '0123456789abcdef'.split(''); var color = '#'; (var = 0; < 6; i++ ) { color += letters[math.floor(math.random() * 15)]; } return color; } var clickedtime; var createdtime; var reactiontime; function makebox() { createdtime=date.now(); var time = math.random(); time = time * 3000; settimeout(function() { if (math.random() > 0.5) { document.getelementbyid('box').style.borderradius="40px"; } else { document.getelementbyid('box').style.borderradius= "0px"; } var top = math.random(); top = top * 300; var left = math.random(); left = left * 500; document.getelementbyid('box').style.top=top+"px"; document.getelementbyid('box').style.left=left+"px"; document.getelementbyid('box').style.backgroundcolor=getrandomcolor(); document.getelementbyid('box').style.display="block"; createdtime = date.now(); }, time); } document.getelementbyid('box').onclick=function() { clickedtime = date.now(); reactiontime = (clickedtime - createdtime)/1000; document.getelementbyid('time').innerhtml = reactiontime; this.style.display="none"; makebox(); } makebox(); </script> </body> </html>
here's quick live demo of how can use html local storage save list of high scores, retrieve , put data table structure. demonstration script takes list of high scores, stores local storage, retrieves local storage, displays in table.
since localstorage isn't supported stack snippet, here jsfiddle demonstrates code: https://jsfiddle.net/fsze55x7/1/
html:
<table id="highscores"> <tr><td>name</td><td>score</td></tr> </table> js:
var hst = document.getelementbyid("highscores"); var highscores = [ {name: "maximillian", score: 1000}, {name: "the second guy", score: 700}, {name: "the newbie", score: 50}, ]; localstorage.setitem("highscores", json.stringify(highscores)); var retrievedscores = json.parse(localstorage.getitem("highscores")); (var = 0; < retrievedscores.length; i++) { hst.innerhtml += "<tr><td>" + retrievedscores[i].name + "</td><td>" + retrievedscores[i].score + "</td></tr>"; }
Comments
Post a Comment