前言
面试的时候没写完整,卡壳了…我擦
晚上回来睡了一觉,起来的时候想起来了,因此留一个备份
题目如下
- 构建一个n*n的格子(n从输入框填写),鼠标放上去背景变成红色,移除恢复正常
- 鼠标点击格子背景固定为蓝色,鼠标hover时也不变红,再次点击恢复正常
- 格子大小可用css控制,默认背景色都是白色,底色变化使用js来实现
正文
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .row{ display: flex; } .box{ border:1px solid #ccc; } .box.hover{ background-color:red; } .box.hover.click{ background-color:blue; } </style> </head> <body> <div id="app"> <input type="text" id="input"> <button id="button">提交</button> <ul id="ul"> </ul> </div> <script> var boxConfig = { width: 200, height:200 } window.onload = function(){ } var App = function(){ this.input = document.querySelector('#input') this.button = document.querySelector('#button') this.ul = document.querySelector('#ul') this.bindEvents = function(){ this.button.addEventListener('click',function(event){ var event = event || window.event; boxInit() }) } function boxInit (){ this.ul.innerHTML = ''; var value = this.input.value var div = document.createElement('div') for(var i = 0;i<value;i++){ var divRow = document.createElement('div') divRow.className = 'row' for(var j=0;j<value;j++){ var divItem = document.createElement('div') divItem.className = 'box' divItem.style.width = boxConfig.width + 'px' divItem.style.height = boxConfig.height + 'px' divRow.appendChild(divItem) } div.appendChild(divRow); } div.addEventListener('mouseover',function(event){ var event = event || window.event; var target = event.target || event.srcElement; if(target.className.indexOf('box')!=-1){ target.className +=' hover' } },false) div.addEventListener('mouseout',function(event){ var event = event || window.event; var target = event.target || event.srcElement; if(target.className.indexOf('box')!=-1){ target.className = 'box' } },false) div.addEventListener('click',function(event){ var event = event || window.event; var target = event.target || event.srcElement; if(target.className.indexOf('box')!=-1 && target.className.indexOf('click')!=-1){ target.className = ' box' return } if(target.className.indexOf('box')!=-1){ target.className += ' click' } },false) this.ul.appendChild(div); this.input.value = '' } } App.prototype.init = function(){ this.bindEvents() } var app = new App(); app.init(); </script> </body> </html>
效果如图: