用javascript生成屏幕尺

本文介绍了一个使用JavaScript实现的在线尺子生成器,用户可以通过输入调整参数来自定义尺子的精度,适用于各种尺寸的人民币纸币和100元纸币。
<SCRIPT   LANGUAGE= "JavaScript"> 
<!-- 
function   drawRuler() 

var mm= document.f.p2m.value;//初始值4.4,相当于1毫米=4.4屏幕像素,可根据真实尺子或人民币纸币尺寸校正
var x0=50;
var y0=document.body.scrollHeight/2;
var rs=" ";
var h1=10;
var h5=15
var h10=20;
var h=h1;
var y=y0;
var left=0;
var n=document.body.scrollWidth/mm-50;
for(var i=0;i<n;i+=1)
{
h=h1;
y=y0;
if(i%10==0){
h=h10;
y=y+h1-h10;
if(i<100){
left=x0+i*mm-7;
}
else{
left=x0+i*mm-14;
}
rs=rs+"<table style='left:"+left+";top:"+(y0-30)+" ;position:absolute'><td>"+(i/10)+"</td></table>";
}
else if(i%5==0){
h=h5;
y=y+h1-h5;
}
rs+="<div  style=' background-color:black ;height:"+h+";width:1;top:"+y+";left:"+(x0+i*mm)+";position:absolute; '></div>"; 
}
//alert(document.body.scrollHeight+"---"+document.body.scrollWidth);
document.getElementById('div1').innerHTML=rs;
}


//--> 
</SCRIPT> 
<div id=div1></div> 
<form name="f" AutoRedraw="False">
<td vAlign="top" width="20">请输入调整值
<input name="p2m" size="8" value="4.4"></td>
 
</form>
<button onclick="drawRuler()"> 生成尺 </button>
<br>
<table border="1">
<tr><th>第五套人民币尺寸:</th></tr>
<tr><td>100元纸币155X77</td></tr>
<tr><td>50元纸币150X70</td></tr>
<tr><td>20元纸币145X70</td></tr>
<tr><td>10元纸币140X70</td></tr>
<tr><td>5元纸币134X63</td></tr>
<tr><td>1元纸币130X63</td></tr>


</table>
<think> 首先,用户的问题是:“我想查找使用JavaScript获取屏幕像素寸的方法 请问JavaScript获取屏幕像素寸的方法”。 系统指令要求: - 所有行内数学表达式必须使用$...$格式(但这里没有数学表达式,所以不适用)。 - 独立公式使用$$...$$(同样不适用)。 - LaTeX语法正确(不涉及)。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识,例如[^1]。 用户提供了引用[1]、[2]、[3],这些是参考站内引用。我需要参考这些引用来回答问题。 引用内容回顾: - 引用[1]:展示了一个HTML/JavaScript示例,使用document.documentElement.clientWidth获取设备屏幕宽度。 - 引用[2]:讨论了不同浏览器下获取窗口寸的方法,提到了Netscape、IE和DOM环境。 - 引用[3]:列出了多种JavaScript属性来获取屏幕像素寸,如window.screen.width、window.screen.height等。 用户的需求是“查找使用JavaScript获取屏幕像素寸的方法”,所以我需要提供如何使用JavaScript获取屏幕寸的信息。 我的回答应该: 1. 结构清晰,逐步解决问题。 2. 尽量保证回答真实可靠。 3. 参考提供的引用。 4. 在结束时生成相关问题。 回答结构: - 先介绍背景(如果需要)。 - 解释获取屏幕像素寸的不同方法。 - 提供代码示例。 - 总结最佳实践。 - 自然地引用来源。 - 最后添加相关问题。 关键点: - 屏幕像素寸通常是指屏幕的分辨率,如1920x1080。 - 在JavaScript中,可以使用window.screen对象获取。 - window.screen.width:屏幕宽度(像素)。 - window.screen.height:屏幕高度(像素)。 - 其他相关属性: - window.screen.availWidth:可用工作区宽度(减去任务栏等)。 - window.screen.availHeight:可用工作区高度。 - 用户可能混淆屏幕寸和视口寸。屏幕寸是整个物理屏幕的分辨率,而视口寸是浏览器窗口的寸。 - 视口寸:window.innerWidth, window.innerHeight, document.documentElement.clientWidth等。 从引用[3]中: - 屏幕分辨率的高:window.screen.height - 屏幕分辨率的宽:window.screen.width - 屏幕可用工作区高度:window.screen.availHeight - 屏幕可用工作区宽度:window.screen.availWidth 从引用[1],使用document.documentElement.clientWidth,但这是获取视口宽度,不是屏幕分辨率。 用户说“屏幕像素寸”,在上下文中,可能指屏幕分辨率。 在回答中,我需要区分: - 屏幕分辨率(物理屏幕大小)。 - 浏览器视口大小(当前窗口大小)。 引用[2]提到不同浏览器的兼容性,但现代浏览器基本一致。 代码示例: - 提供一个简单的JavaScript代码来获取屏幕宽度和高度。 使用中文回答。 结束时生成相关问题。 添加引用:在引用的段落末尾添加标识。例如,如果提到引用[3]的内容,就添加[^3]。 可能的回答大纲: 1. 介绍JavaScript获取屏幕像素寸的方法。 2. 解释关键属性:window.screen.width 和 window.screen.height。 3. 提供代码示例。 4. 讨论其他相关属性(如可用工作区)。 5. 注意事项(兼容性等)。 6. 总结。 7. 添加相关问题。 相关问题ideas: - 如何获取浏览器视口寸? - JavaScript获取设备像素比是什么意思? - 如何检测屏幕方向变化? - 不同设备下的兼容性问题? 确保回答真实可靠:基于Web标准知识。 </think> ### JavaScript获取屏幕像素寸的方法 在JavaScript中,获取屏幕像素寸(即屏幕分辨率)主要使用`window.screen`对象提供的属性。屏幕分辨率表示设备的物理像素大小,例如1920×1080像素。这与浏览器视口寸(如窗口大小)不同,后者需要使用其他属性。以下我将逐步解释使用方法、注意事项,并提供代码示例。内容参考了提供的引用信息,确保兼容性和可靠性。 #### 1. **核心方法和属性** - **屏幕分辨率寸**:使用`window.screen.width`获取屏幕宽度(像素),`window.screen.height`获取屏幕高度(像素)。这些属性返回设备的整体分辨率,不受浏览器窗口大小影响。 - 例如:`window.screen.width`返回类似1920的值。 - **可用工作区寸**:有时需要获取屏幕除去任务栏或其他系统组件的区域大小,使用`window.screen.availWidth`(可用宽度)和`window.screen.availHeight`(可用高度)。 - 例如:在Windows系统上,`window.screen.availHeight`可能小于`window.screen.height`。 - 这些属性在现代浏览器(包括Chrome、Firefox、Safari和Edge)中兼容性良好,但在旧版浏览器(如IE)中可能需要额外处理[^2][^3]。 #### 2. **代码示例** 下面是一个完整的HTML示例,演示如何获取屏幕像素寸并在页面上显示。点击按钮后,会输出屏幕宽度、高度和可用工作区寸。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>获取屏幕像素寸示例</title> <style> body { text-align: center; font-family: Arial, sans-serif; } h1 { color: green; } button { padding: 10px 20px; margin: 20px; cursor: pointer; } p { font-size: 18px; } </style> </head> <body> <h1>JavaScript获取屏幕像素寸</h1> <p id="instruction">点击按钮获取屏幕寸:</p> <button onclick="getScreenSize()">点击这里</button> <p id="result" style="color: blue; font-weight: bold;"></p> <script> function getScreenSize() { // 获取屏幕分辨率寸 const width = window.screen.width; const height = window.screen.height; // 获取可用工作区寸 const availWidth = window.screen.availWidth; const availHeight = window.screen.availHeight; // 显示结果 document.getElementById("result").innerHTML = `屏幕分辨率:${width}像素 × ${height}像素<br>` + `可用工作区:${availWidth}像素 × ${availHeight}像素`; } </script> </body> </html> ``` - **解释**: - `window.screen.width` 和 `window.screen.height`:直接获取物理屏幕的像素寸。 - `window.screen.availWidth` 和 `window.screen.availHeight`:获取屏幕有效区域寸(排除系统UI)。 - 此代码兼容多数浏览器,无需额外库。 #### 3. **注意事项** - **区分屏幕寸和视口寸**: - 屏幕寸(`window.screen`)是固定的物理分辨率。 - 如需获取浏览器窗口大小(视口寸),可以使用`document.documentElement.clientWidth`或`window.innerWidth`(引用[1][^1]和[3][^3])。 - **兼容性**:在旧版IE或特殊浏览器中,可能需要检测`document.body.clientWidth`作为备选方案(引用[2][^2])。但现代浏览器已标准化,优先使用`window.screen`。 - **像素准确度**:这些属性返回整数像素值。对于高DPI屏幕(如Retina),实际渲染可能与物理像素不同,此时可结合`window.devicePixelRatio`获取缩放比例。 - **性能**:访问屏幕属性是同步操作,性能开销小,适合事件处理(如页面加载或按钮点击)。 #### 4. **最佳实践** - 始终优先使用`window.screen.width`和`window.screen.height`获取真实屏幕分辨率。 - 对于响应式设计,可结合CSS媒体查询(如`@media (max-width: 768px)`)实现自适应布局。 - 测试跨设备:在移动端和桌面端验证,确保代码健壮性。 如果您还有其他具体场景(如动态更新寸),欢迎提供更多细节,我会进一步优化建议。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值