js实现实例例子,js基础案例

发布时间:2022-11-24

本文目录一览:

  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;
}
// 计算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>

注意点:

  1. 随机数,取数组的其中一个;取0-n之间:Math.random()*(n+1)
  2. 定时器,开始抽奖时要停止前面的一次抽奖,不然会定时器重叠
  3. 按键操作,要判断是抽奖进行中,还是未开始,所以设置了变量 flag 想要学习更多关于javascript抽奖功能,请参考此专题:javascript实现抽奖功能 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

js Canvas实现的日历时钟案例有哪些

一、获取上下文对象

var cxt = document.getElementById('元素名').getContext('2d');

IE8或更早的浏览器不支持元素。 二、drawClock() – 实现画时钟

  1. clearRect() 清空给定矩形内的指定像素。
context.clearRect(x, y, width, height);
属性
x, y 要清除的矩形左上角点的(x,y)坐标
width, height 要清除的矩形宽度和高度,单位为像素
  1. new Date() — 得到系统时间
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
  1. 画时钟的形状
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。
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
参数 描述
x 圆的中心的 x 坐标
y 圆的中心的 y 坐标
r 圆的半径
sAngle 起始角,以弧度计(弧的圆形的三点钟位置是 0 度)
eAngle 结束角,以弧度计
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针
  1. 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);
    }
}
  1. 画时钟刻度依托点
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程序设计有所帮助。