JQuery 例子 – 随机的正方形

阅读 桌面完整版

JQUERY 是 每个 JAVASCRIPT WEB开发必须要了解的库. JQUERY让WEB开发变得简单许多. 而且 JAVASCRIPT代码量只需要几行就可以完成很复杂的功能. 前两天在给一个剑桥的学生讲 JQUERY 所以顺便写了这个例子.

手机友好是必须的 手机友好! 所以在手机上看效果也是棒棒达!

效果在这里: https://helloacm.com/jquery-examples/random-squares/

首先需要创建一个HTML窗口 我们选用了最简单最普遍的 div 这个容器用来放这些正方形.

<div> id='canvas'> </div>

因为需要操作每个正方形的 left 和 top 属性 所以 需要指定 position 为 absolute (绝对位置).

.square {
  position: absolute;
}

接下来的 JQuery 代码就比较简单了.

    $(document).ready(function() {
      const SQ_NUM = 100; // 正方形的数目
      for (var i = 0; i < SQ_NUM; i ++) { // 用 DIV来表示正方形
        $('#canvas').append('
 
');
      }    
      function get_random_color() {
        function c() { // 随机HTML十六进制颜色
          return Math.floor(Math.random()*256).toString(16);
        }
        return "#"+c()+c()+c();
      }      
      setInterval(function() {// 每 0.1 秒
        for (var i = 0; i < SQ_NUM; i ++) {
          var obj = $('#square' + i);
          obj.css("outline", "1px solid " + get_random_color());
          // 填色
          obj.css("background", get_random_color());
          var width = $(document).width();
          var height = $(document).height();
          var left = Math.floor(Math.random() * width); 
          var top = Math.floor(Math.random() * height); 
          // 移动
          obj.css("left", left);
          obj.css("top", top);  
          var min = Math.min(
                Math.floor(Math.random() * (width - left)), 
                Math.floor(Math.random() * (height - top))
          );        
          // 设置正方形大小
          obj.css("width", min);
          obj.css("height", min);
        }
      }, 100);
    });

假想一下 如果单纯只是用 JAVASCRIPT + DOM + CSS来实现这个例子 代码量就需要多很多. Share on X

完整HTML代码在 GITHUB上.

下面的这个示例是通过 PROCESSING-JS 库来实现的 也是相当的简单.

https://helloacm.com/processing/random-shapes/

英文: https://helloacm.com/jquery-examples-random-squares/

微信公众号: 小赖子的英国生活和资讯 JustYYUK

阅读 桌面完整版