|
Сообщение от Teamur
|
|
начать новое выделение?
|
можно
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
display: flex;
margin: 0;
height: 100vh;
background: #56bddc;
}
#box {
display: flex;
margin: auto;
box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
}
.el {
width: 60px;
line-height: 60px;
font-family: consolas;
font-size: 30px;
text-align: center;
cursor: pointer;
background: #fff;
-webkit-user-select: none;
user-select: none;
-moz-user-select: none;
}
.el:hover { background: #fece9a; }
.mark { background: #fece9a; }</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function e(a, c) {
[].forEach.call(b, function(f, d) {
(d >= a && d <= c || void 0 === a) && f.classList[void 0 === a ? "remove" : "add"]("mark")
})
}
var b = document.querySelectorAll(".el"),
a = void 0;
[].forEach.call(b, function(b, c) {
b.addEventListener("click", function() {
if (void 0 === a) a = c, e();
else {
var b = Math.min(c, a),
d = Math.max(c, a);
a = void 0;
e(b, d)
}
})
})
});
</script>
</head>
<body>
<div id='box'>
<div class='el'>1</div>
<div class='el'>2</div>
<div class='el'>3</div>
<div class='el'>4</div>
<div class='el'>5</div>
<div class='el'>6</div>
<div class='el'>7</div>
<div class='el'>8</div>
<div class='el'>9</div>
<div class='el'>X</div>
</div>
</body>
</html>