数独辅助工具

<html dir="ltr" lang="zh" class="focus-outline-visible" style="background-color: rgb(255, 255, 255);background-image: unset;t: rgba(0, 0, 0, 1);"><head>
    <meta charset="utf-8">
    <title>数独</title>
    <!-- <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> -->
    <style>
        table{
            background:#FF0000;
            margin:20px auto;
        }
        .footer{
            margin:20px auto;
            text-align:center;
        }
        td{
            width:50px;
            height:50px;
            font-size:30px;
            color:BLACK;
            font-weight:bolder;
        }
        td.fixed{
            color:BROWN;
        }
        td.hover{
            background:#CCFFEE!important;
        }
        td.tip{
            
            background:#7895f7!important;
        }
        td.active{
            opacity: 1;
            font-size:40px;
            background:BROWN!important;
            color:#FFFFFF!important;
        }
        input{
            line-height:30px;
        }
        .btn{
            background: #F3FD9D;
            border: none;
            line-height: 34px;
            border-radius: 4px;
            width:100px;
            
        }
    </style></head>
  <body>
    <table contenteditable="true" border="1" style="
    width: 500px;
    height: 500px;
    text-align: center;
    line-height: 50px;
">

        <tbody><tr>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">5</td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">7</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">9</td>
            <td class="fixed" contenteditable="false">3</td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">7</td>
        </tr>
        <tr>
            <td class="fixed" contenteditable="false">6</td>
            <td></td>
            <td class="fixed" contenteditable="false">1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">9</td>
        </tr>
        <tr>
            <td></td>
            <td class="fixed" contenteditable="false">1</td>
            <td class="fixed" contenteditable="false">2</td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">4</td>
            <td></td>
            <td class="fixed" contenteditable="false">9</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td class="fixed" contenteditable="false">5</td>
            <td></td>
            <td class="fixed" contenteditable="false">9</td>
            <td></td>
            <td class="fixed" contenteditable="false">1</td>
            <td></td>
            <td class="fixed" contenteditable="false">8</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td class="fixed" contenteditable="false">9</td>
            <td></td>
            <td class="fixed" contenteditable="false">6</td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">2</td>
            <td class="fixed" contenteditable="false">5</td>
            <td></td>
        </tr>
        <tr>
            <td class="fixed" contenteditable="false">5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">1</td>
            <td></td>
            <td class="fixed" contenteditable="false">2</td>
        </tr>
        <tr>
            <td class="fixed" contenteditable="false">1</td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">4</td>
            <td class="fixed" contenteditable="false">5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">7</td>
            <td></td>
            <td></td>
            <td class="fixed" contenteditable="false">9</td>
            <td></td>
            <td></td>
        </tr>
    </tbody></table>
    <div class="footer">
        <input type="text" id="number" />
        
        <button class="btn" onclick="tip()">提示</button>
    </div>
    
    <script>
    let tds = document.querySelectorAll("td");
    tds.forEach((td, idx) => {
        let row = Math.floor(idx / 9);
        let col = idx % 9;
        let bRow = Math.floor(idx / 9 / 3);
        let bCol = Math.floor(idx % 9 / 3);
        let group = bRow * 3 + bCol;
        let colors = ["#FFFFFF", "#EEEECC","#FFFFFF", "#EEEECC","#FFFFFF", "#EEEECC","#FFFFFF","#EEEECC", "#FFFFFF"];
        td.style.background = colors[group];
        td.x = col;
        td.y = row;
        td.g = group;
        
        td.onclick = function(){
            
            tds.forEach(item => {
                let className = item.className || "";
                className = className.replace(/\s?tip/g, "").replace(/\s?active/g, "").replace(/\s?hover/g, "");
                if(item.x == this.x || item.y == this.y){
                    className = className + " hover";
                }
                item.className = className;
            })
            if(this.innerText){
                document.getElementById("number").value = this.innerText;
            }
            
        }

        /*td.onmouseleave = function(){
            
            tds.forEach(item => {
                let className = item.className || "";
                className = className.replace(/\s?tip/g, "").replace(/\s?active/g, "").replace(/\s?hover/g, "");
                
                item.className = className;
            })
        }*/
        
    })
    
    function tip(){
        let number = document.getElementById("number").value;
        if(!number){
            return false;
        }
        let xs = [];
        let ys = [];
        let gs = [];
        tds.forEach((td, idx) => {
            let className = td.className || "";
            className = className.replace(/\s?tip/g, "").replace(/\s?active/g, "").replace(/\s?hover/g, "");
            td.className = className;
            
        });
        tds.forEach((td, idx) => {
            let val = td.innerText.trim();
            if(val == number){
                xs.push(td.x);
                ys.push(td.y);
                gs.push(td.g);
                let className = td.className || "";
                className = className + " active";
                td.className = className;
            }
        });
        
        
        tds.forEach(item => {
            let className = item.className || "";
            if(!xs.includes(item.x) && !ys.includes(item.y) && !gs.includes(item.g) && !item.innerText){
                className = className + " tip";
                item.className = className;
            }
            
            
        })
    }
    
    
    </script>
</body></html>

 

posted @ 2022-10-22 23:17  rubekid  阅读(77)  评论(0编辑  收藏  举报