运动的小方块

最新推荐文章于 2024-10-17 09:40:47 发布

小白小白从不日白

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/weixin_43285360/article/details/118398686

版权

JavaScript 动态效果元素移动定时器 CSS样式

关键词由CSDN通过智能技术生成

<div style="width: 100px;height: 100px;background-color: #f40;position: absolute;left: 0;top: 0;"></div>

<script>
        var div = document.getElementsByTagName('div')[0];
        var speed = 3;

        // 封装：获取样式
        function getStyle(elem, prop) {
            // getComputedStyle IE8以上  获取元素的属性
            if (window.getComputedStyle) {
                return window.getComputedStyle(elem, null)[prop];
            } else {
                // currentStyle  IE8及其以下  获取元素的属性
                return elem.currentStyle[prop];
            }
        }

        var timer = setInterval(function() {
            speed += speed / 7;
            div.style.left = parseInt(getStyle(div, 'left')) + speed + 'px';
            if (parseInt(div.style.left) > 500) {
                clearInterval(timer);
            }
        }, 100);
</script>