一.簡介

計數是一種最簡單基本的運算，計數器就是實現這種運算的邏輯電路，計數器在數字系統中主要是對脈沖的個數進行計數，以實現測量、計數和控制的功能，同時兼有分頻功能，計數器是由基本的計數單元和一些控制門所組成，計數單元則由一系列具有存儲信息功能的各類觸發器構成，這些觸發器有RS觸發器、T觸發器、D觸發器及JK觸發器等。計數器在數字系統中應用廣泛，如在電子計算機的控制器中對指令地址進行計數，以便順序取出下一條指令，在運算器中作乘法、除法運算時記下加法、減法次數，又如在數字儀器中對脈沖的計數等等。計數器可以用來顯示產品的工作狀態，一般來說主要是用來表示產品已經完成了多少份的折頁配頁工作。它主要的指標在于計數器的位數，常見的有3位和4位的。很顯然，3位數的計數器最大可以顯示到999，4位數的最大可以顯示到9999。

 

 

二.計數器作用

在數字電子技術中應用的最多的時序邏輯電路。計數器不僅能用于對時鐘脈沖計數，還可以用于分頻、定時、產生節拍脈沖和脈沖序列以及進行數字運算等。但是并無法顯示計算結果，一般都是要通過外接LCD或LED屏才能顯示。

 

三.粒子計數器實現

我們采用4*7一共28個格子來顯示0-9這十個數字,比如填滿就是：

        var canvas = document.getElementById("myCanvas");
        var cxt = canvas.getContext("2d");
        cxt.fillStyle = "#FF0000";

        for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 7; j++) {
                cxt.arc(100 + i * 20, 100 + j * 20, 5, 0, Math.PI * 2, true);
            }
        }

比如畫一個數字一：

        var one = [];
        one.push({ x: 3, y: 0 });
        one.push({ x: 3, y: 1 });
        one.push({ x: 3, y: 2 });
        one.push({ x: 3, y: 3 });
        one.push({ x: 3, y: 4 });
        one.push({ x: 3, y: 5 });
        one.push({ x: 3, y: 6 });

數字二：

        var two = [];
        two.push({ x: 0, y: 0 });
        two.push({ x: 1, y: 0 });
        two.push({ x: 2, y: 0 });
        two.push({ x: 3, y: 0 });
        two.push({ x: 3, y: 1 });
        two.push({ x: 3, y: 2 });
        two.push({ x: 3, y: 3 });
        two.push({ x: 2, y: 3 });
        two.push({ x: 1, y: 3 });
        two.push({ x: 0, y: 3 });
        two.push({ x: 0, y: 4 });
        two.push({ x: 0, y: 5 });
        two.push({ x: 0, y: 6 });
        two.push({ x: 1, y: 6 });
        two.push({ x: 2, y: 6 });
        two.push({ x: 3, y: 6 });

以此類推····

我們使用JSLINQ獲取下次要墜落的粒子：

            if (num === 1) {
                for (i in one) {
                    var result = JSLINQ(two).
            Count(function (item) { return item.x == one[i].x && item.y == one[i].y; });
                    if (result == 0) {
                        var ball = { x: 100 + one[i].x * 20, y: 100 + one[i].y * 20, r: 8, vx: getRandomNumber(-250,250), vy: getRandomNumber(-150, 150) };
                        dropBall.push(ball);
                    }
                }
            }

用Jscex實現動畫效果

        var drawAsync = eval(Jscex.compile("async", function () {
            while (true) {
                try {
                    if (dropBall.length > 100) dropBall.shift();
                    cxt.clearRect(0, 0, canvas.width, canvas.height);
                    cxt.beginPath();
                    draw(count % 10);

                    for (i in dropBall) {
                        cxt.arc(dropBall[i].x, dropBall[i].y, dropBall[i].r, 0, Math.PI * 2, true);

                        dropBall[i].y += dropBall[i].vy * cyc / 1000;

                        dropBall[i].x += dropBall[i].vx * cyc / 1000;
                       

                        if (dropBall[i].r + dropBall[i].y > canvas.height) {

                            dropBall[i].vy *= -0.7;

                            dropBall[i].y = canvas.height - dropBall[i].r;
                           
                        }
                        dropBall[i].vy += a;

                    }
                    cxt.fill();
                    t += cyc;
                    if (t >= 1000) {
                        getBalls(count % 10);
                        t = 0;
                        count++;
                        draw(count % 10);
                    }

                }
                catch (e) {
                    alert(e)
                }
                $await(Jscex.Async.sleep(cyc));
            }

        }))

值得注意的是其中處理不同步的幀的常用方法之一

                    t += cyc;
                    if (t >= 1000) {
                        getBalls(count % 10);
                        t = 0;
                        count++;
                        draw(count % 10);
                    }

 

四.在線演示

五.同步

本文已同步更新至：

HTML5實驗室【目錄】:   http://www.rzrgm.cn/iamzhanglei/archive/2011/11/06/2237870.html