pershay,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
text-align: center;
background: #F0EFEE;
color: #777;
}
.count {
position: fixed;
display: inline-block;
float: left;
padding: 10px 20px;
background: #fff;
font: 1.5rem/1 monospace;
border-radius: .25rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
z-index:20;
left:20px;
top:15px;
}
.err{
top: 65px;
color: hsla(0, 100%, 50%, 1);
}
.total{
top: 115px;
}
.linear {
overflow: hidden;
display: inline-block;
position: relative;
margin: 20px 16px 20px 20px;
width: 80%;
height: 400px;
background:white;
}
.circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
top: 150px;
border-radius: 50%;
background: #F6AC31;
}
.rhombus {
border-style: solid;
border-color: transparent transparent #00BFFF transparent;
border-width: 0 15px 15px 15px;
height: 0;
width: 30px;
left: 0;
top: 150px;
position: absolute;
}
.rhombus:after {
content: "";
position: absolute;
top: 15px;
left: -15px;
width: 0;
height: 0;
border-style: solid;
border-color: #00BFFF transparent transparent transparent;
border-width: 40px 30px 0 30px;
}
.item{
cursor: crosshair;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var cls = ["circle", "rhombus"],
n = 0,
e = -1,
total = 0,
m = 0,
c = "circle";
function go(a) {
a && "click" == a.type ? ($(".ok").html(++n), $(".total").html(total += m)) : $(".err").html(++e);
a = $(this);
a.stop(true, false).removeClass(c).addClass(c = cls[cls.length * Math.random() | 0]);
var b = a.width();
a.css({
left: -b
}).animate({
left: "100%"
}, {
duration: 7000,
complete: go,
step: function(a) {
m = 100 - (a | 0)
}
})
}
$(".item").on("click", go);
jQuery.proxy(go, $(".item"))();
});
</script>
</head>
<body>
<div class="count ok">0</div>
<div class="count err">0</div>
<div class="count total">0</div>
<div class="linear">
<div class="item"></div>
</div>
</body>
</html>