js实现两点之间画线的方法_javascript技巧

本文实例讲述了js实现两点之间画线的方法。分享给大家供大家参考。具体分析如下:

最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看。

两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折,后面将根据连连看中图片位置点来确定折线的方向。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两点之间画折线</title>
<style type="text/css">
body{
 font-size:12px;
}
</style>
</head>
<script type="text/javascript">
<!--
var dot=new Array();
document.onmousedown =function(a)
{
 //若div存在,则删除
 if(document.getElementById('line_div')){
 var clearDiv=document.getElementById("line_div");
 clearDiv.parentNode.removeChild(clearDiv);
 }
 //按下时创建一个事件
 if(!a) a=window.event;
 //获取x轴、y轴坐标
 var x=a.clientX;
 var y=a.clientY;
 //当数组长度大于等于4时,清空数组
 if(dot.length>=4) dot.splice(0,4);
 //将x、y添加到数组中,数组中保存了两组坐标值,相当于页面上的A(x1,y1)、B(x2,y2)两点
 dot.push(x,y);
 //当数组长度为4时,画线。
 if(dot.length==4){
 //计算div的长和宽
 var width=Math.abs(dot[0]-dot[2]);
 var height=Math.abs(dot[1]-dot[3]);
 //在页面上定位div左上角的具体位置
 var left=dot[0]-dot[2]<0?dot[0]:dot[2];
 var top=dot[1]-dot[3]<0?dot[1]:dot[3];
 //创建div
 var div=document.createElement("div");
 div.innerHTML=' <div id="line_div" style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border-left:1px solid #cdcdcd;border-top:1px solid #cdcdcd;"></div>';
 document.body.appendChild(div);
 }
}
-->
</script>
<body>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 画线
两点之间
javascript 画线、jquery两点画线、js两点画线、高德地图两点之间画线、matlab两点之间画线,以便于您获取更多的相关知识。

时间: 2024-11-30 02:21:25

js实现两点之间画线的方法_javascript技巧的相关文章

js实现两点之间画线的方法

  本文实例讲述了js实现两点之间画线的方法.分享给大家供大家参考.具体分析如下: 最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看. 两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折,后面将根据连连看中图片位置点来确定折线的方向. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

JS画线(实例代码)_javascript技巧

IE下画线 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml&quo

使用JS画图之点、线、面_javascript技巧

JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 复制代码 代码如下: //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){     document.write("<span id='"+opts.point[0]+&q

JS与jQ读取xml文件的方法_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: jquery读取xml文件 <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <

js实现仿百度瀑布流的方法_javascript技巧

本文实例讲述了js实现仿百度瀑布流的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>仿百度图片瀑布流</title> <link rel="stylesheet" type="text/css" href="style.css"&g

基于bootstrap-datetimepicker.js不支持IE8的快速解决方法_javascript技巧

实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

js计算系统当前日期是星期几的方法_javascript技巧

本文实例为大家分享了4种js计算系统当前日期是星期几的方法,供大家参考,具体内容如下 方法一: // 计算系统当前是星期几 var str = "今天是星期" + "日一二三四五六".charat(new date().getday()); 方法二: var a = new array("日", "一", "二", "三", "四", "五", &

javascript浏览器窗口之间传递数据的方法_javascript技巧

本文实例讲述了javascript浏览器窗口之间传递数据的方法.分享给大家供大家参考.具体分析如下: 摘要: 在项目开发中我们经常会遇到弹窗,有的是通过div模拟弹窗效果,有的是通过iframe,也有通过window自带的open函数打开一个新的窗口.今天给大家分享的是最后一种通过window.open()函数打开页面进行数据交互.首先看下效果图: 原理: 父窗口给子窗口传递数据是通过url的参数传递过去,子窗口给父窗口传递数据是通过父窗口的全局函数传递. 代码:index.html如下: 复制

js实现iframe自动自适应高度的方法_javascript技巧

本文实例讲述了js实现iframe自动自适应高度的方法.分享给大家供大家参考.具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长.删除数据后,iframe高度要自动缩短. 将下一段代码拷贝到iframe所在那个html或者jsp页面.在</html>标签后,调用此函数即可. <script type="text/javascript"> autoAdjus