js原生画板

Html

Css

(function(window, document, time) {

var container = initContainer();
    init(container);
    var a = false;

function init(container) {

container.addEventListener("mousedown", function(e) {
            a = true;
            console.log(a);
        });

document.body.addEventListener("mouseup", function(e) {
            a = false;
            console.log(a);
        });

container.addEventListener("mousemove", function(e) {
            if (a == true) {
                var d = create(e.clientX, e.clientY);
                remove(d);
            }
        });

container.addEventListener("dblclick", function(e) {
            var nodes = document.getElementsByTagName("div");
            for (var i = 0; i < nodes.length; i++) {
                console.log(nodes[i]);
                nodes[i].remove();
            }
        });

container.addEventListener("click", function(e) {
            var d = create(e.clientX, e.clientY);
            remove(d);
        });
    }

function initContainer() {
        var d = document.createElement("Hxj");
        d.style.width = '500px';
        d.style.height = '400px';
        d.style.background = '#eee';
        d.style.borderRadius = '5px';
        d.style.display = 'block';
        d.style.border = '1px solid #000';
        document.body.appendChild(d);
        return d;
    }

function create(left, top) {
        var d = document.createElement("div");
        d.style.width = '10px';
        d.style.height = '10px';
        d.style.background = 'red';
        d.style.left = (left - 5) + 'px';
        d.style.top = (top - 5) + 'px';
        d.style.borderRadius = '30px';
        d.style.position = 'absolute';
        document.body.appendChild(d);
        return d;
    }

function remove(d) {
        setInterval(function() {
            d.remove();
        }, time);
    }
})(window, document, 1000 * 100)

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

立即下载

js原生画板



代码描述：js原生画板代码

更新时间：2020-09-18 09:21:53

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

三年

相关代码

js原生画板

最新