新手在學習js視頻的時候,跟著敲的代碼。實現的效果應該是在一個頁面上隨機生成小方塊。運行實際效果并沒有方塊出現但調試中已有方塊產生!代碼如下:<script >/* * 產生隨機數變量的 */(function (window) { function Random() { } Random.prototype.getRandom = function (min,max) { return Math.floor(Math.random()*(max-min)+min); }; window.Random=new Random();//把局部對象暴露給window頂級對象,就成了全局對象})(window);/* * 產生小方塊對象 */(function (window) { console.log(Random.getRandom(0,5))//這個是顯示上面是否已經暴露成全局對象 var map = document.querySelector(".map");//使用選擇器的方式來獲取元素,也可以使用.getElementById //小方塊(食品)的構造函數 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.backgroudcolor = this.color; 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);
javascript - 隨機方塊(div)無法顯示到頁面上?
一只名叫tom的貓
2019-03-19 17:14:55