如何查找平板分辨率下X、Y位置并通过alert校验输入，实现CSS可控三角形定位

一、平板分辨率下XY坐标获取与输入校验 #

• 坐标获取：直接绑定页面全局触屏点击事件即可实时获取点击位置的坐标，调试用代码如下：
  document.addEventListener('touchstart', e => { const touch = e.touches[0]; alert(X坐标：${touch.clientX}，Y坐标：${touch.clientY}); })
  平板端建议监听touchstart事件适配触屏操作，PC端调试可以替换为click事件。
• 输入合规校验逻辑：
  1. 先取当前平板屏幕实际尺寸：宽度取window.screen.width，高度取window.screen.height
  2. 类型校验：判断用户输入的X、Y是否为非负整数，不符合则弹出alert提示“请输入有效的非负整数坐标”
  3. 范围校验：判断X是否≤屏幕宽度、Y是否≤屏幕高度，不符合则弹出对应合规提示。

二、1024*768分辨率下可定位可调边长三角形实现 #

三角形绘制方案 #

使用CSS边框实现三角形，边长可通过修改边框参数直接调整，基础样式如下：

.triangle {
  width: 0;
  height: 0;
  /* 调整border-left和border-right的数值即可修改三角形边长 */
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  /* 等边三角形的高为边长*√3/2≈0.866，同步调整即可匹配边长比例 */
  border-bottom: 51.96px solid #2385bb;
  position: absolute;
}

坐标定位与校验逻辑 #

• 定位逻辑：三角形使用绝对定位，用户输入X、Y值后，直接将值赋值给元素的left和top样式属性即可，注意要拼接px单位。
• 校验规则：
  1. 先校验输入值合法性，仅支持非负整数，不符合弹出alert提示“请输入有效的非负整数坐标”
  2. 范围校验：X值必须≥0且≤1024，Y值必须≥0且≤768，超出范围直接弹出alert提示*“输入值超出屏幕范围！”*

内容的提问来源于stack exchange，提问作者Rahul Singh