Javascript原生实现一个面试题

实现要求如下

  1. 构建一个n*n的格子(n从输入框填写),鼠标放上去背景变成红色,移除恢复正常
  2. 鼠标点击格子背景固定为蓝色,鼠标hover时也不变红,再次点击恢复正常
  3. 格子大小可以用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>
    原文作者:犀牛前端部落
    原文地址: https://segmentfault.com/a/1190000017944291
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞