跳动的小球代码（原创）

Html

Css

(function(a) {
        var width = 100,
            height = 100,
            borderRadius = 100,
            circle = function() {};
        circle.prototype = {
                color: function() {
                    let colour = "#" + Math.floor(Math.random() * 255).toString(16) +
                        Math.floor(Math.random() * 255).toString(16) +
                        Math.floor(Math.random() * 255).toString(16)
                    console.log(colour);
                    return colour;
                },
                drawCircle: function(clientX, clientY) {
                    let ele = document.createElement("div");
                    let colo = new circle().color();
                    ele.style.width = width + "px";
                    ele.style.height = height + "px";
                    ele.id = "id_" + new Date().getTime();
                    ele.style.borderRadius = borderRadius + "px";
                    ele.style.position = "absolute";
                    ele.style.top = clientY + "px";
                    ele.style.left = clientX + "px";
                    ele.style.boxShadow = "0 3px 8px " + colo + ", 0 0 76px " + colo + " inset";
                    document.body.appendChild(ele);
                    var maxWidth = document.body.clientWidth;
                    var maxHeight = document.body.clientHeight;
                    let way = Math.floor(Math.random() * 3);
                    localStorage.setItem(ele.id, "1");
                    setInterval(function() {
                        let flag = localStorage.getItem(ele.id);
                        let o = document.getElementById(ele.id);
                        let y;
                        let x;

if (flag == "1") {
                            y = (new Number(o.style.top.replace("px", "")) + 1);
                            x = (new Number(o.style.left.replace("px", "")) + 1);
                            if (y >= maxHeight - 100 || x >= maxWidth - 100) {
                                localStorage.setItem(ele.id, "0");
                            }
                        } else {
                            y = (new Number(o.style.top.replace("px", "")) - 1);
                            x = (new Number(o.style.left.replace("px", "")) - 1);
                            if (y <= 0 || x <= 0) {
                                localStorage.setItem(ele.id, "1");
                            }
                        }

console.log(x, y);
                        if (way == 0) {
                            o.style.top = y + "px";
                            o.style.left = x + "px";
                        } else if (way == 1) {
                            o.style.left = x + "px";
                        } else if (way == 2) {
                            o.style.top = y + "px";
                        }
                    }, 10);
                },
                drow: function(obj) {
                    obj.addEventListener("click", function(e) {
                        new circle().drawCircle(e.clientX, e.clientY);
                    })
                },
                autoDraw: function() {
                    setInterval(function() {
                        var maxWidth = document.body.clientWidth;
                        var maxHeight = document.body.clientHeight;
                        let clientX = Math.floor(Math.random() * maxWidth);
                        let clientY = Math.floor(Math.random() * maxHeight);
                        new circle().drawCircle(clientX, clientY);
                    }, 1000);
                }
            },
            Rander = function() {
                return new circle();
            },
            R = function(obj) {
                Rander().drow(obj);
                Rander().autoDraw();
            }
        onload = R(a);
    })(window)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

跳动的小球代码（原创）

代码描述：自动生成小球；点击桌面生成小球，每秒生成1个小球

自动生成小球；点击桌面生成小球，每秒生成1个小球

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

三年

相关代码

跳动的小球代码（原创）

最新