<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<body>
纸张宽度(毫米mm)：<input type="text" id="width" value="10"> <span id="width_px"></span>
<br>纸张宽度(毫米cm)：<input type="text" id="height" value="10"> <span id="height_px"></span>
<br><input type="button" value="计算" onclick="compute(1)">
<input type="button" value="计算And画格子" onclick="compute(2)">
<input type="button" value="一键生成多个格子(生成以后可以打印出来在纸上用尺子量一下对不对)" onclick="make()">
<br><br>
<div id="testDiv">
<div id="testDiv1"></div>
</div>
</body>
<script>
function make(){
document.getElementById("width").value=10;
compute(2);
document.getElementById("width").value=20;
compute(2);
document.getElementById("width").value=30;
compute(2);
document.getElementById("width").value=40;
compute(2);
document.getElementById("width").value=60;
compute(2);
document.getElementById("width").value=80;
compute(2);
document.getElementById("width").value=100;
compute(2);
document.getElementById("width").value=150;
compute(2);
}
function compute(t){
var width=document.getElementById("width").value;
var height=document.getElementById("height").value;
console.log(""+width)
console.log("height:"+height)
var width_px=cm2px(width);
var height_px=cm2px(height);
console.log("width_px:"+width_px)
console.log("height:"+height)
document.getElementById("width_px").innerHTML=width_px+" px";
document.getElementById("height_px").innerHTML=height_px+" px";
if(t==2){
var tmpNode = document.createElement("DIV");
tmpNode.setAttribute('style', ''+width_px+'px;height:'+height_px+'px;border:solid 1px #000;text-align:center');
tmpNode.innerHTML=width+"*"+height+"("+width_px+"*"+height_px+")";
document.getElementById("testDiv").appendChild(tmpNode);
}else{
document.getElementById("testDiv1").setAttribute('style', ''+width_px+'px;height:'+height_px+'px;border:solid 1px #000');
}
}
//根据毫米算DPI
function cm2px(cm) {
var dpi = getDPI();
var pixel = parseFloat(cm) / 25.4 * dpi[0]; //只计算x轴的dPI
return (parseInt(pixel))
}
function getDPI() {
var arrDPI = new Array();
if (window.screen.deviceXDPI != undefined) {//ie 9
arrDPI[0] = window.screen.deviceXDPI;
arrDPI[1] = window.screen.deviceYDPI;
}else {//chrome firefox
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.offsetWidth);
arrDPI[1] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
}
return arrDPI;
}
console.log("dpi:"+getDPI());
</script>
</html>