JQuery 例子 - 随机的正方形 | 小赖子的英国生活和资讯

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

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

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

mobile-user-friendly-test-random-squares-jquery

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

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

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

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

1
2
3

.square {
  position: absolute;
}

.square {
  position: absolute;
}

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

    $(document).ready(function() {
      const SQ_NUM = 100; // 正方形的数目
      for (var i = 0; i < SQ_NUM; i ++) { // 用 DIV来表示正方形
        $('#canvas').append('<div class="square" id="square' + i + '"> </div>');
      }    
      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);
    });

    $(document).ready(function() {
      const SQ_NUM = 100; // 正方形的数目
      for (var i = 0; i < SQ_NUM; i ++) { // 用 DIV来表示正方形
        $('#canvas').append('<div class="square" id="square' + i + '"> </div>');
      }    
      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/

GD Star Rating
a WordPress rating system

本文一共 267 个汉字, 你数一下对不对.

JQuery 例子 – 随机的正方形. (AMP 移动加速版本)
上一篇: 40 英镑购买山寨版的 WINDOWS PHONE - BLU WIN
下一篇: 2015 公司年会

赞赏我的几个理由.

¥ 打赏支持

扫描二维码，分享本文到微信朋友圈