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="计算" οnclick="compute(1)">
<input type="button" value="计算And画格子" οnclick="compute(2)">
<input type="button" value="一键生成多个格子(生成以后可以打印出来在纸上用尺子量一下对不对)" οnclick="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>

转载于:https://www.cnblogs.com/q149072205/p/9714664.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言为什么有这么多的编程环境?_为什么98%的程序员学编程都会从C语言开始?...

在互联网蓬勃发展的时代&#xff0c;有一类人做出了巨大的贡献&#xff0c;这一群人被大家称之为程序员&#xff0c;怎样才能成为一名优秀的程序员呢&#xff0c;为什么每一个程序员都需要学习C语言呢&#xff1f;就让我来跟大家分享分享&#xff1a;壹第一&#xff1a;相比较其…

怎么把电脑上的python软件卸载干净_怎么把一个软件卸载干净_把一个软件卸载干净的两种方法-系统城...

平时使用电脑肯定有卸载软件的操作&#xff0c;一般人直接用户桌面的快捷方式删除&#xff0c;表示软件已经卸载干净了&#xff0c;因为在桌面已经看不见了。其实大部分都没有卸载干净&#xff0c;如果没卸载干净&#xff0c;下载就无法安装了&#xff0c;因为之前还有残留文件…

2.x最终照着教程,成功使用OpenGL ES 绘制纹理贴图,添加了灰度图

在之前成功绘制变色的几何图形之后&#xff0c;今天利用Openg ES的可编程管线绘制出第一张纹理。学校时候不知道OpenGL的重要性&#xff0c;怕晦涩的语法。没有跟老师学习OpenGL的环境配置&#xff0c;现在仅仅能利用cocos2dx 2.2.3 配置好的环境学习OpenGL ES。源码来自《coco…

C# Dapper 简单实例

/// <summary>/// 分页信息/// </summary>public class PageInfo<T>{/// <summary>/// 分页信息/// </summary>public PageInfo(){}/// <summary>/// 总页数/// </summary>public long TotalCount{get; set;}/// <summary>///…

Angular 星级评分组件

一、需求演变及描述&#xff1a; 1. 有一个“客户对公司的总体评价”的字段&#xff08;evalutation&#xff09;。字段为枚举类型&#xff0c;0-5&#xff0c;对应关系为&#xff1a;0-暂无评价&#xff0c;1-很差&#xff0c;2-差&#xff0c;3-一般&#xff0c;4-好&#xf…

计算机网络怎么查看连接打印机驱动,如何检测网络打印机是否已成功连接到计算机[检测方法]...

大概很多婴儿都像以前的编辑一样. 使用网络打印机时&#xff0c;有时它们可​​以打印打印机没有和电脑连接&#xff0c;有时却不能. 那么如何检测网络打印机是否已成功连接到计算机&#xff1f;跟随编辑器往下看.系统反复提示“无法打印”&#xff0c;因此本来很忙的小修几乎快…

eclipse python插件_pydev插件下载-eclipse中的python插件下载6.0.0 官网最新版-西西软件下载...

在eclipse中安装python所需的插件。PyDev for Eclipse 是一个功能强大且易用的 Eclipse Python IDE 插件。利用 PyDev 插件把 Eclipse 变为功能强大且易用的 Python IDE&#xff0c;如何利用其进行 Python 程序的开发和调试。安装方法&#xff1a;一种比较随意的方法就是把压缩…

a - 数据结构实验之图论一:基于邻接矩阵的广度优先搜索遍历_数据结构--图

故事凌 今天基本知识点图可说是所有数据结构里面知识点最丰富的一个, 自己笨的知识点如下:阶(oRDER), 度: 出度(out-Degree), 入度(in-Degree)树(Tree), 森林(Forest), 环(Loop)有向图(Directed Graph), 无向图(Undirected Graph), 完全有向图, 完全无向图连通图(Connected Gra…

vim: vimrc

2019独角兽企业重金招聘Python工程师标准>>> 打造vim CIDE http://blog.csdn.net/doc_sgl/article/details/47205779 转载于:https://my.oschina.net/u/2528742/blog/843176

计算机二级考试试题在线看,【TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读材料】...

TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读《2015年全国计算机二级考试试题题库.doc》由会员分享&#xff0c;可免费在线阅读全文&#xff0c;更多与《TOP182015年全国计算机二级考试试题题库.doc文档免费在线阅读》相关文档资源请在帮帮文库(www.woc88.com)数…

使用flask_socketio实现客户端间即时通信

关于flask_socketio的入门可以看我的上一篇博客《使用flask_socketio实现服务端向客户端定时推送》 用socketio实现即时通信十分简单&#xff0c;只需要客户端发送用户输入的信息到后端&#xff0c;后端再将此信息广播到所有连接到此命名域的客户端就可以了。 from flask impor…

java继承原理内存角度_Java基础知识巩固

最近发现自己的Java基础知识还是有点薄弱&#xff0c;刚好有点空闲时间进行再补一补&#xff0c;然后进行整理一下&#xff0c;方便自己以后复习。其实个人认为Java基础还是很重要的&#xff0c;不管从事Java后端开发还是Android开发&#xff0c;Java这块的基础还是重中之重&am…

python函数对变量的作用_python函数对变量的作用及遵循的原则

1.全局变量和局部变量全局变量&#xff1a;指在函数之外定义的变量&#xff0c;一般没有缩进&#xff0c;在程序执行的全过程有效局部变量&#xff1a;指在函数内部使用的变量&#xff0c;仅在函数内部有效&#xff0c;当函数退出时变量将不存在例如&#xff1a;1 n1 #n是全局变…

不用开发实现RDS RDWeb门户美化和个性化

个性化RDWeb界面RDWeb原生界面相对比较简洁&#xff0c;每个企业部署的RDWeb都是千篇一律的&#xff0c;有些用户可能希望将网页装饰得个性化点。在谈到自定义Web界面&#xff0c;第一反应可能是使用代码进行编写&#xff0c;但是这里要和大家分享的是无代码美化和自定义RDWeb界…

安卓使用富文本编辑器html5,Android富文本编辑器,图文详细

Android富文本编辑器,图文详细资源下载此资源下载价格为3D币&#xff0c;请先登录资源文件列表AndroidRichTextEditor/.classpath , 475AndroidRichTextEditor/.project , 857AndroidRichTextEditor/AndroidManifest.xml , 1281AndroidRichTextEditor/bin/AndroidManifest.xml …

python pip安装pyinstaller报错_pip install pyinstaller (安装过程报错解决)

安装目标&#xff1a;pip install pyinstaller报错内容&#xff1a;WARNING: You are using pip version 19.2.3, however version 20.0.2 is available.You should consider upgrading via the python -m pip install --upgrade pip command.解决方法&#xff1a;运行--->c…

[SQL]LeetCode183. 从不订购的客户 | Customers Who Never Order

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号&#xff1a;山青咏芝&#xff08;shanqingyongzhi&#xff09;➤博客园地址&#xff1a;山青咏芝&#xff08;https://www.cnblogs.com/strengthen/&#xff09;➤GitHub地址&a…

access四舍五入取整round_access中round函数怎么用

access中round函数怎么用?access中round函数的用法&#xff01;下面&#xff0c;小编通过示例来给大家介绍access中round函数的用法。工具/原料access 2007方法/步骤打开access应用程序&#xff0c;新建一个数据库&#xff0c;并新建如下图所示的worker数据表&#xff0c;用于…

其他大神的配置 nginx 配置参考

2019独角兽企业重金招聘Python工程师标准>>> user nginx nginx; worker_processes 2; #error_log logs/error.log; error_log logs/error.log notice; #error_log logs/error.log info; pid logs/nginx.pid; google_perftools_profiles /tmp/tcmalloc; worker_rlim…

小孩用计算机做作业怎么表达,计算机作业

满意答案尧Dreaman夕2014.09.25采纳率&#xff1a;40% 等级&#xff1a;10已帮助&#xff1a;1121人Windows中可以设置、控制计算机硬件配置和修改桌面布局的应用程序是( D)A) Word B) Excel C)资源管理器 D)控制面板多窗口的切换可以通过(D )来实现A)在任务栏上用鼠标单击右…