Счетчик цифр Js New
HTML
<div id="primer">
<input type="text" class="number" value="1" />
<div class="clear"></div><br/>
<input type="text" class="number" value="1" />
<div class="clear"></div><br/>
<input type="text" class="number" value="1" />
<div class="clear"></div><br/>
<input class="you number" value="5" />
</div>
CSS
/* Number */
.choice {
position: relative;
display: table;
}
.choice>input {
padding: 2px 2px 2px 4px;
font-size:30px;
height: 37px;
float: left;
border: 1px solid #666;
border-radius: 4px 0 0 4px;
}
.choice > span {
background-color: #fafafa;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
border: 1px solid #666;
cursor: pointer;
display: block;
font-size: 16px;
height: 19px;
right: -19px;
line-height: 12px;
margin: 0;
padding: 2px;
position: absolute;
text-align: center;
width: 20px;
}
.choice>span.minus {
top: 18px;
}
.choice>span:hover {
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
transition: all 0.2s ease;
}
/****************************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clear{
clear: both;
}
#primer{margin:30px;}
#primer input {width: 42px;}
JavaScript
// Author: Vlasenko Fedor, [email protected]
(function () {
var plus = document.createElement("span");
var minus = document.createElement("span");
var div = document.createElement("div");
div.className = "choice";
plus.className = "plus";
minus.className = "minus";
plus.appendChild(document.createTextNode("+"));
minus.appendChild(document.createTextNode("-"));
div.appendChild(plus);
div.appendChild(minus);
if (!Array.prototype.forEach) {
Array.prototype.forEach = function (fn, scope) {
for (var i = 0, len = this.length; i < len; ++i) {
fn.call(scope, this[i], i, this);
}
};
}
HTMLCollection.prototype.forEach = NodeList.prototype.forEach
= Array.prototype.forEach;
function build(el) {
var new_el = div.cloneNode(true);
new_el.appendChild(el.cloneNode());
el.parentNode.replaceChild(new_el, el);
}
function num_click(e) {
var el = e ? e.target : window.event.srcElement;
if (el.tagName !== "SPAN") return;
var inp = this.lastChild;
var val = +inp.value;
inp.value = val +(el.className == "plus" ? 1: val > 0 ? -1 : 0);
}
function num_input(e) {
var el = e ? e.target : window.event.srcElement;
if (el.tagName !== "INPUT") return;
var val = el.value.replace(/\D/g, '');
el.value = val ? val : 0;
}
document.querySelectorAll('input.number').forEach(build);
document.querySelectorAll('div.choice').forEach(function (el) {
el.onclick = num_click;
el.oninput = num_input;
});
}());