返回顶部

收藏

变色闪电移动

更多

一段js 页面内变色闪电移动!!!

变色移动

<div id="run" style="background:red;position:absolute;left:0px;top:0px;width:100px;height:100px;">MoveBox</div>
<script>

    var x = 0;
    var y = 0;
    var leftMove = 10;
    var topMove = 10;
    var run = document.getElementById('run');
    var colors=['yellow','red','blue','#fff','black','orange','green'];

    setInterval(function(){
        x+=leftMove;
        y+=topMove;
        if(x >= document.body.clientWidth-100 || x<=0){
            leftMove=-1*leftMove;
        }else if(y >= document.body.clientHeight-100 || y<=0){
            topMove=-1*topMove;
        }
        var a=Math.floor(Math.random()*colors.length);
        run.style.backgroundColor=colors[a];
        run.style.left=x;
        run.style.top=y;
    },1660);
</script>

标签:javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. K-Res 发表 2018-10-27 12:10:11 关于Javascript中类成员函数中内嵌函数的this闭包问题
  2. 杨魁 发表 2018-10-25 07:28:13 Under the Hood: NaN of JS
  3. 尖兵 发表 2018-10-25 11:03:47 服务重启导致的Java服务抖动CPU占用高
  4. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  5. 可乐加糖 发表 2018-10-23 08:31:16 JavaScript文档生成器JSDuck
  6. wenming.gapo 发表 2018-10-23 11:32:30 AOP装饰函数与小T的情愫(二)
  7. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  8. 尖兵 发表 2018-10-18 13:19:02 Java诊断工具Arthas
  9. hellas 发表 2018-10-18 14:20:31 AOP装饰函数与小T的情愫
  10. 博主 发表 2018-10-15 10:02:38 生成聚合收款二维码:支付宝、微信、QQ 钱包
  11. axiu 发表 2018-10-14 02:30:40 微信小程序开发总结
  12. xirruiqiang 发表 2018-10-14 08:14:43 round 函数在不同语言中的实现乱象

发表评论