1.函数的自调用---自调用函数
//函数的自调用 //一次性函数 (function (){ console.log("一次性"); })(); (function(win){ var num=20; win.num=num; })(window); //把局部变量给父类就可以了 console.log(num);
2.通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数
//通过自调用函数产生一个随机对象 (function(window){ //产生一个随机 function Random(){ Random.prototype.getRandom=function(min,max){ return Math.floor(Math.random()*(max-min)+min); }; //把Random对象暴露给顶级对象window } window.Random=Random; })(window); var rm=new Random(); console.log(rm.getRandom(0,5));
3.案例一个随机小方块
<script> //产生随机数对象的 (function (window) { function Random() { } Random.prototype.getRandom=function (min,max) { return Math.floor(Math.random()*(max-min)+min); }; //把局部对象暴露给window顶级对象,就成了全局的对象 window.Random=new Random(); })(window);//自调用构造函数的方式,分号一定要加上 //产生小方块对象 (function (window) { //console.log(Random.getRandom(0,5)); //选择器的方式来获取元素对象 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>
原文地址:https://www.cnblogs.com/liushisaonian/p/9425427.html
时间: 2024-10-05 08:08:34