javascript行星运动

【示例演示】

 

 

【程序源码】

function T$(i) { return document.getElementById(i); }
var math = function() {
    var planet = T$('planet');
        xlen = T$('content').clientWidth, 
        ylen = T$('content').clientHeight, 
        x_posy = ylen / 2,
        y_posx = xlen / 2, 
        angle = 0;

    var galaxy = function() {
        var self = this;
        if (!(self instanceof galaxy)) {
            return new galaxy();
        } 
        self.timer = null;
        self.initialize();    
    }

    galaxy.prototype = {
        initialize: function() {
            var self = this;
            self.drawXaxis();
            self.drawYaxis();
            self.drawGalaxy();
        },

        drawXaxis: function() {
            var self = this;
            for (var i = 0, arr = []; i < xlen; ++i) {
                arr[i] = self.createDot(1, 1, i, x_posy, '#213478');
            } 
            T$('graph').innerHTML += arr.join('');
        },

        drawYaxis: function() {
            var self = this, amp = self.amp;
            for (var i = 0, arr = []; i < ylen; ++i) {
                arr[i] = self.createDot(1, 1, y_posx, i, '#213478');
            } 
            T$('graph').innerHTML += arr.join('');
        },
        
        drawGalaxy: function() {
            var self = this;
            for (var i = 0, arr = []; i < xlen; ++i) {
                arr[i] = self.createDot(1, 1, y_posx + Math.sin(angle+=.01) * y_posx , x_posy + Math.cos(angle+=.01) * x_posy, '#213478');
            } 
            T$('graph').innerHTML += arr.join('');
        },
        
        runPlanet: function() {
            var self = this;
            self.timer = setInterval(function() {
                planet.style.left = (y_posx + Math.sin(angle+=.01) * y_posx) + 'px';
                planet.style.top = (x_posy + Math.cos(angle+=.01) * x_posy) + 'px';
            }, 40);
        },
    
        createDot: function(w, h, x, y, c) {
            return '<div style="width:'+w+'px;height:'+h+'px;font-size:0;background-color:'+c+';position:absolute;left:'+x+'px;top:'+y+'px;"><\/div>';
        }    
    }

    return {galaxy : galaxy}
}();

var galaxy = math.galaxy();

T$('run').onclick = function() {
    clearInterval(galaxy.timer);
    galaxy.runPlanet();
}
T$('stop').onclick = function() {
    clearInterval(galaxy.timer);
}

【源码下载】 

galaxy