JQuery 例子 – 随机的正方形


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

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

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

mobile-user-friendly-test-random-squares-jquery JQuery 例子 - 随机的正方形 技术 折腾 有意思的 程序设计

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

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

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

因为需要操作每个正方形的 lefttop 属性 所以 需要指定 positionabsolute (绝对位置).

1
2
3
.square {
  position: absolute;
}
.square {
  position: absolute;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    $(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来实现这个例子 代码量就需要多很多. Click To Tweet

完整HTML代码在 GITHUB上.

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

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

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

GD Star Rating
loading...
本文一共 267 个汉字, 你数一下对不对.
JQuery 例子 – 随机的正方形. (AMP 移动加速版本)
上一篇: 40 英镑 购买山寨版的 WINDOWS PHONE - BLU WIN
下一篇: 2015 公司年会

扫描二维码,分享本文到微信朋友圈
4cfda8fc741647dbd1e09c7ed7aa7418 JQuery 例子 - 随机的正方形 技术 折腾 有意思的 程序设计

4 条评论

评论