Javascript原生实现一个面试题

最新推荐文章于 2020-07-27 12:42:15 发布

weixin_34343308

最新推荐文章于 2020-07-27 12:42:15 发布

阅读量148

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000017944291

版权

实现要求如下

构建一个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>

weixin_34343308

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript原生实现一个面试题

实现要求如下构建一个n*n的格子（n从输入框填写），鼠标放上去背景变成红色，移除恢复正常鼠标点击格子背景固定为蓝色，鼠标hover时也不变红，再次点击恢复正常格子大小可以用css控制，默认背景色都是白色，底色变化使用js来实现代码如下<!DOCTYPE html><html lang="en">&...
复制链接

扫一扫

Javascript原生实现一个面试题

“相关推荐”对你有帮助么？