JAVASCRIPT 增加 innerHTML 数量 onmouseover 并回到 0 onmouseout
JAVASCRIPT Incrementing innerHTML number onmouseover and back to 0 onmouseout
我似乎无法在任何地方找到解决方案。基本上我有一个带有指针的仪表,悬停在指针上时会旋转。我在 CSS 中工作得很好,但如果有人可以指导我如何在 Javascript 中做到这一点,我将不胜感激。
最重要的是,我需要使用 innerHTML 在鼠标悬停时 数字上升 (就像汽车仪表一样)并在鼠标移出时下降。那么如何使用 Javascript 中的一系列数字呢?我需要它从 0 到 270。
提前致谢:)
HTML:
<div id="all">
<svg viewBox="0 0 113 111">
<style>
.st3{fill:#17ceff}.st4{fill:none}
</style>
<path d="M64.2 56.3c0 4.4-3.6 8-8 8-1.4 0-2.7-.4-3.9-1L31.7 80.6l17.5-20.5c-.6-1.1-1-2.4-1-3.8 0-4.4 3.6-8 8-8s8 3.5 8 8z" fill="#252626" stroke="#fff" stroke-width=".47" stroke-miterlimit="10" id="needle"/>
<div class="result" id="result">0</div>
</svg>
</div>
CSS:
#needle {
transform-origin: inherit;
transition: 0.70s;
}
#needle:hover {
transition: 0.70s;
transform: rotate(270deg);
}
<div class="whole-container">
<div class="meter">0</div>
<div class="needle"></div>
</div>
Jquery
var inte;
$('.whole-container').on('mouseover', function () {
clearInterval(inte);
var i = parseInt($('.meter').text());
inte = setInterval(() => {
$('.meter').text(i);
$('.needle').css('transform', 'rotate(' + i + 'deg)');
if (i == 270) clearInterval(inte);
i++;
}, 100);
});
$('.whole-container').on('mouseout', function () {
clearInterval(inte);
var i = parseInt($('.meter').text());
inte = setInterval(() => {
$('.meter').text(i);
$('.needle').css('transform', 'rotate(' + i + 'deg)');
if (i == 0) clearInterval(inte);
i--;
}, 100);
});
请根据需要更改 html 和脚本 classes/id
我似乎无法在任何地方找到解决方案。基本上我有一个带有指针的仪表,悬停在指针上时会旋转。我在 CSS 中工作得很好,但如果有人可以指导我如何在 Javascript 中做到这一点,我将不胜感激。
最重要的是,我需要使用 innerHTML 在鼠标悬停时 数字上升 (就像汽车仪表一样)并在鼠标移出时下降。那么如何使用 Javascript 中的一系列数字呢?我需要它从 0 到 270。
提前致谢:)
HTML:
<div id="all">
<svg viewBox="0 0 113 111">
<style>
.st3{fill:#17ceff}.st4{fill:none}
</style>
<path d="M64.2 56.3c0 4.4-3.6 8-8 8-1.4 0-2.7-.4-3.9-1L31.7 80.6l17.5-20.5c-.6-1.1-1-2.4-1-3.8 0-4.4 3.6-8 8-8s8 3.5 8 8z" fill="#252626" stroke="#fff" stroke-width=".47" stroke-miterlimit="10" id="needle"/>
<div class="result" id="result">0</div>
</svg>
</div>
CSS:
#needle {
transform-origin: inherit;
transition: 0.70s;
}
#needle:hover {
transition: 0.70s;
transform: rotate(270deg);
}
<div class="whole-container">
<div class="meter">0</div>
<div class="needle"></div>
</div>
Jquery
var inte;
$('.whole-container').on('mouseover', function () {
clearInterval(inte);
var i = parseInt($('.meter').text());
inte = setInterval(() => {
$('.meter').text(i);
$('.needle').css('transform', 'rotate(' + i + 'deg)');
if (i == 270) clearInterval(inte);
i++;
}, 100);
});
$('.whole-container').on('mouseout', function () {
clearInterval(inte);
var i = parseInt($('.meter').text());
inte = setInterval(() => {
$('.meter').text(i);
$('.needle').css('transform', 'rotate(' + i + 'deg)');
if (i == 0) clearInterval(inte);
i--;
}, 100);
});
请根据需要更改 html 和脚本 classes/id