实现要求如下
- 构建一个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>