An code lock with wheel like a safe

by Ruslan Alikberov

HTML

<body id='faceplate'>
<pre title='Use the mouse wheel'>Code Lock:
<span id='code'>876543210</span>
</pre>
</body>

CSS

#faceplate {
	border		:thick outset silver;
	background	:grey;
	font-size	:96px;
	overflow	:auto;
}
span {
  border: thick green inset;
  background-color:silver;
}

JavaScript

var	elem = document.getElementById("faceplate"),
	info = document.getElementById("code"),
	digits = info.textContent.length, code = parseInt(info.textContent) || 0,
	last_wheel = 0;
	if(elem.addEventListener) {
		if("onwheel" in document) 		// IE9+, FF17+
			elem.addEventListener("wheel", onWheel);
		else
		if("onmousewheel" in document)	// устаревший вариант события
			elem.addEventListener("mousewheel", onWheel);
		else							// Firefox < 17
			elem.addEventListener("MozMousePixelScroll", onWheel);
	} else								// IE8-
		elem.attachEvent("onmousewheel", onWheel);
// Это решение предусматривает поддержку IE8-
function onWheel(e) {
	e = e || window.event;
	var wheel = e.deltaY || e.detail || e.wheelDelta;
	// deltaY, detail содержат пиксели
	// wheelDelta не дает возможность узнать количество пикселей
	// onwheel || MozMousePixelScroll || onmousewheel
	if(wheel * last_wheel > 0)
		code = (code - code % 10) + (code + 1) % 10;
	else
		code = code % Math.pow(10, digits) * 10,
		last_wheel = wheel;
	info.innerHTML = (code + Math.pow(10, digits)).toString(10).substr(1);
	e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}