计算网页上坐标的距离

最新推荐文章于 2020-07-31 14:57:57 发布
最新推荐文章于 2020-07-31 14:57:57 发布
阅读量128 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/crmhf/p/3823199.html
版权
脚本说明:
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function distance(form) {
var x1 = eval(form.x1.value);
var y1 = eval(form.y1.value);
var x2 = eval(form.x2.value);
var y2 = eval(form.y2.value);
var xdiff = x2 - x1;
var ydiff = y2 - y1;
form.answer.value = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
}
// End -->
</script>
<center>
<form>
<table border=3 cellspacing=2 cellpadding=5>
<tr>
<td colspan=4 align=center>计算平面两点之间的距离</td>
</tr>
<tr>
<td colspan=2 align=center>A点</td>
<td colspan=2 align=center>B点</td>
</tr>
<tr>
<td align=center>A点横坐标</td>
<td align=center>A点纵坐标</td>
<td align=center>B点横坐标</td>
<td align=center>B点纵坐标</td>
</tr>
<tr>
<td align=center><input type=text name=x1 size=5></td>
<td align=center><input type=text name=y1 size=5></td>
<td align=center><input type=text name=x2 size=5></td>
<td align=center><input type=text name=y2 size=5></td>
</tr>
<tr>
<td colspan=4 align=center><input type=button value="计算距离" onClick="distance(this.form)"></td>
</tr>
<tr>
<td colspan=4 align=center><input type=text name=answer size=20></td>
</tr>
</table>
</form>
</center>

转载于:https://www.cnblogs.com/crmhf/p/3823199.html

weixin_30478619
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页中的坐标
m0_71873158的博客
01-04 958
event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离（与浏览器窗口大小无关） event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离（与浏览器窗口大小无关）:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离（常用）（不包括滚顶条内的距离）:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离（常用）（不包括滚顶条内的距离）：向下滑动滚动块时元素隐藏内容的高度。
HTML5地理定位(已知经纬度，计算两个坐标点之间的距离)
随笔记录
06-16 534
事实上，地球上任意两个坐标点在地平线上的距离并不是直线，而是球面的弧线。 下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离。半正矢公式也成为Haversine公式，它最早时航海学中的重要公式，其原理是将地球看作圆形，利用公式来计算圆形表面上任意两个点之间的弧线距离。 　　Haversine公式中与本项目有关的公式为： 相关符号解释如下: d : 两点之间的弧线总距离 r : 球体的半径 Q1,Q...
屏幕坐标、客户区域（可视窗口）坐标、页面坐标的区分
weixin_34006965的博客
02-18 532
区分三类坐标 屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下： 屏幕坐标 顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为screenX，screenY,范围如上图最外层红色边框范围，坐标为蓝色虚线对应的坐标。可以使用类似下面的代码取得鼠标事件的屏幕坐标: var div ...
web开发 边距属性 margin
zamaochick的博客
12-13 4440
1.功能介绍： 通过&lt;body&gt;元素中的topmargin,leftmargin,rightmargin,bottommargin属性设置页面边距，调整页面显示内容与浏览器边框的距离，使内容显得更加美观。 2.语法说明： &lt;body topmargin="value" leftmargin="value" rightmargin="value" bottommatgin=...
js 根据经纬度计算两地之间的距离
小傲哥哥的博客
07-31 3374
今天做一个涉及到地图的项目，其中就有一个计算两地之间距离的需求。 注意：是根据两地之间的经纬度来计算他们的距离。 下面直接上代码： space(lat1, lng1, lat2, lng2) { console.log(lat1, lng1, lat2, lng2) var radLat1 = lat1 * Math.PI / 180.0; var radLat2 = lat2 * Math.PI / 180.0; var a = radLat
谷歌转百度坐标例程及坐标距离计算
08-31
总结，理解和掌握“谷歌转百度”坐标转换及坐标距离计算，是进行跨平台地图应用开发的关键技能。这不仅涉及到数学和编程知识，还需要对GIS有一定的了解。在实际开发中，可以利用这些技术实现不同地图平台的数据互...
35.（leaflet篇）leaflet+turf计算离点距离最近线上的点坐标.zip
09-17
它支持多种地图服务，如OpenStreetMap，使你可以轻松地在网页上嵌入地图。 接下来，我们引入Turf.js。Turf提供了一系列地理空间算法，包括测量、缓冲区、交集等。在我们的场景中，我们会用到`turf....
详解JavaScript中的坐标和距离
10-16
在JavaScript中，坐标和距离的计算对于前端开发者来说至关重要，因为它们涉及到用户界面的交互、动画效果以及元素定位。在本文中，我们将深入探讨JavaScript中与坐标和距离相关的概念，主要包括`window`对象的属性和...
百度地图API获取屏幕中心点坐标计算两点距离定位当前位置
11-08
本篇文章将深入探讨如何利用百度地图API来获取屏幕中心点坐标，计算两点之间的距离，并定位用户的当前位置。首先，我们需要了解百度地图API的基本概念和使用方法。 百度地图API是百度提供的一项服务，它允许开发者...
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
10-26
在JavaScript中，获取元素在网页中的绝对坐标是一个常见的需求，特别是在进行交互式或者基于位置的网页设计时。这些坐标可以帮助我们精确地定位元素，比如在拖放操作、鼠标悬停效果或者点击事件处理中。本篇文章将...
微信小程序地图演示Demo / 坐标查地址 / 计算两个地址的距离
api工厂
08-13 2693
前言 本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点： 《创建 HelloWorld 项目》 《使用 “apifm-wxapi” 快速开发小程序》 功能说明 知道坐标，可以查询该坐标的地址 给定两个坐标，可以计算两点之间的距离(公里 / km) 特别说明 本案例中，使用到了微信小程序的2个官方接口...
苏州大学计算机专业2014年复试上机真题
独住小楼听雨
03-13 406
题目描述: 数据文件里面是用二进制编写的，里面放了一堆int 型的数，每个数占4个字节，每次读取两个，这两个数构成一个坐标。 （1）规定处于第一象限的数是有效点，（即x&amp;gt;0,y&amp;gt;0的坐标），问这么多点中有效点有多少个？ （2）现在用户从键盘输入一个坐标和一个数字K，设计算法输出K个离该坐标距离最近的点的坐标和每个坐标到该点的距离，写入到output.txt文件中 输入描述: 1、模拟数...
[Web 开发] 获取页面元素的坐标及大小
weixin_34050427的博客
11-15 594
获取页面元素的位置坐标以及大小尺寸是Web开发中的常见问题。 这篇MSDN 文章《Measuring Element Dimension and Location》是非常好的资料，推荐读一下。 我把文中的示意图转帖在这里，便于参考： 本文转自 陈本峰 51CTO博客，原文链接：http://blog.51cto.com/wing...
前端页面获取各类页面尺寸及坐标尺寸总结
weixin_30457551的博客
11-20 788
前端开发过程中,我们时常需要获取页面及视口的相关高度,来实现一些定位、布局和滚动效果，下面总结了一些高度和宽度的获取方式，供大家参考：1.获取页面滚动条移动的距离页面的水平滚动距离----> document.body.scrollLeft;页面的垂直滚动距离----> document.body.scrollTop;特殊情况:　　有时候发现document.body.scrollTo...
web前端开发的各种坐标系，尺寸
jiang7701037的博客
12-24 6803
//一、各种坐标系（坐标原点） //1)、可视区域（浏览器窗口中可以看到（网页）的区域）左上角 //2)、页面左上角 //3)、某个HTML元素的左上角 //1）、以可视区域左上角为坐标系原点 //    event.clientX: 鼠标距离原点的x方向的坐标 //    event.clientY: 鼠标距离原点的y方向的坐标        //2）、以
js 计算页面某个元素距离页面顶端的距离
weixin_30394669的博客
04-24 358
<script> window.onscroll = function () { var obj = document.getElementById("thirdnav"); var topa = obj.offsetTop; var top = document.documentEl...
网页元素坐标表示及坐标计算方法
热门推荐
weixin_42080566的博客
04-29 1万+
一、页面元素坐标种类    根据DOM的鼠标事件（参见https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent），浏览器响应鼠标事件时，会上报四类坐标：1、(pageX，pageY)：相对于整个网页的坐标，因此坐标点可能比实际屏幕尺寸大。该坐标属于绝对坐标，不随着页面滚动而变化，当网页渲染完毕后，每个元素的page坐标就已固定。2、(c...
二进制数-北邮2012研究生复试
关注网络安全、云原生安全
02-25 1395
地址：http://10.105.242.80/problem/p/95/ 95. 二进制数 时间限制 1000 ms 内存限制 65536 KB 题目描述 大家都知道，数据在计算机里中存储是以二进制的形式存储的。 有一天，小明学了C语言之后，他想知道一个类型为unsigned int 类型的数字，存储在计算机中的二进制串是什么样子的。 你能帮帮小明吗？并且，小明不想要二进制串中前面的...
经纬度装xy坐标在线工具
最新发布
12-07
然而，在某些应用中，我们可能需要将地理位置转换为平面坐标，以便于进行距离计算、地图绘制、路径规划等操作。 这个在线工具通常会提供一个网页界面，用户可以将经纬度坐标输入到指定的输入框中，然后点击转换按钮...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值