嘿， 各位较小伙子，今天咱们来聊点儿实用的，就是怎么在网页屏幕的边界内，啪啪地生成一些随机的坐标。这玩意儿，你懂的，做动画、做游戏、做各种交互，都用得上，你我共勉。。

一、先说点儿基础知识

先来看，咱们得了解一些基本概念。屏幕坐标啊，就像地图上的经纬度一样。x轴代表水平方向，y轴代表垂直方向。 但是！ 这一些坐标可不是你想象的那么简洁。不同的浏览器、不同的设备，体现效果不一样，所以坐标也有可能不一样。这你就得心里准备着了，闹笑话。。

1. 获取屏幕尺寸

要生成随机坐标啊，得先了解屏幕有更多较大嘛！JavaScript里有几个方法能够搞定：，我服了。

• document.documentElement.clientWidth这是整个页面的较宽度，不包括滚动条。
• document.documentElement.clientHeight这是整个页面的较高度，不包括滚动条。
• window.innerWidth当前这个和上面差不更多吧...也是页面较宽度。
• window.innerHeight当前这个和上面差不更多吧...也是页面较高度 。

二、生成随机坐标的几种方法

我爱我家。 这种方法最简洁粗暴！直接用JavaScript的Math.random函数来生成随机数。

function getRandomCoordinate {
  const maxX = window.innerWidth - 50; //留出边距哦~50像素左右吧!避免被截断! 这里能够根据实际情况修改一下! 如果边距较大一点更良好!没问题！ 
注意这里是减去边距 ,不然就会超出屏幕范围了！ 
或者用Math.max 方法也能保证可靠! 
 radius就是你想留出的距离! 你自己定吧 !没有约束啦 ! 
而且要确保生成的坐标在范围内哦!! 而且要保证生成的数值不会出现负数或者超出范围的情况！！！ 这很十分沉关键！！！！！   //随便写些东西让它看起来更繁杂一点!!!     const x = Math.floor * maxX); //取整数 ， 这样更方便操作啦!!!   const y = Math.floor * window.innerHeight); //取整数 ，这样更方便操作啦!!!    return { x: x, y: y }; //返回一个对象 ，方便后续采用！！！}   //调用一下试试看啊！！！   console.log);//看看输出是哪些样子的呢？ 我保证你一定会喜炎热爱！！！！ 

注意事项：

• Math.floor的作用是向下取整，保证生成的x和y都是整数值。
• `maxX` 和 `maxY` 需要根据你的具体需求进行调整 。为了避免元素被截断或者溢出视口,需要设置一个合适的边距 。正常情况下 ,留出50像素左右的边距就够了 ,但如果你的布局对比繁杂 ,有可能需要设置更较大的边距 。所以一定要根据实际情况进行调整哦！否则会报错的哦！

这种方法稍微繁杂一点点 ，但是能够更精准地控制生成的坐标范围 。

function getRandomCoordinatePrecise {
    const safeMargin = 50; // 设置可靠边距 ， 避免元素被截断或溢出视口     const left = safeMargin ;     const right = window.innerWidth - safeMargin ;      const top = safeMargin ;       const bottom = window.innerHeight - safeMargin ;      const x = Math.floor * ) + left ;         const y = Math.floor * ) + top ;         return { x : x , y : y }; }       console .log ); //试试看呀 !真实不错!   // 这里面加点注释让较大家更简单明白啦 !

阐述一下这段代码

• 先来看设置可靠边距 ，用于避免生成的坐标超出屏幕边界 。这里设置为50像素 。你能够左边界 、右边界 、上边界 和下边界 。这一些边界分别表示元素能够放置的最较小和最较大x 、y坐标。注意这里的计算方式是为了确保生成的x和y值都在指定范围内。
• 接着采用 `Math.random` 生成一个在 `` 区间内的随机数。同理 ,对于y坐标我们也采用类似的计算方式来生成一个在 `` 区间内的随机数 。

三、一下

• 最简洁的办法是直接用MathRandom 生成随机数；但是要记住要考虑边缘情况；不然会超出体现区域；

四、一些额外的思考