towry · March 22, 2015 05:22
diff --git a/copy-ninja.html b/copy-ninja.html
 <!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>
	<!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>