javascript - JAVASCRIPT 递增innerHTML 数字onmouseover 并返回0 onmouseout
问题描述
我似乎在任何地方都找不到解决方案。基本上我有一个带有指针的仪表,当它悬停在上面时,它会旋转。我在 CSS 上工作得很好,但如果有人能指导我如何用 Javascript 来做,我很感激。
最重要的是,我需要使用innerHTML 使onmouseover 上的数字上升(如汽车仪表)并降低onmouseout。那么如何在 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 和脚本类/id
推荐阅读
- node.js - 无法将 alexa 链接到foursquare API
- python - 我在 Python 中查找非法 XML 字符的正则表达式非常慢
- r - r中的文本挖掘-从r中的数据框中的字符串列中查找最常出现的单词
- c++ - bool 类模板通用复制和移动构造函数
- r - 如何在 R 中用用户定义的颜色填充箱形图?
- c# - 给定一个满足 T.isArray 的类型 T,是否可以初始化一个 typeof(T).getElementType 类型的变量?
- css - 为什么 BODY 上的背景颜色会“冒泡”到 HTML
- raster - 在 R 中读取 .nc 文件
- java - 使用 Java 注解注入变量
- java - 为在 2D 中表示 1D 网格的游戏创建 toString 方法