<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. Android 简单统计文本文件字符数、单词数、行数Demo

    做的demo是统计文本文件的字符数.单词数.行数的,首先呢,我们必须要有一个文本文件.所以我们要么创建一个文本文件,并保存,然后再解析:要么就提前把文本文件先放到模拟器上,然后检索到文本名再进行解析. ...

  2. ARMV8体系结构简介

    armv8 1.前言 本文的主要内容来源于ARMV8白皮书v5,对ARMV8做一个概述.包含如下的内容: 首先从背景谈起,讲述ARM的发展历程: 之后介绍ARMV8体系结构的基本特征: 介绍A64指令 ...

  3. easyui实现分页

    主要参考官方的文档,欢迎评论 1.集成easyui,下面是我的引入方式,我引入到了head.html 每次只要引入该页面就可以了. <!-- easyui样式支持 --><link ...

  4. 基于CAS在.NET中实现SSO单点登录

    单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. 单点登录原理 ...

  5. 浏览器仿EXCEL表格插件 - 智表ZCELL产品V1.4发布

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  6. P4015 运输问题 网络流问题

    题目描述 WW 公司有 mm 个仓库和 nn 个零售商店.第 ii 个仓库有 a_iai​ 个单位的货物:第 jj 个零售商店需要 b_jbj​ 个单位的货物. 货物供需平衡,即\sum\limits ...

  7. jmeter在linux服务器的安装和运行

    一.工具准备 1.下载安装xshell连接服务器工具 2.下载安装Xftp工具,向服务器传输文件工具 3.下载jdk 1.8版本:jdk-8u11-linux-x64.tar.gz 下载地址: htt ...

  8. Django学习笔记（3）--模板

    模板 在实际的页面大多是带样式的HTML代码,而模板是一种带有特殊语法的html文件,这个html文件可以被django编译,可以传递参数进去, 实现数据动态化.在编译完成后,生成一个普通的html文 ...

  9. redis对sorted_set进行的相关操作

    redis对sorted_set(有序集合)类型操作的相关命令以及如何在python使用这些命令 redis对sorted_set(有序集合)类型操作的命令: 命令 语法 概述 返回值 Redis Z ...

  10. vue兄弟之间传值 bus中央事件总线

    创建一个eventVue.js文件 import Vue from 'vue' export default new Vue 父 <template> <div> <di ...