<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. .NET Core 学习笔记2——管理nuget包

    .NET Core 基于Nuget包.它是一个.nupkg后缀的zip文件. 工具 dotnet 工具 vs2017 的程序包管理控台 这两个工具都可以用命令行来下载安装,更新,上传包(上传要先在网站 ...

  2. 服务器部署Apache+PHP+MYSQL+Laravel

    1.安装PHP 添加php安装源: sudo apt-get install python-software-properties sudo add-apt-repository ppa:ondrej ...

  3. 数据加密算法--详解DES加密算法原理与实现

    DES算法简介 DES(Data Encryption Standard)是目前最为流行的加密算法之一.DES是对称的,也就是说它使用同一个密钥来加密和解密数据. DES还是一种分组加密算法,该算法每 ...

  4. Maven settings.xml

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...

  5. eclipse java formater 配置详解

    comment.insert_new_line_before_root_tags(insert/do_not_insert):在Javadoc根标记块前插入空行,默认为insert: insert_s ...

  6. flask 项目基本框架的搭建

    综合案例:学生成绩管理项目搭建 一 新建项目目录students,并创建虚拟环境 mkvirtualenv students 二 安装开发中使用的依赖模块 pip install flask==0.1 ...

  7. redis 安装时候遇到 jemalloc 问题记录

    https://www.cnblogs.com/lovemdx/p/3199886.html https://blog.csdn.net/yfkiss/article/details/7035579 ...

  8. 数据结构学习之栈求解n皇后问题

    数据结构学习之栈求解n皇后问题 0x1 目的 ​ 深入掌握栈应用的算法和设计 0x2 内容 ​ 编写一个程序exp3-8.cpp求解n皇后问题. 0x3 问题描述 即在n×n的方格棋盘上,放置n个皇后 ...

  9. Robust PCA via Outlier Pursuit

    目录 引 主要结果 定理1 定理2 理论证明 构造Oracle Problem 算法 Xu H, Caramanis C, Sanghavi S, et al. Robust PCA via Outl ...

  10. RB-Tree插入过程详解

    红黑树具有很优秀的特性,其自平衡性特性,局部调整特性使得红黑树插入,删除,以查找,以及这些过程的内存资源的占用,的综合性能是非常高的(通常我们会拿红黑树和AVL树进行对比). 对于红黑树的这些特性,在 ...