<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: cyan;
}
</style>
</head>
<body>
<div class="circle"></div>
<script>
var copyNinja = {
init: function (d) {
this.ele = $(d);
this.boxshadow = [];
this.initEvent();
},
getColor: function () {
return '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
},
getSize: function () {
var width = this.ele.width();
var max = width + 50;
var min = 10;
return Math.floor(Math.random() * max + min);
},
getXY: function () {
var w = window.innerWidth || document.documentElement.offsetWidth;
var h = window.innerHeight || document.documentElement.offsetHeight;
console.log('what ' + h);
return {
x: Math.floor(Math.random() * w + 10),
y: Math.floor(Math.random() * h + 10)
}
},
getBoxShadow: function () {
return this.boxshadow.join(', ');
},
newBoxShadow: function () {
var c = this.getColor();
var s = this.getSize();
var x = this.getXY();
this.boxshadow.push(x.x + 'px ' + x.y + 'px ' + '0 ' + s + 'px ' + c);
},
initEvent: function () {
var self = this;
this.ele.on('click', self.clickHandler());
$(document).on('click', function () {
self.ele.css('box-shadow', '');
self.boxshadow = [];
})
},
clickHandler: function () {
var self = this;
return function (e) {
e.stopPropagation();
self.newBoxShadow();
var boxs = self.getBoxShadow();
console.log(boxs);
self.ele.css('box-shadow', boxs);
}
}
}
copyNinja.init('.circle');
</script>
</body>
</html>