https://codepen.io/mburridge/pen/OJLWKxO <!DOCTYPE html> <html lang="zh-CN"> <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"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <title>乘法查找表</title> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700"); * { font-family: 'Open Sans', sans-serif; } h1 { color: #555; font-size: 24px; } .control { display: flex; } .options, .sum { background-color: #eee; border: 1px solid #ccc; font-size: 0.8em; padding: 0.5em 1em; margin-bottom: 1em; border-radius: 4px; } .options { width: 640px; display: flex; justify-content: space-between; } .options input { border-radius: 4px; border: 1px solid #aaa; width: 40px; text-align: right; } #show-color { width: 24px; height: 19px; display: inline-block; /* padding: 2px; */ margin-left: 2px; border-radius: 4px; } .sum { margin-left: 2em; display: none; } .sum .product { font-weight: bold; } .table { border-collapse: collapse; font-size: 0.9em; } .table tr:nth-child(odd) { background-color: #f2f2f2; } .table tr:first-child { font-weight: bold; background-color: #cacaca; } .table tr td:first-child { font-weight: bold; background-color: #cacaca; } .table, th, td { border: 1px solid #aaa; } .table td { padding: 4px 6px; width: 28px; text-align: right; } .table .ch { width: 20px; } .footer { font-size: 0.7em; color: #888; margin-top: 0.5em; display: none; } .footer input { width: 80px; color: #888; border: none; font-weight: bold; } .footer input:focus { outline: none; } </style> </head> <body> <h1>Multiplication Lookup Table</h1> <div class="control"> <div class="options"> <div>Start X <input type="number" step="1" id="start-x" value="1" min="1"></div> <div>Start Y <input type="number" step="1" id="start-y" value="1" min="1"></div> <div>Rows <input type="number" step="1" id="rows" min="3" max="50" value="20"></div> <div>Columns <input type="number" step="1" id="columns" min="3" max="50" value="20"></div> <div>Highlight colour <input type="number" step="10" id="highlite-color" min="0" max="360" value="180"> <div id="show-color"> </div> </div> </div> <div id="sum" class="sum"></div> </div> <div class="container"> <table id="table" class="table"></table> </div> <div id="footer" class="footer">Click cell to copy value to clipboard. Value to copy: <input type="text" id="product"></div> </body> <!--<script src="http://static.xcabc.com/js/jquery3.0.0.min.js"></script>--> <script> // get the input elements const startXInput = document.querySelector('#start-x'); const startYInput = document.querySelector('#start-y'); const rowsInput = document.querySelector('#rows'); const colsInput = document.querySelector('#columns'); const highliteColorInput = document.querySelector('#highlite-color'); // get the display elements const table = document.querySelector('#table'); const showColor = document.querySelector('#show-color'); const sum = document.querySelector('#sum'); const footer = document.querySelector('#footer'); const product = document.querySelector('#product'); // used for copying value to clipboard // initialise variables from input elements let startX = parseInt(startXInput.value) - 1, // subtract 1 for the header row... startY = parseInt(startYInput.value) - 1, // ...and column cols = parseInt(colsInput.value), rows = parseInt(rowsInput.value), highliteColor = highliteColorInput.value; // initialise other variables const RowColMin = 3, RowColMax = 50, RowColDefault = 20; // style display elements showColor.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 50%)'; sum.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 90%)'; sum.style.borderColor = 'hsl(' + highliteColor + ', 50%, 50%)'; // add event listeners for the input elements // event listener for input#start-x startXInput.addEventListener('input', function() { startX = parseInt(startXInput.value) - 1; if(startX < 1) { colsInput.value = 1; cols = 1; } renderTable(); }); // event listener for input#start-y startYInput.addEventListener('input', function() { startY = parseInt(startYInput.value) - 1; if(startY < 1) { colsInput.value = 1; cols = 1; } renderTable(); }); // event listener for input#columns colsInput.addEventListener('input', function() { cols = parseInt(colsInput.value); if(cols < RowColMin || cols > RowColMax) { colsInput.value = RowColDefault; cols = RowColDefault; } renderTable(); }); // event listener for input#rows rowsInput.addEventListener('input', function() { rows = parseInt(rowsInput.value); if(rows < RowColMin || rows > RowColMax) { rowsInput.value = RowColDefault; rows = RowColDefault; } renderTable(); }); // event listener for input#highlite-colo highliteColorInput.addEventListener('input', function() { highliteColor = highliteColorInput.value; if(highliteColor < 0 || highliteColor > 360) { highliteColorInput.value = 180; highliteColor = 180; } showColor.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 50%)'; sum.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 90%)'; sum.style.borderColor = 'hsl(' + highliteColor + ', 50%, 50%)'; renderTable(); }); // the function to display the table function renderTable() { table.innerHTML = '' // create the table cells for(let y = startY; y <= startY + rows; y++) { // the rows let row = document.createElement('tr'); for(let x = startX; x <= startX + cols; x++) { // the columns let cellContent; let cell = document.createElement('td'); if(x == startX) { // header column cell.setAttribute('class', 'ch'); cell.setAttribute('data-hy', y); cellContent = document.createTextNode(y); } if(y == startY) { // header row cell.setAttribute('data-hx', x); cellContent = document.createTextNode(x); } if(x == startX && y == startY) { cellContent = document.createTextNode(''); // blank cell in top left corner } if(x > startX && y > startY) { cell.setAttribute('class', 'cv'); cell.setAttribute('data-x', x); cell.setAttribute('data-y', y); cellContent = document.createTextNode(x * y); } cell.appendChild(cellContent); row.appendChild(cell); } table.appendChild(row); } // get all the cells const cells = document.querySelectorAll('.cv') cells.forEach(function(cell) { let bg; // stores the cells original background colour // add a mouseover event listener to each cell cell.addEventListener('mouseover', function() { // show the hidden elements sum.style.display = 'block'; footer.style.display = 'block'; // style the current cell this.style.fontWeight = 'bold'; bg = this.style.backgroundColor; this.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 50%)'; this.style.color = '#fff'; // find the column header cell and style it let x = this.dataset.x; let hx = document.querySelector('[data-hx="' + x + '"]'); hx.style.backgroundColor = 'hsl(' + highliteColor + ', 20%, 40%)'; hx.style.color = '#ccc'; // find the row header cell and style it let y = this.dataset.y; let hy = document.querySelector('[data-hy="' + y + '"]'); hy.style.backgroundColor = 'hsl(' + highliteColor + ', 20%, 40%)'; hy.style.color = '#ccc'; // find and style the column cells between the current cell and the header cell let xCells = document.querySelectorAll('[data-y="' + y + '"]'); xCells.forEach(function(xCell) { if(parseInt(xCell.dataset.x) < x) { xCell.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 90%)'; } }); // find and style the row cells between the current cell and the header cell let yCells = document.querySelectorAll('[data-x="' + x + '"]'); yCells.forEach(function(yCell) { if(parseInt(yCell.dataset.y) < y) { yCell.style.backgroundColor = 'hsl(' + highliteColor + ', 50%, 90%)'; } }); // add content to the sum display and product display sum.innerHTML = x + ' x ' + y + ' = <span class="product">' + (x * y) + '</span>'; product.value = x * y; }); // add a mouseout event listener to each cell cell.addEventListener('mouseout', function() { // revert the current cell to original styling this.style.fontWeight = 'normal'; this.style.backgroundColor = bg; this.style.color = '#000'; // find and revert the column header cell to original styling let x = this.dataset.x; let hx = document.querySelector('[data-hx="' + x + '"]'); hx.style.backgroundColor = '#cacaca'; hx.style.color = '#000'; // find and revert the row header cell to original styling let y = this.dataset.y; let hy = document.querySelector('[data-hy="' + y + '"]'); hy.style.backgroundColor = '#cacaca'; hy.style.color = '#000'; // find and revert the column cells between the current cell and the header cell to the original styling let xCells = document.querySelectorAll('[data-y="' + y + '"]'); xCells.forEach(function(xCell) { if(parseInt(xCell.dataset.x) < x) { xCell.style.backgroundColor = bg; } }); // find and revert the row cells between the current cell and the header cell to the original styling let yCells = document.querySelectorAll('[data-x="' + x + '"]'); yCells.forEach(function(yCell) { if(parseInt(yCell.dataset.y) < y) { yCell.style.backgroundColor = bg; } }); // hide the display elements sum.style.display = 'none'; footer.style.display = 'none'; product.value = ''; }); // add a click event listener to each cell to copy the value to the clipboard cell.addEventListener('click', function() { product.select(); document.execCommand("copy"); product.blur(); }); }); } renderTable(); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 乘法查找表 喜欢 (11)or分享 (0)
