为了账号安全,请及时绑定邮箱和手机立即绑定

没用Math.round()方法,为什么没问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript_move</title>
    <style>
    *{margin: 0;padding: 0}
    #box4{background-color: green;width: 200px;height: 200px;opacity: 0.3;margin: 20px;float: left;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var movepart3=document.getElementsByTagName('div');
        for(var i=0;i<movepart3.length;i++){
            movepart3[i].timer=null;
            movepart3[i].onmouseover=function(){
                startmove3(this,100,'opacity');
            }
            movepart3[i].onmouseout=function(){
                startmove3(this,30,'opacity');
            }
        }
    }
    function startmove3(box3,target,attr){
        clearInterval(box3.timer);
        box3.timer=setInterval(function(){
            var a=0;
            if(attr=='opacity'){
                a=parseFloat(getStyle(box3,attr))*100;//这里没用Math.round();
            }else{
                a=parseInt(getStyle(box3,attr));
            }
            var speed=(target-a)/8;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(a==target){
            clearInterval(box3.timer);
            }
            else{
                if(attr=='opacity'){
                    box3.style.opacity=(a+speed)/100;
                    console.log(box3.style.opacity);//我这里加了断点,测试opacity当前值
                    box3.style.filter="alpha(opacity="+(a+speed)+")";
                }
                else{
                    box3.style[attr]=a+speed+"px";
                }
            }
        },30);
    }
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];
        }
    }
    </script>
</head>
<body>
    <div id="box4"></div>
    <div id="box4"></div>
    <div id="box4"></div>
    <div id="box4"></div>
</body>
</html>

没用Math.round()竟然没问题,奇了怪了,什么情况~?变量名有点奇怪,请答题的大大将就下。代码复制另存html就可以运行了。

下面是console.log()测试的opacity值:

http://img1.sycdn.imooc.com//564b59bc0001361b02000203.jpg

正在回答

2 回答

他不需要整数的话 用您这个也是正确的啊 逻辑没有错误 主要看需求

0 回复 有任何疑惑可以回复我~

是没什么问题呀。他用Math.round 只是为了得到整数。小数也是没有问题的呀

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

没用Math.round()方法,为什么没问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信