Px Em 换算工具 - FACESOHO知行者

<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8"> 
<title>小鸟启蒙(facesoho.com)</title> 
</head>
<body>
<h1>Px Em 换算工具</h1>
<p>以下工具提供了em和px的换算工具。</p>
<ul>
<li>第一个输入框：设置了网页默认的字体像素 (通常 16px)</li>
<li>第二个输入框：输入像素值，可以将 px 换算为 em。</li>
<li>第三个输入框：输入em（相对长度单位）值，可以将 em 换算为 px。</li>
</ul>
<blockquote><p>设置默认的像素大小:</p>
<input class="conv" type="text" id="pix1" size="8" value="16"> <span style="font-size:23px">px</span>
<br><br>
<p class="pxem"> PX 换算为 EM:<br>
<input onfocus="wrong()" onblur="works()" class="conv" type="text" size="8" id="myInput" value="12"> <span style="font-size:23px">px</span>
</p>
<p class="empx">EM 换算为 PX:<br>
<input onfocus="wrong2()" onblur="works2()" class="conv" type="text" size="8" id="myInput2" value=""> <span style="font-size:23px">em</span>
</p>
<p class="clearfix"></p><button class="btn example-btn" onclick="myFunction()"> 转换</button><hr>
<p>换算结果:<span style="font-size:24px" id="result1"></span></p><br>
</blockquote><hr>
<h2>文本字体大小</h2>
<p>下表在网页字体默认值为 16px 时， px 和 em 及网页字体百分比的换算数据</p>
<div id="demo"></div><hr>
<script>
function G(id){ return document.getElementById(id);}
function fillTable(x) {
var t = "<table style='cursor:pointer;' class='reference'>";
t += "<tr><th style='cursor:auto;width:33%;font-weight:bold;'>px</th>";
t += "<th style='cursor:auto;width:33%;font-weight:bold;'>em</th>";
t += "<th style='cursor:auto;width:33%;font-weight:bold;'>百分比</th></tr>"
for (i = 5; i < 26; i++) {
t = t + "<tr onclick='fillTable(" + i + ")'";
if (i == x) {t +=" style='background-color:#555;color:white;'";}
t += "><td>" + i + "px</td>";
t += "<td>" + (i/x).toFixed(4) + "em</td>";
t += "<td>" + ((i/x) * 100).toFixed(2) + "%</td>";
t += "</tr>";
}
t = t + "</table>";
G("demo").innerHTML = t;
}
fillTable(16);
function wrong() {
G("myInput2").disabled = true;
G("myInput2").value = "";
}
function wrong2() {
G("myInput").disabled = true;
G("myInput").value = "";
}
function works() {
G("myInput2").disabled = false;
G("myInput2").value = "";
}
function works2() {
G("myInput").disabled = false;
G("myInput").value = "";
}
function myFunction() {
var x = G("myInput").value;
var z = G("myInput2").value;
var y = G("pix1").value;
var res = G("result1");
if (x) {
res.innerHTML = x/y + "em"; 
} else {
res.innerHTML = z*y + "px";
}
if (isNaN (x) || isNaN (z) || isNaN (y)) {
res.innerHTML = "请输入数字！";
res.style.color = "red";
} else {
res.style.color = "black";
}
}
</script>
</body>
</html>