Skip to content

Instantly share code, notes, and snippets.

@benzhuo

benzhuo/dabblet.css

Created April 23, 2023 01:41
Show Gist options
  • Save benzhuo/dc1bff878595ac0e75eb5f61ddbfc2ec to your computer and use it in GitHub Desktop.
Save benzhuo/dc1bff878595ac0e75eb5f61ddbfc2ec to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
Raw
dabblet.html
<html>
<head>
<title>九九乘法表</title>
<style type="text/css">
table{
width:600px;
border-collapse:collapse;
margin:5px;
}
table th{
border:#CC0000 1px solid
}
div{ width:100%;height:70px; border:1px #bbb solid; margin:5px; padding-left:10px}
button{width:100px;height:25px; margin:5px;}
</style>
</head>
<body>
<div>
<button onclick="multiplication(9)">9x9</button>
<button onclick="multiplication(19)">19x19</button>
<button onclick="multiplication(99)">99x99</button>
<button onclick="multiplication(99,3)">Divisble by 3</button>
<button onclick="multiplication(99,7)">Divisble by 7</button>
<br>
<input type='text' size=5 id='x'> X <input type='text' size=5 id='y'> = <input type='text' size=8 id='res'>
<button onclick="mutiple(9)">确认</button> <button onclick="find(99)">查找</button>
</div>
<div id="content" style="height:100%">
</div>
<script type="text/javascript">
//用表格形式显示一个九九乘法表
let lastrow;
let content=document.getElementById("content");
content.style.background="#fff";
let HtmlStr="<table>";
function multiplication(rows,z)
{
let lastrow=rows==0?lastrow:rows;
for (let x = 1; x <= lastrow; x++)
{
HtmlStr+="<tr>";
for (let y = 1; y <= x; y++)
{
let result=y*x
let text=y+"x"+x+"="+result
if(z && y*x%z==0)
{
HtmlStr+="<th style='background-color:pink'>"+text+"</th>";
}
else
{
let id='th_'+x+'_'+y
HtmlStr+="<th id="+id+">"+text+"</th>";
}
}
HtmlStr+"</tr>";
}
HtmlStr+="</table>"
content.innerHTML=HtmlStr;
}
function mutiple(){
let X=Number(document.getElementById('x').value)
let Y=Number(document.getElementById('y').value)
document.getElementById('res').value=X*Y
}
function find(rows){
for (let x = 1; x <= rows; x++)
{
for (let y = 1; y <= x; y++)
{
if((x*y)==Number(document.getElementById('res').value)){
let cell=document.getElementById('th_'+x+'_'+y)
cell.style='background-color:pink'
}
}
HtmlStr+"</tr>";
}
}
</script>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment