分类：JavaScript

2020
10-08

JavaScript eval()函数定义及使用方法详解

定义和用法eval()函数可计算某个字符串，并执行其中的的JavaScript代码。语法eval(string)返回值通过计算string得到的值（如果有的话）。说明该方法只接受原始字符串作为参数，如果string参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为eval()函数传递String对象来作为参数。如果试图覆盖eval属性或把eval()方法赋予另一个属性，并通过该属性调用它，则ECMAScript实现允许抛出一个EvalError... 继续阅读 >
2020
10-08

JavaScript实现像雪花一样的Hexaflake分形

    编写如下的函数：functiondrawHexagon(x,y,L){ctx.beginPath();ctx.moveTo(x-sqrt3/2*L,y-L/2);ctx.lineTo(x-sqrt3/2*L,y+L/2);ctx.lineTo(x,y+L);ctx.lineTo(x+sqrt3/2*L,y+L/2);ctx.lineTo(x+sqrt3/2*L,y-L/2);ctx.lineTo(x,y-L);ctx.closePath();ctx.fillStyle="#00FFFF";ctx.fill();}     函数中sqrt3的值为Math.sqrt(3... 继续阅读 >
2020
10-08

基于javascript处理nginx请求过程详解

nginx是一个HTTP和反向代理服务器，目前很多网站都在使用nginx作为反向代理服务器。njs是JavaScript语言的一个子集，它允许扩展nginx的功能，这点跟lua有点类似，不过采用的语言是javascript。1.安装nginx要使用njs，需要安装一个nginx，这里的我使用的环境是Ubuntu18.04.4。首先从http://nginx.org/en/download.html下载最新的stableversion的nginx源码。a.解压源码sudotarzxvfnginx-1.18.0.tar.gzb.安装必要依赖库sudoap... 继续阅读 >
2020
10-08

实例讲解JavaScript 计时事件

JavaScript计时事件通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。在JavaScritp中使用计时事件是很容易的，两个关键方法是:setInterval()-间隔指定的毫秒数不停地执行指定的代码。setTimeout()-在指定的毫秒数后执行指定代码。注意:setInterval()和setTimeout()是HTMLDOMWindow对象的两个方法。setInterval()方法setInterval(... 继续阅读 >
2020
10-08

JavaScript中数组去重的5种方法

正常情况下，数据去重的工作一般都是由后端同事来完成的，但是前端也要掌握好处理数据的能力，万一去重的工作交给我们大前端处理，我们也不能怂呀。现在我总结了一些去重的方法，希望对大家有点帮助。方法一：newSet()实现数组去重ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。Set函数可以接受一个数组，用于初始化。根据Set的数据特性，... 继续阅读 >
2020
10-08

JavaScript DOM常用操作代码汇总

1.理解DOM：DOM（DocumentObjectModel，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。怎么说，我从两个角度理解：对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。所以说，有了DOM，在我看来就是相当于JavaScript拿到了钥匙一样可以去操作Html的每一个节点，触... 继续阅读 >
2020
10-08

JavaScript缺少insertAfter解决方案

JavaScript缺少insertAfter解决方案 在现有的方法后插入一个新元素，你可能会想：既然有insertBefore方法，是不是也有一个相应的insertAfter()方法。很可惜，DOM没有提供方法。下面编写insertAfter函数，虽然DOM本身没有提供，但它确实提供了一个把一个节点插入到另一个节点之后所有工具。我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body>在现有的方... 继续阅读 >
2020
10-08

JavaScript如何判断对象有某属性

判断对象中是否有某属性的常见方式总结，不同的场景要使用不同的方式。一、点(.)或者方括号([])通过点或者方括号可以获取对象的属性值，如果对象上不存在该属性，则会返回undefined。当然，这里的“不存在”指的是对象自身和原型链上都不存在，如果原型链有该属性，则会返回原型链上的属性值。//创建对象lettest={name:'lei'}//获取对象的自身的属性test.name//"lei"test["name"]//"lei"//获取不存... 继续阅读 >
2020
10-08

JavaScript图片旋转效果实现方法详解

JavaScript图片旋转效果实现方法详解 在CanvasAPI中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：voidrotate(infloatangle);//按给定的弧度顺时针旋转anglerotate（）方法旋转的中心始终是canvas的原点。如果要改变旋转中心，需要使用translate方法。我们可以将绘制的图形每隔一定的时间间隔后，旋转一定的角度重新绘制一次，这样就可以得到旋转的动画效果。1．旋转的扇叶将一个梯形按顺时针旋转90°的方式绘制4次，可以绘制出一个扇叶... 继续阅读 >
2020
10-08

JavaScript实现Tab标签页切换的最简便方式(4种)

JavaScript实现Tab标签页切换的最简便方式(4种) 先说一下最土的一种方法：Html:<divclass="tab-head"><h2id="tab1"onmouseover="changeTab1()"class="selected">1</h2><h2id="tab2"onmouseover="changeTab2()">2</h2><h2id="tab3"onmouseover="changeTab3()">3</h2></div><divclass="tab-content"><divid="c1"class="show">content1</div><divid="c2">content2</div><divid="c3">content3</div></div>CSS:h2{... 继续阅读 >
2020
10-08

JavaScript图像放大镜效果实现方法详解

JavaScript图像放大镜效果实现方法详解 1.基本四瓣花型图案根据四瓣花卉线的参数方程：t=r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2);x=t*cos(θ));y=t*sin(θ));编写如下的HTML文件。<!DOCTYPEhtml><head><title>基本的四瓣花型图案</title><scripttype="text/javascript">functiondraw(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;varcontext=canvas.getContext('2d');context.fillStyle="#EEEEFF"... 继续阅读 >
2020
10-08

JavaScript如何使用插值实现图像渐变

JavaScript如何使用插值实现图像渐变 描述由一个图形变化为另一个图形过程中的各个中间图形，称为渐变图形。可以利用插值算法求得各个渐变图形。设在源图形和目标图形上各取M个对应坐标点，并分别保存到数组中，源图形用数组SX[M]和SY[M]保存M个坐标点（sx，sy），目标图形用数组DX[M]和DY[M]保存M个坐标点（dx，dy）。若需生成源图形变换到目标图形中的N-1个渐变图形，采用简单的线性插值可以编写如下的二重循环：for(k=1;k<N;k++)for(i=0;i<M;i++){... 继续阅读 >
2020
10-08

JavaScript多种图形实现代码实例

JavaScript多种图形实现代码实例 1．小星星设有如下的曲线参数方程：N=5x=r*sin(nθ)*cos(θ)y=r*sin(nθ)*sin(θ)（0≤θ≤2π）用循环依次取θ值为0~2π（每次增量为π/64），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个一个5瓣花卉图案。编写如下的HTML代码。<!DOCTYPEhtml><head><title>小星星</title><scripttype="text/javascript">functiondraw(id){varcanvas=document.getElementById(id);if(canvas==null)r... 继续阅读 >
2020
10-08

深入分析JavaScript 事件循环(Event Loop)

事件循环（EventLoop），是每个JS开发者都会接触到的概念，但是刚接触时可能会存在各种疑惑。众所周知，JS是单线程的，即同一时间只能运行一个任务。一般情况下这不会引发问题，但是如果我们有一个耗时较多的任务，我们必须等该任务执行完毕才能进入下一个任务，然而等待的这段时间常常让我们无法忍受，因为我们这段时间什么都不能做，包括页面也是锁死状态。好在，时代在进步，浏览器向我们提供了JS引擎不具备的特性：WebAPI。W... 继续阅读 >
2020
10-08

详解JavaScript中的Object.is()与"==="运算符总结

三重相等运算符===严格检查2个值是否相同：1===1;//=>true1==='1';//=>false1===true;//=>false但是，ES2015规范引入了Object.is()，其行为与严格的相等运算符几乎相同：Object.is(1,1);//=>trueObject.is(1,'1');//=>falseObject.is(1,true);//=>false主要问题是：什么时候使用Object.is()代替严格的相等性检查？让我们找出答案。1.严格相等检查操作符首先，让我们快速回顾一下严格的相等运算... 继续阅读 >
2020
10-08

两行Javascript代码生成UUID的方法

GUID全称为全局唯一标识符，也称作UUID，GUID是一种由算法生成的二进制长度为128位的数字标识符。GUID的格式为“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”，其中的x是0-9或a-f范围内的一个32位十六进制数。GUID的总数达到了2^128（3.4×10^38）个，所以随机生成两个相同GUID的可能性非常小，但并不为0。发现一个简单的方法，可以在不依赖第三方库的情况下，在Javascript应用程序中生成UUID。functionuuid(){vartemp... 继续阅读 >