返回顶部

收藏

变色闪电移动

更多

一段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. techug 发表 2017-12-29 03:03:49 JavaScript 年度调查报告:React、Vue 和 Angular 三分天下,谁将在 201
  2. binkery 发表 2017-12-28 09:56:00 Android 混合编程 Java 和 JavaScript 的交互
  3. techug 发表 2017-12-28 03:10:14 28个超牛逼的JavaScript技术用法
  4. 博主 发表 2017-12-21 10:30:00 Webpacker 基础
  5. 博主 发表 2017-12-21 11:30:00 使用 Webpacker 替换 Sprockets
  6. 博主 发表 2017-12-22 11:30:00 从 Sprockets 迁移到 Webpacker(上)
  7. 博主 发表 2017-12-24 10:30:00 Webpacker 小抄
  8. 博主 发表 2017-12-25 10:30:00 Yarn 基础
  9. xinlu 发表 2017-12-25 01:42:04 JS加密算法
  10. 博主 发表 2017-12-22 11:30:00 从 Sprockets 迁移到 Webpacker(上)
  11. 博主 发表 2017-12-24 10:30:00 Webpacker 小抄
  12. 博主 发表 2017-12-21 10:30:00 Webpacker 基础

发表评论