本文目录一览：
- 1、JavaScript实现计算多边形质心的方法示例
- 2、JS基于面向对象实现的拖拽库实例
- 3、js实现可键盘控制的简单抽奖程序
- 4、js Canvas实现的日历时钟案例有哪些
- 5、JS基于for语句编写的九九乘法表示例
JavaScript实现计算多边形质心的方法示例
本文实例讲述了JavaScript实现计算多边形质心的方法。分享给大家供大家参考，具体如下：
最近要基于百度地图显示多边形的标注，所以就研究了下计算Polygon的质心，代码如下：
function
Area(p0,p1,p2)
{
var
area
=
0.0
;
area
=
p0.lng
*
p1.lat
+
p1.lng
*
p2.lat
+
p2.lng
*
p0.lat
-
p1.lng
*
p0.lat
-
p2.lng
*
p1.lat
-
p0.lng
*
p2.lat;
return
area
/
2
;
}
//line
249
计算polygon的质心
function
getPolygonAreaCenter(points)
{
var
sum_x
=
0;
var
sum_y
=
0;
var
sum_area
=
0;
var
p1
=
points[1];
debugger;
for
(var
i
=
2;
i
points.length;
i++)
{
p2=points[i];
area
=
Area(points[0],p1,p2)
;
sum_area
+=
area
;
sum_x
+=
(points[0].lng
+
p1.lng
+
p2.lng)
*
area;
sum_y
+=
(points[0].lat
+
p1.lat
+
p2.lat)
*
area;
p1
=
p2
;
}
var
xx
=
sum_x
/
sum_area
/
3;
var
yy
=
sum_y
/
sum_area
/
3;
return
new
BMap.Point(xx,
yy);
}
标注文字的效果如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:js浮点数精确计算(加、减、乘、除)javascript
计算两个整数的百分比值js中精确计算加法和减法示例根据经纬度计算地球上两点之间的距离js实现代码js计算精度问题小结html+js实现简单的计算器代码(加减乘除)如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)jsvascript图像处理—(计算机视觉应用)图像金字塔Javascript计算两个marker之间的距离(Google
Map
V3)javascript图像处理—边缘梯度计算函数
JS基于面向对象实现的拖拽库实例
本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下：
这是一个面向对象的JS拖拽库，可设置水平锁定、垂直锁定、锁定位置、锁定范围等，设定这些范围后，只能在设定的模式下拖动，我觉得这是个挺不错的拖拽实例。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title拖拽库/title
style
type="text/css"
div,h2,p{margin:0;padding:0;}
body{font:14px/1.5
arial;}
#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px
solid
#f60;}
#box
.title{height:25px;background:#f60;}
#tool{margin-bottom:10px;}
/style
script
type="text/javascript"
function
Drag()
{
//初始化
this.initialize.apply(this,
arguments)
}
Drag.prototype
=
{
//初始化
initialize
:
function
(drag,
options)
{
this.drag
=
this.$(drag);
this._x
=
this._y
=
0;
this._moveDrag
=
this.bind(this,
this.moveDrag);
this._stopDrag
=
this.bind(this,
this.stopDrag);
this.setOptions(options);
this.handle
=
this.$(this.options.handle);
this.maxContainer
=
this.$(this.options.maxContainer);
this.maxTop
=
Math.max(this.maxContainer.clientHeight,
this.maxContainer.scrollHeight)
-
this.drag.offsetHeight;
this.maxLeft
=
Math.max(this.maxContainer.clientWidth,
this.maxContainer.scrollWidth)
-
this.drag.offsetWidth;
this.limit
=
this.options.limit;
this.lockX
=
this.options.lockX;
this.lockY
=
this.options.lockY;
this.lock
=
this.options.lock;
this.onStart
=
this.options.onStart;
this.onMove
=
this.options.onMove;
this.onStop
=
this.options.onStop;
this.handle.style.cursor
=
"move";
this.changeLayout();
this.addHandler(this.handle,
"mousedown",
this.bind(this,
this.startDrag))
},
changeLayout
:
function
()
{
this.drag.style.top
=
this.drag.offsetTop
+
"px";
this.drag.style.left
=
this.drag.offsetLeft
+
"px";
this.drag.style.position
=
"absolute";
this.drag.style.margin
=
"0"
},
startDrag
:
function
(event)
{
var
event
=
event
||
window.event;
this._x
=
event.clientX
-
this.drag.offsetLeft;
this._y
=
event.clientY
-
this.drag.offsetTop;
this.addHandler(document,
"mousemove",
this._moveDrag);
this.addHandler(document,
"mouseup",
this._stopDrag);
event.preventDefault
event.preventDefault();
this.handle.setCapture
this.handle.setCapture();
this.onStart()
},
moveDrag
:
function
(event)
{
var
event
=
event
||
window.event;
var
iTop
=
event.clientY
-
this._y;
var
iLeft
=
event.clientX
-
this._x;
if
(this.lock)
return;
this.limit
(iTop
(iTop
=
0),
iLeft
(iLeft
=
0),
iTop
this.maxTop
(iTop
=
this.maxTop),
iLeft
this.maxLeft
(iLeft
=
this.maxLeft));
this.lockY
||
(this.drag.style.top
=
iTop
+
"px");
this.lockX
||
(this.drag.style.left
=
iLeft
+
"px");
event.preventDefault
event.preventDefault();
this.onMove()
},
stopDrag
:
function
()
{
this.removeHandler(document,
"mousemove",
this._moveDrag);
this.removeHandler(document,
"mouseup",
this._stopDrag);
this.handle.releaseCapture
this.handle.releaseCapture();
this.onStop()
},
//参数设置
setOptions
:
function
(options)
{
this.options
=
{
handle:
this.drag,
//事件对象
limit:
true,
//锁定范围
lock:
false,
//锁定位置
lockX:
false,
//锁定水平位置
lockY:
false,
//锁定垂直位置
maxContainer:
document.documentElement
||
document.body,
//指定限制容器
onStart:
function
()
{},
//开始时回调函数
onMove:
function
()
{},
//拖拽时回调函数
onStop:
function
()
{}
//停止时回调函数
};
for
(var
p
in
options)
this.options[p]
=
options[p]
},
//获取id
$
:
function
(id)
{
return
typeof
id
===
"string"
?
document.getElementById(id)
:
id
},
//添加绑定事件
addHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.addEventListener
?
oElement.addEventListener(sEventType,
fnHandler,
false)
:
oElement.attachEvent("on"
+
sEventType,
fnHandler)
},
//删除绑定事件
removeHandler
:
function
(oElement,
sEventType,
fnHandler)
{
return
oElement.removeEventListener
?
oElement.removeEventListener(sEventType,
fnHandler,
false)
:
oElement.detachEvent("on"
+
sEventType,
fnHandler)
},
//绑定事件到对象
bind
:
function
(object,
fnHandler)
{
return
function
()
{
return
fnHandler.apply(object,
arguments)
}
}
};
//应用
window.onload
=
function
()
{
var
oBox
=
document.getElementById("box");
var
oTitle
=
oBox.getElementsByTagName("h2")[0];
var
oSpan
=
document.getElementsByTagName("span")[0];
var
oDrag
=
new
Drag(oBox,
{handle:oTitle,
limit:false});
var
aInput
=
document.getElementsByTagName("input");
//锁定范围接口
aInput[0].onclick
=
function
()
{
oDrag.limit
=
!oDrag.limit;
this.value
=
oDrag.limit
?
"取消锁定范围"
:
"锁定范围"
};
//水平锁定接口
aInput[1].onclick
=
function
()
{
oDrag.lockX
=
!oDrag.lockX;
this.value
=
oDrag.lockX
?
"取消水平锁定"
:
"水平锁定"
};
//垂直锁定接口
aInput[2].onclick
=
function
()
{
oDrag.lockY
=
!oDrag.lockY;
this.value
=
oDrag.lockY
?
"取消垂直锁定"
:
"垂直锁定"
};
//锁定位置接口
aInput[3].onclick
=
function
()
{
oDrag.lock
=
!oDrag.lock;
this.value
=
oDrag.lock
?
"取消锁定位置"
:
"锁定位置"
};
//开始拖拽时方法
oDrag.onStart
=
function
()
{
oSpan.innerHTML
=
"开始拖拽"
};
//开始拖拽时方法
oDrag.onMove
=
function
()
{
oSpan.innerHTML
=
"left:"
+
this.drag.offsetLeft
+
",
top:"
+
this.drag.offsetTop
};
//开始拖拽时方法
oDrag.onStop
=
function
()
{
oSpan.innerHTML
=
"结束拖拽"
};
};
/script
/head
body
div
id="tool"
input
type="button"
value="锁定范围"
/
input
type="button"
value="水平锁定"
/
input
type="button"
value="垂直锁定"
/
input
type="button"
value="锁定位置"
/
/div
p拖放状态：span未开始/span/p
div
id="box"
h2
class="title"/h2
/div
/body
/html
希望本文所述对大家的JavaScript程序设计有所帮助。
js实现可键盘控制的简单抽奖程序
本文实例为大家分享了js抽奖程序的编写代码，以及编写注意事项，感兴趣的小伙伴们可以参考一下
代码：
!DOCTYPE
html
html
lang="en"
head
meta
charset="UTF-8"
title简单抽奖（可用键盘）/title
style
*{margin:0;padding:0;}
.box{width:
400px;height:
300px;margin:50px
auto;background:
red}
.title{color:
#fff;font-size:
30px;font-weight:700px;padding:
50px
0;text-align:
center;height:40px;}
.btm{text-align:
center;padding:20px
0;}
.btm
a{display:
inline-block;width:
120px;height:60px;line-height:
60px;background:
#FEF097;margin:0
10px;text-decoration:
none;}
/style
script
var
data=['Iphone','Ipad','笔记本','相机','谢谢参与','充值卡','购物券'],
timer=null,//定时器
flag=0;//阻止多次回车
window.onload=function(){
var
play=document.getElementById('play'),
stop=document.getElementById('stop');
//
开始抽奖
play.onclick=playFun;
stop.onclick=stopFun;
//
键盘事件
document.onkeyup=function(event){
event
=
event
||
window.event;
//
回车键的code值：13
if(event.keyCode==13){
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
function
playFun(){
var
title=document.getElementById('title');
var
play=document.getElementById('play');
clearInterval(timer);
timer=setInterval(function(){
var
random=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},60);
play.style.background='#999';
}
function
stopFun(){
clearInterval(timer);
var
play=document.getElementById('play');
play.style.background='#FEF097';
}
}
/script
/head
body
div
class="box"
div
class="title"
id="title"淘家趣抽奖/div
div
class="btm"
a
href="javascript:;"
id="play"开始/a
a
href="javascript:;"
id="stop"停止/a
/div
/div
/body
/html
注意点：
1.随机数，取数组的其中一个；取0-n之间：Math.random()*(n+1)
2.定时器，开始抽奖时要停止前面的一次抽奖，不然会定时器重叠
3.按键操作，要判断是抽奖进行中，还是未开始，所有设置了变量
flag
想要学习更多关于javascript抽奖功能，请参考此专题：javascript实现抽奖功能
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
js Canvas实现的日历时钟案例有哪些
一、.获取上下文对象
var cxt = document.getElementById(‘元素名’).getContect(‘2d’);
IE8或更早的浏览器不支持元素。
二、 drawClock() – 实现画时钟
1. clearRect() 清空给定矩形内的指定像素。
context.clearRect(x,y,width,height);
属性 | 值
-----|------------
x,y | 要清除的矩形左上角点的(x,y)坐标
width,height| 要清除的矩形宽度和高度，单位为像素12345
2.new Date() — 得到系统时间
var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); 123
3.画时钟的形状
cxt.beginPath(); cxt.lineWidth = 10; cxt.strokeStyle = "blue"; cxt.arc(550, 310, 300, 0, 360, false); cxt.closePath(); cxt.stroke(); 123456
beginPath()的作用是canvas的绘制方法，都会以上一次beginPath之后的所有路径为基础进行绘制。
closepath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到七、起点，让整个路径闭合起来。
cxt.lineWidth() ： 画笔的宽度
cxt.strokeStyle() : 设置或返回用于笔触的颜色、渐变或模式。
属性值：color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于创建 pattern 笔触的 pattern 对象
stroke ()绘制已定义的路径
arc() 方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数
描述
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
4）drawScale — 自定义函数画刻度
function drawScale(size, width, color, value, startx, starty, endx, endy){
for(var i = 0; i size; i++){
drawPointer(width, color, value, i, startx, starty, endx, endy);
} } 12345
5. 画时钟刻度依托点
function drawPointer(width, color, value, angle, startx, starty, endx, endy){
cxt.save(); //先保存当前画布
cxt.lineWidth = width; //设置画笔的宽度
cxt.strokeStyle = color; //设置画笔的颜色
cxt.translate(550, 310); //重置异次元空间的原点坐标
cxt.rotate(value * angle * Math.PI / 180); //设置旋转的角度，参数是弧度
cxt.beginPath();
cxt.moveTo(startx, starty);
cxt.lineTo(endx, endy);
cxt.closePath(); //先闭合路径，再画线
cxt.stroke(); //开始画线
cxt.restore(); //将旋转后的线段返回给画布 } 12345678910111213
translate() 方法重新映射画布上的 (0,0) 位置。
-
JS代码如下：
//获取上下文文档对象 var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');
//画指针 function drawPointer(width, color, value, angle, startx, starty, endx, endy){
cxt.save(); //先保存当前画布
cxt.lineWidth = width; //设置画笔的宽度
cxt.strokeStyle = color; //设置画笔的颜色
cxt.translate(550, 310); //重置异次元空间的原点坐标
cxt.rotate(value * angle * Math.PI / 180); //设置旋转的角度，参数是弧度
cxt.beginPath();
cxt.moveTo(startx, starty);
cxt.lineTo(endx, endy);
cxt.closePath(); //先闭合路径，再画线
cxt.stroke(); //开始画线
cxt.restore(); //将旋转后的线段返回给画布 }
//画刻度 function drawScale(size, width, color, value, startx, starty, endx, endy){
for(var i = 0; i size; i++){
drawPointer(width, color, value, i, startx, starty, endx, endy);
}
}
//为表盘的中心填充颜色 function drawFill(){
cxt.save();
cxt.beginPath();
cxt.arc(550, 310, 7, 0, 360, false);
cxt.closePath();
cxt.fillStyle = "red";
cxt.fill();
cxt.restore();
}
//画时钟 function drawClock(){
cxt.clearRect(0, 0, 1350, 620); //清空整个画布
var now = new Date(); //获取系统时间，取出时,分,秒
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
min += sec / 60;
hour += min / 60;
if(hour 12) hour -= 12;
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle = "blue";
cxt.arc(550, 310, 300, 0, 360, false);
cxt.closePath();
cxt.stroke();
drawScale(12, 7, "pink", 30, 0, -280, 0, -260); //画时刻度
drawScale(60, 5, "pink", 6, 0, -280, 0, -270); //画分刻度
drawPointer(7, "purple", hour, 30, 0, 12, 0, -210); //画时针
drawPointer(5, "yellow", min, 6, 0, 15, 0, -240); //画分针
drawPointer(4, "red", sec, 6, 0, 17, 0, -250); //画秒针
//细化秒针,为秒针加箭头
drawPointer(3, "red", sec, 6, -7, -235, 0, -255);
drawPointer(3, "red", sec, 6, 7, -235, 0, -255);
drawFill();
}
drawClock();
setInterval(drawClock, 1000); //setInterval()方法中表示每隔1000ms，就执行drawClock一次 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
JS基于for语句编写的九九乘法表示例
本文实例讲述了JS基于for语句编写的九九乘法表。分享给大家供大家参考，具体如下：
js的功能非常强大,那么现在我们就用js里面的for循环来输出一个原汁原味的九九乘法表;
先看运行效果：
核心代码如下：
script
type="text/javascript"
document.write('table
border="1"
bgcolor="#ccc"
width="80%"
cellpadding="0"
cellspacing="0"');
for(var
i=1;i=9;i++){
document.write('tr');
for(var
j=1;j=i;j++){
document.write('td'+i+'x'+j+'='+(i*j)+'/td');
}
document.write('/tr');
}
document.write('/table');
/script
大家可以试着去走一下循环,我们把九九乘法表的两个乘数设为两个变量,分别是i和j;
当i=1时满足for循环的条件,执行循环语句,先输出一个tr(table标签里面的行属性),然后执行tr里面的另一个for循环;
令j=1,j=i,此时的i=1,符合循环条件,执行循环语句,输出1*1=1;j++之后j的值就变成了2;我们再来看j=i,就是2=1是错误的,因此终止循环;
我们第一遍循环就输出了一行,行里面的内容是1*1=1;那我们在用i++令i=2执行循环,同样根据上面的来走循环;
知道i走到9再往下走到10不符合条件的时候,终止整个循环,我们就输出了一个原汁原味的九九乘法表;
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。