Skip to content

Instantly share code, notes, and snippets.

@maechabin

maechabin/click_count.html

Last active December 11, 2015 16:08
Show Gist options
  • Save maechabin/4625497 to your computer and use it in GitHub Desktop.
Save maechabin/4625497 to your computer and use it in GitHub Desktop.
Download ZIP
クリック数をカウント
Raw
click_count.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Click Counter</title>
<style>
body {
background-image: linear-gradient(-45deg, #daea6a 25%, #fff 25%, #fff 50%, #daea6a 50%, #daea6a 75%, #fff 75%, #fff);
background-size: 3px 3px;
}
#counter-body {
background-image: linear-gradient(-45deg, #ececcf 25%, #fff 25%, #fff 50%, #ececcf 50%, #ececcf 75%, #fff 75%, #fff);
background-size: 3px 3px;
margin: 10px;
border: 1px solid #333;
border-radius: 4px;
margin: 100px auto;
padding: 20px;
text-align: center;
}
#count {
color: #59b300;
font-size: 80px;
text-shadow: 1px 1px 1px #333;
}
</style>
</head>
<body>
<section id="counter-body">
<div id="count">0</div>
<div><input type="button" value="click" id="click"></div>
<div><input type="button" value="reset" id="reset"></div>
</section>
<script>
window.onload=function() {
var reset=document.getElementById("reset");
var click=document.getElementById("click");
var count=document.getElementById("count");
click.onclick=function() {
var i=parseInt(count.innerHTML)+1;
count.innerHTML=i;
}
reset.onclick=function() {
count.innerHTML="0";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment