<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<pre><span id="cartoon"> </span></pre>
<button type="button" name="button" onclick="startAnimation()">Start</button>
<button type="button" name="button" onclick="pause()">Pause</button>
</body>
<script type="text/javascript">
var frames = [
":3",
":3",
":O=3",
":O==3",
":O===3",
":OC===3",
":O C===3",
":O C===3",
":O C===3",
":O C===3"
],
frameCount = 0,
time = 100,
agoAnimation,
forwardAnimation
animationOn = false;
function animation() {
cartoon.innerHTML = frames[frameCount];
}
function startAnimation() {
if (animationOn) return false;
animationOn = true;
forwardAnimation();
}
function forwardAnimation() {
forwardInterval = setInterval(function () {
if (frameCount === frames.length) {
clearInterval(forwardInterval);
frameCount--;
agoAnimation();
return false;
}
animation();
frameCount++;
}, time);
}
function agoAnimation() {
agoInterval = setInterval(function () {
frameCount--;
animation();
if (frameCount === 0) {
clearInterval(agoInterval);
frameCount++;
forwardAnimation();
}
}, time);
}
function pause() {
clearInterval(agoInterval);
clearInterval(forwardInterval);
animationOn = false;
}
</script>
</html>