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


Posted in Javascript onMay 12, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
AngularJS入门之动画
Jul 27 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
jquery简单实现图片切换效果的方法
May 12 #Javascript
浅谈javascript的分号的使用
May 12 #Javascript
JS中Location使用详解
May 12 #Javascript
js获取微信版本号的方法
May 12 #Javascript
javascript中基本类型和引用类型的区别分析
May 12 #Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 #Javascript
Javascript中typeof 用法小结
May 12 #Javascript
You might like
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
xml转json的js代码
2012/08/28 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
餐饮采购员岗位职责
2014/03/15 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
无线电知识基础入门篇
2022/02/18 无线电