<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:"+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:'+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:'+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 = "width: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>

js根据毫米/厘米算像素px的更多相关文章

  1. 字体的大小(pt)和像素(px)如何转换？

    px:相对长度单位.像素(Pixel). pt:绝对长度单位.点(Point). 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Em ...

  2. Android 中像素px和dp的转化

    在Android的布局文件中,往往使用dp作为控件的宽度和高度尺寸,但是在Java代码中,调用getWidth()方法获得的尺寸单位却是像素px,这两个单位有明显的区别:dp和屏幕的密度有关,而px与 ...

  3. android-getTextSize返回值是以像素(px)为单位的,setTextSize()以sp为单位

    使用如下代码时,发现字号不会变大,反而会变小:size = (int) mText.getTextSize() + 1;mText.setTextSize(size);后来发现getTextSize返 ...

  4. Vue.js快速介绍-超级马里奥像素艺术

    原文出处:Quick Introduction to Vue.js - Super Mario Pixel Art ::代码我已经归纳在github上:[vue2-pixel-art]::::__查看 ...

  5. JS根据身份证号码算年龄

    如果把身份证号码传到页面上,在前端页面获取年龄就需要用到JS脚本了: function GetAge(identityCard) { var len = (identityCard + "& ...

  6. js中各个排序算法和sort函数的比较

    js中要实现数据排序,其实只需要用sort函数就能很好的满足了,但是我今天想知道他和其他排序算法的区别,比如耗时呀等.测了一组数据如下: // ---------- 一些排序算法 Sort = {} ...

  7. 小程序-支持的最小像素px

    经过我手机多次测试,支持的最小px为: 8px;

  8. JS&Java实现常见算法面试题

    Github上的算法repo地址:https://github.com/qcer/Algo-Practice (如果你觉得有帮助,可以给颗星星收藏之~~~) 一.Java实现部分 参见随笔分类的算法部 ...

  9. PS 厘米与像素切换

    方法一: 快捷键 ctrl + r   打开标尺将鼠标放在标尺刻度上右键 出现菜单里修改即可: 方法二: 编辑---首选项---单位与标尺 修改即可:

随机推荐

  1. C#零基础入门-0-开发工具

    Visual Studio sharpDevelop:http://www.icsharpcode.net/OpenSource/SD/Download/ Visual Studio Express

  2. EF Code First 连接MySql

    看了很多文章,尝试了很多次总是进行不下去,整理一下,以便日后查看. 1.创建ASP.NET MVC项目(EFCodeFirst) 1.1.右键点击引用选择管理NuGet程序包下载MySql.Data. ...

  3. .net问号的作用

    ??运算符(C# 参考)http://msdn.microsoft.com/zh-cn/library/ms173224.aspx 可以为 null 的类型(C# 编程指南)http://msdn.m ...

  4. js操作文章、字符串换行

    操作前: 操作后: 第一步: 把中英文的逗号和顿号置换为 '\n’ support_unit = support_unit.replace(/,|,|./g, '\n')   第二步: //为了使\n ...

  5. ubunru18.04下面安装docker

    sudo apt-get updat // 更新apt包索引 sudo apt-get remove docker docker-engine docker-ce docker.io // 卸载旧版本 ...

  6. 64位ubuntu安装交叉编译工具链，显示找不到命令

    是因为Ubuntu64位版本已不支持ia32-libs的软件包,而是使用了lib32ncurses5.lib32z1软件包做为替代, 所以在Ubuntu16.04版本当中应该安装执行: sudo ap ...

  7. WebSocket原理

    一 . WebSocket原理 1.1.背景 WebSocket 是基于Http 协议的改进,Http 为无状态协议,基于短连接,需要频繁的发起请求,第二 Http 只能客户端发起请求,服务端无法主动 ...

  8. ERP常见问题总结处理

    1. ERP系统的重量录入组件设计不合理易导致录入错误 如下图所示: 修正方法: 1. 更正数据 使用SQL语句更正数据,已经生产完成,作为单据重新录入比较麻烦 UPDATE e_wms_materi ...

  9. 4月18日 MySQL学习

    正式开始了数据库的学习 昨天下好的MySQL 今天正式开始学习的,介绍了多种数据库软件,当然 学习的这个是开源的 免费的. DBMS(数据库管理系统)这就是我们学习的数据库的软件 数据库分为关系型数据 ...

  10. pc端常規頁面實現

    https://www.cnblogs.com/adc8868/p/5996885.html https://blog.csdn.net/chose_DoIt/article/details/8042 ...