定時器應用-點擊按鈕,div向右移動


需求是點擊button,div就一直往右移動,給個條件left=800px就停止移動,通過定時器來控制。

代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box1{
                width: 100px;
                height: 100px;
                background: red;
                /*因為在IE瀏覽器中如果沒有指定的值,就默認auto,所以我們需要先指定一個值*/
                position: absolute;
                left: 0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                
                //獲取元素的值
                function getStyle(obj,name){
                    if(window.getComputedStyle){
                        return getComputedStyle(obj,null)[name]
                    }
                    else{
                        return obj.currentStyle[name]
                    }
                }
                //需求是點擊button,div就一直往左移動
                btn = document.getElementById("btn");
                box1 = document.getElementById("box1");
                var timer;
                btn.onclick = function(){
                    
                    //清除上一個定時器
                    clearInterval(timer);
                    //開啟一個定時器,用來執行動畫效果
                    setInterval(function(){
                        //獲取box1原來的left值,通過復用的函數去獲取,parseInt是把字符串的數字部分轉換為number
                    
                    var oldlvalue = parseInt(getStyle(box1,"left"));
                    newvalue = oldlvalue + 10;
                    if(newvalue>800){
                        newvalue = 800;
                    }
                    box1.style.left = newvalue + "px";
                    /*
                     * 控制移動的位置,當800px時,就停止移動
                     */
                    if(newvalue ===  800){
                        clearInterval(timer);
                    }
                    },3000)
                }
            }
        </script>
    </head>
    <body>
        
        <button id="btn">點擊div向右移動</button>
        <br /><br />
        <div id="box1"></div>
    </body>
</html>

希望可以堅持學習新的,這也是作為一個復習,到時候要回顧一看便知,多謝支持!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM