案例：随机小方块
产生随机数对象，自调用构造函数
产生小方块对象，自调用构造函数，里面存放：
食物的构造函数
给原型对象添加方法：初始化小方块的显示的效果及位置---显示地图上
给原型对象添加方法，产生随机位置
实例化对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> .map { width: 800px; height: 600px; background-color: #CCC; position: relative; } </style> </head> <body> <div class="map" id="dv"></div> <script src="common.js"></script> <script> //产生随机数对象的 (function (window) { function Random() { }; Random.prototype.getRandom = function (min, max) { return Math.floor(Math.random() * (max - min) + min); }; window.Random = new Random; })(window); //自调用构造函数的方式, 分号一定要加上 //产生小方块对象 (function (window) { var map = document.querySelector(".map"); //食物的构造函数 function Food(width, height, color) { this.width = width || 20; this.height = height || 20; //横坐标,纵坐标 this.x = 0;//横坐标随机产生的 this.y = 0;//纵坐标随机产生的 this.color = color;//小方块的背景颜色 this.element = document.createElement("div"); } //初始化小方块的显示的效果及位置---显示地图上 Food.prototype.init = function (map) { //设置小方块的样式 var div = this.element; div.style.position = "absolute";//脱离文档流 div.style.width = this.width + "px"; div.style.height = this.height + "px"; div.style.backgroundColor = this.color; //把小方块加到map地图中 map.appendChild(div); this.render(map); }; //产生随机位置 Food.prototype.render = function (map) { //随机产生横纵坐标 var x = Random.getRandom(0, map.offsetWidth / this.width) * this.width; var y = Random.getRandom(0, map.offsetHeight / this.height) * this.height; this.x = x; this.y = y; var div = this.element; div.style.left = this.x + "px"; div.style.top = this.y + "px"; }; //实例化对象 var fd = new Food(20, 20, "green"); fd.init(map); console.log(fd.x + "=====" + fd.y); })(window); </script> </body> </html>