Skip to content

Instantly share code, notes, and snippets.

@zarpio
Created March 27, 2012 13:34
Show Gist options
  • Select an option

  • Save zarpio/2215904 to your computer and use it in GitHub Desktop.

Select an option

Save zarpio/2215904 to your computer and use it in GitHub Desktop.
Zarpio Counter with jQuery
<html>
<head>
<title>Counter</title>
<style type="text/css">
#show_counter {
border: solid 1px #ccc;
width: 200px;
height: 50px;
line-height: 50px;
display: block;
text-align: center;
margin: auto;
padding: 0;
}
#show_counter h1{
margin: 0;
padding: 0;
font-size: 42px;
font-family: arial;
}
button{
border: solid 1px #ccc;
background: CCC;
width: 100%;
padding: 10px;
margin-top: 6px;
}
</style>
</head>
<body>
<div id="show_counter">
<h1>0</h1>
<button>CLICK TO GO</button>
</div>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var x = $('h1').text();
var rs = parseFloat(x)+1;
//console.log(x, rs);
$('h1').text(rs);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment