<script type="text/javascript">
window.onload=function(){
var x1=document.getElementById("x1");
x1.onmouseover=bian;
}
var timer=null;
function bian(){
var x1=document.getElementById("x1");
var opacity=0.3;
clearInterval(timer);
timer=setInterval(function(){
if (opacity ==1) {
clearInterval(timer);
}
else{
opacity=opacity+0.1;
x1.style.opacity=opacity;
}
},30);
}
</script>
2016-06-22
js中的数字都是用浮点数表示的
你可以看一下每次opacity+0.1得到的值
你也可以看一下这篇文章https://segmentfault.com/q/1010000000137297了解一下浮点数的运算
关于你的问题有两种解法
第一种解法
-----用toFixed将opacity四舍五入为仅有一位小数的数字------
<script type="text/javascript">
window.onload = function() {
var x1 = document.getElementById("x1");
x1.onmouseover = function(){
bian();
}
}
var timer = null;
var opacity=0.3;
function bian() {
clearInterval(timer);
var x1 = document.getElementById("x1");
timer = setInterval(function() {
if (opacity.toFixed(1) == 1) {
clearInterval(timer);
} else {
opacity+=0.1;
x1.style.opacity=opacity.toFixed(1)
}
}, 30);
}
</script>
第二种解法
------将opacity转化为整数-------
<script type="text/javascript">
window.onload = function() {
var x1 = document.getElementById("x1");
x1.onmouseover = function(){
bian();
}
}
var timer = null;
var opacity=30;
function bian() {
clearInterval(timer);
var x1 = document.getElementById("x1");
timer = setInterval(function() {
if (opacity== 100) {
clearInterval(timer);
} else {
opacity+=10;
x1.style.opacity=opacity/100
}
}, 30);
}
</script>
举报
