Счетчик цифр
HTML
<input type="text" class="number" /><div class="clear"></div>
<input type="text" class="number" /><div class="clear"></div>
<input type="text" class="number" />
CSS
.choice {
position: relative;
}
.choice>input {
padding: 2px 2px 2px 4px;
font-size:30px;
width: 70px;
height: 35px;
float: left;
border: 1px solid #666;
border-radius: 4px 0 0 4px;
}
.choice>i {
display: block;
font-size:18px;
position:absolute;
left: 58px;
margin: 0;
padding: 2px;
line-height:14px;
width: 14px;
border: 1px solid #666;
background-color: #E4E4E4;
text-align: center;
cursor: pointer;
}
.choice>i:first-child {
height: 16px;
}
.choice>i:last-child {
border-top: none;
top: 20px;
height: 16px;
}
.choice>i:hover {
background-color: #999;
}
.clear {
clear: both;
height: 20px;
}
JavaScript
// Author: Vlasenko Fedor, [email protected]
(function () {
var path = location.pathname,
body = window.document.body, inp, ls,
frag = document.createDocumentFragment();
frag.appendChild(body.cloneNode(true));
var inputs = frag.querySelectorAll('input.number'),
len = inputs.length,
data = '<i onclick="+ato(this,1);">+</i><i onclick="ato(this);">-</i></div>';
function isLocalStorageAvailable() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
ls = isLocalStorageAvailable();
for (;len--;) {
inp = inputs[len];
inp.setAttribute('value', ls && localStorage[path+'inp_'+ len] || 1);
inp.outerHTML = '<div class="choice" id="inp_'+len+'">' + inp.outerHTML + data;
}
body.innerHTML = '';
body.appendChild(frag);
ato = function (el, val) {
var par = el.parentNode || el.parentElement,
inp = par.children[0],
inpvalue = +inp.value||0;
inp.value = inpvalue + (inpvalue > 0 ? val || ~val : val || 0);
ls && (localStorage[path+par.id] = inp.value);
}
}());