首頁猿問怎么讓它計算到整數(shù)啊?

怎么讓它計算到整數(shù)啊?

JavaScript

紫衣仙女 2018-12-06 13:52:49

現(xiàn)在是計算的時候不會到-500;它會跳過-500;所以會一直再滾動著..有什么方法可以計算到整數(shù)的?貌似有Math里的方法可以嗎? <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf8"><title>無標(biāo)題文檔</title><style type="text/css">*{margin:0;padding:0;} ul,li{list-style:none} .red{ background:red;} .blue{ background:blue} .wrap{width:500px;height:300px;overflow:hidden;position:relative;margin:55px auto} .inner{position:absolute;left:0;top:0;} .inner li{float:left;width:500px;height:300px;color:#fff} .orange{ background:orange} .nav{position:absolute;bottom:5px;right:5px;} .nav li{float:left;padding:1px 4px;background:orange;border:1px solid #000;margin-right:4px} .nav .nav_cur{background:#333;color:#fff;} #box{ position:absolute;top:50px;left:0;z-index:88}</style></head><body><div class="box" id="box">sd</div><div class="wrap"> <div class="inner" id="inner"> <ul> <li class="red">1</li> <li class="blue">2</li> <li class="red">3</li> </ul> </div> <div class="nav"> <li class="nav_cur">1</li> <li>2</li> </div></div><script type="text/javascript"> var timer; var u=0; function $(id){ return document.getElementById(id) } var i=0; var cur; var arr = [0,-500,-1000]; function aa(){ if($("inner").offsetLeft != arr[i+1]){ u += parseInt((arr[i+1] + $("inner").offsetLeft)/20); console.log(u) timer = setTimeout(function(){aa()},10) } else{ i++; if(i ==3){ clearInterval(cur) } clearTimeout(timer) } $("inner").style.left = u+"px"; } cur = setInterval(function(){ aa() },2000) </script></body></html>

查看完整描述

4 回答

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗獲得超8個贊

你可以自己判斷啊，你計算出來的相鄰兩個值一個比-500大，一個比-500小，這時候你就把值直接設(shè)成-500不就行了。

反對回復(fù) 2018-12-24

猛跑小豬

TA貢獻(xiàn)1858條經(jīng)驗獲得超8個贊

沒太看懂問題，不過只是取整的話，可以用Math.floor()

反對回復(fù) 2018-12-24

SMILET

TA貢獻(xiàn)1796條經(jīng)驗獲得超4個贊

假如計算到-482 下一個是-512 -534 -587.......?

它不計算到-500.

這樣怎么辦啊?

反對回復(fù) 2018-12-24

瀟湘沐

TA貢獻(xiàn)1816條經(jīng)驗獲得超6個贊

@深藍(lán)色夢想:?

不太明白你要做什么，看起來像是個跑馬燈，但里面設(shè)置了很多奇怪的動作，不曉得有什么特別的用意，這個代碼是可以跑的，看看是不是你要的效果，這是在你的基礎(chǔ)上改的，網(wǎng)上很多很好的代碼，如果沒什么極特別的要求，不如去網(wǎng)上找一下吧：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>無標(biāo)題文檔</title>

<style type="text/css">
*{margin:0;padding:0;}
     ul,li{list-style:none}
    .red{ background:#f00;}
    .blue{ background:#00f;}
    .green{background:#0f0;}
    .wrap{width:500px;height:300px;overflow:hidden;position:relative;margin:55px auto}
    .inner{position:absolute;left:0;top:0;float:left;}
    .inner ul{width:1800px;float:left;overflow:visible;}
    .inner li{float:left;width:500px;height:300px;color:#fff;display:block;}
    .orange{ background:orange}
    .nav{position:absolute;bottom:5px;right:5px;}
    .nav li{float:left;padding:1px 4px;background:orange;border:1px solid #000;margin-right:4px}
    .nav .nav_cur{background:#333;color:#fff;}
    #box{ position:absolute;top:50px;left:0;z-index:88}
</style>

<!--<script type="text/javascript" src="jquery-1.6.min.js">
</script>-->

</head>

<body>
<div class="box" id="box">sd</div>
<div class="wrap">
    <div class="inner" id="inner">
        <ul>
            <li class="red">1</li>
            <li class="blue">2</li>
            <li class="green">3</li>
        </ul>
    </div>
    
    <div class="nav">
        <li class="nav_cur">1</li>
        <li>2</li>
    </div>

</div>

<script type="text/javascript">
    var timer;
    var u=0;
    
        function $(id){
            return document.getElementById(id)
        }
        var i=0;
        var cur;
        var arr = [0,-500,-1000];
        function aa(){
            if($("inner").offsetLeft > arr[i]){
                u +=   parseInt((arr[i] + $("inner").offsetLeft)/20);
                console.log(u)
                timer = setTimeout(function(){aa()},1000)
            }
            else{
                i++;
                if(i ==3){
                    clearInterval(cur);
                    $("inner").offsetLeft=0;
                }
                clearTimeout(timer)
            }
            $("inner").style.left = u+"px";
        }
        
        cur = setInterval(function(){
        aa()
        },1000)
        
</script>


</body>
</html>