0
Желаемая ПоведениеКак создать часы и минуты, используя запросAnimationFrame()?
Создать два «блесны» за час и определение минут с помощью requestAnimationFrame().
Текущее поведение
Я адаптированный this solution включать два "Волчок" экземпляры.
hours вертушка работает, однако, нажав на кнопки со стрелками в/уменьшаем значение minutes изменяет значение hours, вместо значения minutes.
Что я Пробовал
То, что я пытался чувствует себя немного повторяющиеся, как я пытался позвонить requestAnimationFrame() в два раза, но я не могу думать о более динамично, чтобы выполнить его.
jsFiddle
//adapted from:
//https://stackoverflow.com/a/28127763
// the hrs 'input' area
var $hrs_input=$('.hrs_input > span');
// the mins 'input' area
var $mins_input=$('.mins_input > span');
// common variables
// the starting hr and mins value
var number=0;
// isDown starting value
var isDown=0;
// delay in changing value
var delay=200;
// ??
var nextTime=0;
requestAnimationFrame(watcher);
requestAnimationFrame(watcher2); // eek?
// ======= BEGIN for hours handling
$(".hr_arrow").mousedown(function(e){handleMouseDown(e);});
$(".hr_arrow").mouseup(function(e){handleMouseUp(e);});
$(".hr_arrow").mouseout(function(e){handleMouseUp(e);});
function handleMouseDown(e){
e.preventDefault();
e.stopPropagation();
if (e.target.id=='add_hr') {
isDown=1;
}
else if (e.target.id!='add_hr') {
isDown=-1;
}
}
function handleMouseUp(e){
e.preventDefault();
e.stopPropagation();
isDown=0;
}
function watcher(time) {
requestAnimationFrame(watcher);
if (time < nextTime) {
return;
}
nextTime = time + delay;
// when adding
if (isDown === 1) {
// no conditional needed
number+=isDown;
$hrs_input.text(number);
}
// when subtracting
else if (isDown === -1) {
// conditional needed - only subtract if number is not 0
if (number !=0) {
number+=isDown;
$hrs_input.text(number);
}
}
}
// ======= END for hours handling
// ======= BEGIN for mins handling
// just repeats the above hrs handling, with different
// function names and div references
$(".min_arrow").mousedown(function(e){handleMouseDown2(e);});
$(".min_arrow").mouseup(function(e){handleMouseUp2(e);});
$(".min_arrow").mouseout(function(e){handleMouseUp2(e);});
function handleMouseDown2(e){
e.preventDefault();
e.stopPropagation();
if (e.target.id=='add_min') {
isDown=1;
}
else if (e.target.id!='add_min') {
isDown=-1;
}
}
function handleMouseUp2(e){
e.preventDefault();
e.stopPropagation();
isDown=0;
}
function watcher2(time) {
requestAnimationFrame(watcher2);
if (time < nextTime) {
return;
}
nextTime = time + delay;
// when adding
if (isDown === 1) {
// no conditional needed
number+=isDown;
$mins_input.text(number);
}
// when subtracting
else if (isDown === -1) {
// conditional needed - only subtract if number is not 0
if (number !=0) {
number+=isDown;
$mins_input.text(number);
}
}
}
// ======= END for mins handling.hrs_input, .mins_input {
background: #9be672 none repeat scroll 0 0;
border-radius: 2px;
color: #333;
display: inline-block;
font-family: arial;
font-size: 13px;
margin: 0 0 0 2px;
min-width: 62px;
padding: 0 5px;
}
.hr_arrow, .min_arrow {
background: #ccc none repeat scroll 0 0;
border: 1px solid #999;
font-family: arial;
font-size: 12px;
}
.hr_arrow:hover, .min_arrow:hover {
cursor:pointer;
}
p {
font-family:arial;
font-size:14px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Click the up and down arrows to in/decrease the hours.</p>
<p>Desired Behaviour: For minutes in/decrementing to work the same way.</p>
<!-- BEGIN hrs -->
<span class="hrs_input">hrs: <span> </span>
</span>
<span id="add_hr" class="hr_arrow">▲</span>
<span class="hr_arrow">▼</span>
<!-- END hrs -->
<!-- BEGIN mins -->
<span class="mins_input">mins: <span> </span>
</span>
<span id="add_min" class="min_arrow">▲</span>
<span class="min_arrow">▼</span>
<!-- END mins -->Код
Это довольно громоздкий кусок кода, но я думаю, что проблема может ар ISE от вызова requestAnimationFrame() дважды, то есть:
requestAnimationFrame(watcher);
requestAnimationFrame(watcher2);