通过JS完成电梯动画效果

最新推荐文章于 2023-12-09 17:50:52 发布

weixin_30764137

最新推荐文章于 2023-12-09 17:50:52 发布

阅读量1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/qq965921539/p/11168900.html

版权

实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果

用JS写了一个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>电梯</title>
        <style>
            div.solid {
                border-style: solid;
                margin-top: 300px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div style="height: 500px;">
            <div class="solid" id='dianti'>?&emsp;<span>当前所在楼层:</span><span id = 'diantival'></span></div>
            <div style="position: fixed; bottom: 300px;">
                <div>
                    <br/>
                    <button οnclick="rise()">冲！！！</button>&nbsp;
                    <button οnclick="full()">降！！！</button>
                </div>
                <div>
                    <br/>
                    <button οnclick="change(1)">使电梯到1楼</button>&emsp;
                    <button οnclick="change(2)">使电梯到2楼</button>&emsp;
                    <button οnclick="change(3)">使电梯到3楼</button>
                </div>
            </div>
        </div>
        <script>
            function getTop(){
                let dt = document.getElementById("dianti");
                let computedStyle = getComputedStyle(dt, null);
                let num = 0;
                for(let i = 0; i < computedStyle.marginTop.length - 2; i++){
                    num *= 10;
                    num += parseInt(computedStyle.marginTop[i]);
                }
                return num;
            }
            var Interval = null;
            var floor = 1;
            document.getElementById("diantival").innerText = floor;
            function change(val){
                let timer = 0;
                if(floor == 1 && val > 1){
                    let temp = (val - floor) * 100;
                    Interval = setInterval(function(){
                        let len = getTop();
                        if(len == 0){
                            return
                        }
                        len--;
                        timer++;
                        if(timer == temp){
                            clearInterval(Interval);
                            document.getElementById("diantival").innerText = val;
                        }
                        document.getElementById("dianti").style.marginTop = len + 'px';
                    }, 50);
                }else if(floor == 2){
                    let temp = 100;
                    if(val == 1){
                        Interval = setInterval(function(){
                        let len = getTop();
                        if(len == 300){
                            return
                        }
                        len++;
                        timer++;
                        if(timer == temp){
                            clearInterval(Interval);
                            document.getElementById("diantival").innerText = val;
                        }
                        document.getElementById("dianti").style.marginTop = len + 'px';
                    }, 50);
                    }else if(val == 3){
                        Interval = setInterval(function(){
                        let len = getTop();
                        if(len == 0){
                            return
                        }
                        len--;
                        timer++;
                        if(timer == temp){
                            clearInterval(Interval);
                            document.getElementById("diantival").innerText = val;
                        }
                        document.getElementById("dianti").style.marginTop = len + 'px';
                    }, 50);
                    }
                }else if(floor == 3){
                    let temp = (floor - val) * 100;
                    Interval = setInterval(function(){
                        let len = getTop();
                        if(len == 300){
                            return
                        }
                        len++;
                        timer++;
                        if(timer == temp){
                            clearInterval(Interval);
                            document.getElementById("diantival").innerText = val;
                        }
                        document.getElementById("dianti").style.marginTop = len + 'px';
                    }, 50);
                }
                floor = val;
            }
            function rise(){
                setInterval(_rise, 100);
            }
            function full(){
                setInterval(_full, 100);
            }
            function _rise(){
                let len = getTop();
                if(len == 0){
                    return
                }
                len--;
                document.getElementById("dianti").style.marginTop = len + 'px';
            }
            function _full(){
                let len = parseInt(getTop());
                if(len == 300){
                    return
                }
                len+=1;
                document.getElementById("dianti").style.marginTop = len + 'px';
            }
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/qq965921539/p/11168900.html

weixin_30764137

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
通过JS完成电梯动画效果

实习单位要求做一个在Vue项目中比较能适配的来反映货梯当前状况的页面效果用JS写了一个<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>电梯</title> <style&g...
复制链接

扫一扫