本文目录一览：
- JavaScript实现计算多边形质心的方法示例
- JS基于面向对象实现的拖拽库实例
- js实现可键盘控制的简单抽奖程序
- js Canvas实现的日历时钟案例有哪些
- 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;
}
// 计算polygon的质心
function getPolygonAreaCenter(points) {
var sum_x = 0;
var sum_y = 0;
var sum_area = 0;
var p1 = points[1];
for (var i = 2; i < points.length; i++) {
var p2 = points[i];
var 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() : (event.returnValue = false);
this.handle.setCapture ? this.handle.setCapture() : null;
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 < 0 ? iTop = 0 : iLeft < 0 ? iLeft = 0 : iTop > this.maxTop ? iTop = this.maxTop : iLeft > this.maxLeft ? iLeft = this.maxLeft : null);
this.lockY || (this.drag.style.top = iTop + "px");
this.lockX || (this.drag.style.left = iLeft + "px");
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
this.onMove();
},
stopDrag: function() {
this.removeHandler(document, "mousemove", this._moveDrag);
this.removeHandler(document, "mouseup", this._stopDrag);
this.handle.releaseCapture ? this.handle.releaseCapture() : null;
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>
注意点：
- 随机数，取数组的其中一个；取0-n之间：
Math.random()*(n+1) - 定时器，开始抽奖时要停止前面的一次抽奖，不然会定时器重叠
- 按键操作，要判断是抽奖进行中，还是未开始，所以设置了变量
flag想要学习更多关于javascript抽奖功能，请参考此专题：javascript实现抽奖功能 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
js Canvas实现的日历时钟案例有哪些
一、获取上下文对象
var cxt = document.getElementById('元素名').getContext('2d');
IE8或更早的浏览器不支持元素。
二、drawClock() – 实现画时钟
clearRect()清空给定矩形内的指定像素。
context.clearRect(x, y, width, height);
| 属性 | 值 |
|---|---|
| x, y | 要清除的矩形左上角点的(x,y)坐标 |
| width, height | 要清除的矩形宽度和高度，单位为像素 |
new Date()— 得到系统时间
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
- 画时钟的形状
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle = "blue";
cxt.arc(550, 310, 300, 0, 360, false);
cxt.closePath();
cxt.stroke();
beginPath()的作用是canvas的绘制方法，都会以上一次beginPath()之后的所有路径为基础进行绘制。
closePath()是关闭路径，而不是结束路径，它会试图从当前路径的终点连一条路径到起点，让整个路径闭合起来。
cxt.lineWidth()：画笔的宽度
cxt.strokeStyle()：设置或返回用于笔触的颜色、渐变或模式。
- 属性值：
- color：指示绘图笔触颜色的 CSS 颜色值。默认值是
#000000。 - gradient：用于填充绘图的渐变对象（线性或放射性）
- pattern：用于创建 pattern 笔触的 pattern 对象
stroke()绘制已定义的路径arc()方法创建弧/曲线（用于创建圆或部分圆）。如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
- color：指示绘图笔触颜色的 CSS 颜色值。默认值是
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标 |
| y | 圆的中心的 y 坐标 |
| r | 圆的半径 |
| sAngle | 起始角，以弧度计（弧的圆形的三点钟位置是 0 度） |
| eAngle | 结束角，以弧度计 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针 |
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);
}
}
- 画时钟刻度依托点
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(); // 将旋转后的线段返回给画布
}
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); // 每隔1000ms执行一次drawClock
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，符合循环条件，执行循环语句，输出11=1；j++之后j的值就变成了2；我们再来看j=i，就是2=1是错误的，因此终止循环； 我们第一遍循环就输出了一行，行里面的内容是11=1；那我们在用i++令i=2执行循环，同样根据上面的来走循环； 知道i走到9再往下走到10不符合条件的时候，终止整个循环，我们就输出了一个原汁原味的九九乘法表； 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》 希望本文所述对大家JavaScript程序设计有所帮助。
