Count up or down on click
This little script will count up or down after click.
HTML
<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--ende powered by SCURRILUS-->
<div class="code">
<div id="count">1</div>
<a class="button" href="javascript:countDown();">-</a>
<a class="button" href="javascript:countUp();">+</a>
</div>
CSS
#count {
border: 1px solid;
padding: 10px;
text-align: center;
width: 50px;
margin-bottom: 10px;
border-radius: 20px;
box-shadow: 2px 2px 5px #333333;
}
.button {
background: #000;
display: block;
text-align: center;
width: 25px;
height: 25px;
float: left;
margin-left: 7px;
font-size: 22px;
}
a {
color: #fff;
text-decoration: none;
}
JavaScript
function countUp() {
$('#count').html(function(i,val) {
return val*1+1;
});
}
function countDown() {
var countValue = $('#count').html();
if (countValue == '-4') {
//stop counting.
} else {
$('#count').html(function(i,val) {
return val*1-1;
});
}
}