<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. ES入门REST API

    在ES中存在4种数据对象,分别是 index  ,  type ,  document  , field .   其跟我们熟悉的关系型数据库得二维表得对应关系为: index -> table表 ...

  2. centos7后台服务部署jar包

    centos7 服务部署jar包 centos7 服务介绍 CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分, 每一个 ...

  3. Java中的Iterable与Iterator详解

    在Java中,我们可以对List集合进行如下几种方式的遍历: List<Integer> list = new ArrayList<>(); list.add(5); list ...

  4. Ubuntu 16.04 安装垃圾清理工具 BleachBit

    BleachBit 可以清理系统缓存文件, 清理磁盘垃圾. 首先下载最新版 deb安装包,默认下载到Downloads 中, 下载链接: https://www.bleachbit.org/downl ...

  5. 题解 P1944 最长括号匹配_NOI导刊2009提高（1）

    栈,模拟 把每个元素逐个入栈 如果和栈顶元素匹配,那么一块弹出去,同时标记这里是可匹配的. 取出连续的,最长的可匹配的序列即可. #include <iostream> #include ...

  6. 揽货最短路径解决方案算法 - V2（增加了时间维度-客户允许的服务时间段，C#/JAVA同步实现，带python作图）

    继上篇,这里改进增加了客户允许服务的时间范围这个维度,并且把C#版本翻译成java,加强了更加形象的图表展示路径(继续是用python的matplotlib作图). 这里的时间范围维度是指:每个客户都 ...

  7. 分布式存储ceph——（3）ceph常用命令

    1.查看ceph集群配置信息 1 ceph daemon /var/run/ceph/ceph-mon.$(hostname -s).asok config show   2.在部署节点修改了ceph ...

  8. P4145 上帝造题的七分钟2 / 花神游历各国（线段树区间开平方)

    有点意思,不需要什么懒标记之类的东西,因为一个数无论怎样开平方,最后取整的结果必然会是1,所以我们不妨用最大值来维护,若区间最大值不为1,就暴力修改,否则不用管. #include<bits/s ...

  9. CSS高度塌陷问题与解决办法

    问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应 ...

  10. 一、Log4Net配置

    Core的配置 一.创建core包含控制和视图的项目以及Log4Net引用 二.创建Log4Net配置文件 右击项目->添加文件   Log4Net.config 2 复制以下代码 以下配置可做 ...