JS实现网页中绘制10x10表格,并在其中区分1-100素数合数。

it2023-02-23  101

JS实现网页中绘制10x10表格,并在其中区分1-100素数合数。

一:需求 在网页中绘制10x10的表格,并在其中区分1-100素数和合数

二:解决思路 创建一个判断素数合素的的函数; 创建一个函数画表,并能实现单元格改色,添加内容; 利用window.onload调用画表函数

三:代码 将下面js文件引入任意html文件即可:

function isPrime(number){ //判断是否为素数 for(var i=2;i<=Math.sqrt(number);i++){ if(number%i==0){ return false; } } return true; } function createTable(){ //画表 var tab = document.createElement("table"); tab.style.margin = "0 auto"; tab.style.width = "500px"; var tb = document.createElement("tbody"); tab.appendChild(tb); for(var i = 0; i < 10; i++){ var row = tb.insertRow(tb.rows.length); for(var j = 0; j < 10; j++){ var number = i*10+j+1 if(number==1){ //如果是1,则既不是素数也不是合数 var col = row.insertCell(row.cells.length); col.style.width = "50px"; col.style.height = "50px"; col.innerText=number; col.style.backgroundColor = "rgb(" + 255 + "," + 100 + "," + 255+ ")"; } else{ if(isPrime(number)==true){ //如果是素数 var col = row.insertCell(row.cells.length); col.style.width = "50px"; col.style.height = "50px"; col.innerText=number; col.style.backgroundColor = "rgb(" + 0 + "," + 100 + "," + 255+ ")"; } else{ var col = row.insertCell(row.cells.length); //如果是合数 col.style.width = "50px"; col.style.height = "50px"; col.innerText=number; col.style.backgroundColor = "rgb(" + 0 + "," + 255 + "," + 0 + ")"; } } } } document.body.appendChild(tab); //添加到网页<body></body>中 } onload = function(){ //窗口打开时加载 createTable(); }

四:实现

五:结语 简单代码,记录学习。 respect!!!

最新回复(0)