js根据毫米/厘米算像素px
<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的更多相关文章
- 字体的大小(pt)和像素(px)如何转换?
px:相对长度单位.像素(Pixel). pt:绝对长度单位.点(Point). 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Em ...
- Android 中像素px和dp的转化
在Android的布局文件中,往往使用dp作为控件的宽度和高度尺寸,但是在Java代码中,调用getWidth()方法获得的尺寸单位却是像素px,这两个单位有明显的区别:dp和屏幕的密度有关,而px与 ...
- android-getTextSize返回值是以像素(px)为单位的,setTextSize()以sp为单位
使用如下代码时,发现字号不会变大,反而会变小:size = (int) mText.getTextSize() + 1;mText.setTextSize(size);后来发现getTextSize返 ...
- Vue.js快速介绍-超级马里奥像素艺术
原文出处:Quick Introduction to Vue.js - Super Mario Pixel Art ::代码我已经归纳在github上:[vue2-pixel-art]::::__查看 ...
- JS根据身份证号码算年龄
如果把身份证号码传到页面上,在前端页面获取年龄就需要用到JS脚本了: function GetAge(identityCard) { var len = (identityCard + "& ...
- js中各个排序算法和sort函数的比较
js中要实现数据排序,其实只需要用sort函数就能很好的满足了,但是我今天想知道他和其他排序算法的区别,比如耗时呀等.测了一组数据如下: // ---------- 一些排序算法 Sort = {} ...
- 小程序-支持的最小像素px
经过我手机多次测试,支持的最小px为: 8px;
- JS&Java实现常见算法面试题
Github上的算法repo地址:https://github.com/qcer/Algo-Practice (如果你觉得有帮助,可以给颗星星收藏之~~~) 一.Java实现部分 参见随笔分类的算法部 ...
- PS 厘米与像素切换
方法一: 快捷键 ctrl + r 打开标尺将鼠标放在标尺刻度上右键 出现菜单里修改即可: 方法二: 编辑---首选项---单位与标尺 修改即可:
随机推荐
- 数据结构:关键路径,利用DFS遍历每一条关键路径JAVA语言实现
这是我们学校做的数据结构课设,要求分别输出关键路径,我查遍资料java版的只能找到关键路径,但是无法分别输出关键路径 c++有可以分别输出的,所以在明白思想后自己写了一个java版的 函数带有输入函数 ...
- PM领导能力成熟度2级
人生如戏,大幕拉开,他走上舞台,饰演PM一角. 从技术岗位迈向管理岗位的第一步,对大多数像他一样的新晋PM来说,并不轻松.技术知识与经验是他曾经的主要才能与成功基础,而从成熟度一级开始,身为管理者的他 ...
- gitlab+jenkins自动发布Python包到私有仓储
背景 有个私有仓储,地址为https://your.repo.com/pypi/ 代码存储在gitlab, 地址为https://gitlab.company.com/software.git CI为 ...
- Swift构造
构造就是将结构体.类或枚举的实例准备好以便使用的过程.这个过程包括: (1)为实例中的每个存储属性设置初始值. (2)执行必要的准备和初始化工作. 实例的构造过程是通过构造器来完成的. 可以在结构体. ...
- MacBook Pro 安装win7 64 成功安装过程总结
安装对象: MacBook Pro (13 英寸, 2010 年中) 中安装win7 64位操作系统(原版安装非Ghost),且只保留win7系统即可. 场景还原: 拿到笔记本时,笔记本中已无Mac ...
- Kafka监控系统Kafka Eagle:支持kerberos认证
在线文档:https://ke.smartloli.org/ 作者博客:https://www.cnblogs.com/smartloli/p/9371904.html 源码地址:https://gi ...
- 类 Calendar
简介 Java.util.Calendar是日历类,在Date后出现,替换掉了许多Date的方法.该类将所有可能用到的时间信息封装为静态成员变量,方便获取.日历类就是方便获取各个时间属性的.注意Cal ...
- Linux 下操作Mysql指令的总结 远程连接的设置
参考博客:https://www.cnblogs.com/liaocheng/p/4243579.html (常用命令) https://www.cnblogs.com/zhangzhu/archiv ...
- 制作自己的Pod库(公有/私有)
https://www.jianshu.com/p/ece0b5721461 2018.04.12 16:43* 字数 1168 阅读 244评论 0喜欢 1 目的:1.管理自己常用的类:2.组件化开 ...
- SQL操作符、通配符等
一.通配符 常用模糊查询:% SELECT * FROM TB_Name WHERE FIELD LIKE pattern SELECT * FROM Persons WHERE name LIK ...