分类：Javascript

2020
10-30

JavaScript实现轮播图效果

要求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理图片播放的同时，下面小圆圈模块跟随一起变化点击小圆圈，可以播放相应图片鼠标不经过轮播图，轮播图也会自动播放图片鼠标经过，轮播图模块，自动播放停止代码实现：autoPlay.html（复制并保存为html文件，打开即可见效果）：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">... 继续阅读 >
2020
10-30

详解 javascript对象创建模式

创建模式在javascript中，主要有以下几种创建模式：工厂模式构造函数模式原型模式组合模式动态原型模式寄生构造函数模式稳妥构造模式工厂模式工厂模式是软件工程领域一种广为人知的设计模式。javascript实现方式：functioncreatePerson(name,obj,job){varo=newObject();o.name=name;o.obj=obj;o.job=job;o.sayName=function(){alert(this.name);}returno;}varperson1... 继续阅读 >
2020
10-30

Javascript文本框脚本实现方法解析

在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍然存在一些重要的区别。相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用rows和cols特性。其中，rows特性指定的是文本框的字符行数，而cols特性指定的是文本框的字符列数（类似于<inpu>元素的si... 继续阅读 >
2020
10-30

Javascript表单序列化原理及实现代码详解

随着Ajax的出现，表单序列化已经成为一种常见需求。在JavaScript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。​1.对表单字段的名称和值进行URL编码，使用和号（&）分隔。2.不发送禁用的表单字段。3.只发送勾选的复选框和单选按钮。4.不发送type为"reset"和"button"的按钮。5.多选选... 继续阅读 >
2020
10-30

Javascript数组及类数组相关原理详解

数组创建方式有两种1.vararr=[]2.vararr=newArray()如果只有一个参数会指定数组的长度，当一个参数时只能是整形，如下例子vararr=newArray(10)vararr=newArray(10.2)//会报错vararr=newArray(1,2,3)//arr=[1,2,3]数组常用方法改变原数组pushpopshiftunshiftsortreversesplice不改变原数组concatjoin--->splittoStringslice比如push函数，看一下例子vararr=[1,2,3]arr.push(4,5... 继续阅读 >
2020
10-28

JavaScript如何操作css

原本应该是由css进行控制html中的div的宽高和背景颜色，但是在下方使用了JavaScript进行重新调用了div盒子，并且覆盖了css原本的属性内容。需求目标:由100像素的粉色背景色的div盒子变成了300像素的橘黄色效果的div盒子代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equi... 继续阅读 >
2020
10-28

javascript实现多边形碰撞检测

javascript多边形碰撞检测原理就是循环每个顶点判断是不是在多边形内constapp=newPIXI.Application({antialias:true});document.body.appendChild(app.view);constgraphics=newPIXI.Graphics();//drawpolygonconstpath=[600,370,700,460,780,420,730,570,590,520];graphics.lineStyle(0);graphics.beginFill(0x3500FA,1);graphics.drawPolygon(path);graphics.endFill();app.stage.addChild(graphics);... 继续阅读 >
2020
10-23

Javascript柯里化实现原理及作用解析

函数式编程是一种如今比较流行的编程范式，它主张将函数作为参数进行传递，然后返回一个没有副作用的函数，说白了，就是希望一个函数只做一件事情。像JavaScript，Haskell，Clojure等编程语言都支持函数式编程。这种编程思想涵盖了三个重要的概念：纯函数柯里化高阶函数而这篇文章主要是想向大家讲清楚柯里化这个概念。什么是柯里化首先我们先来看一个例子：functionsum(a,b,c){returna+b+c;}//调用sum(1,2,3);... 继续阅读 >
2020
10-23

Javascript Symbol原理及使用方法解析

Symbol是ES6中新引入的一种基本数据类型，在此之前JavaScript中已有几种基本数据类型：NumbergStringBooleanNullUndefinedObject不同于其他基本类型的通俗易懂，Symbol是什么和有什么用一直有些让人困惑。什么是SymbolJavaScript标准中规定对象的key只能是String或Symbol类型，区别在于String类型的key可以重复而Symbol类型的key是唯一的。Symbol的本质是表示一个唯一标识。每次创建一个Symbol，它所代表的... 继续阅读 >
2020
10-21

详解JavaScript类型判断的四种方法

JavaScript有八种内置类型，除对象外，其他统称为“基本类型”。空值（null)未定义(undefined)布尔值（boolean)数字（number)字符串（string)对象(object)符号（symbol,ES6中新增)大整数（BigInt,ES2020引入）Symbol：是ES6中引入的一种原始数据类型，表示独一无二的值。BigInt：是ES2020引入的一种新的数据类型，用来解决JavaScript中数字只能到53个二进制位（JavaScript所有数字都保存成64位浮点数... 继续阅读 >
2020
10-20

构建一个JavaScript插件系统

本文译自https://css-tricks.com/designing-a-javascript-plugin-system/插件是库和框架的常见功能，并且有一个很好的使用它的理由：它们允许开发人员以安全，可扩展的方式添加功能。这就使核心项目更具价值，这种开放形势可以帮助项目建立社区，并且不会为我们增加额外的维护负担。本文就使用JavaScript来构建一个我们自己的插件系统。这里我使用的是“pluginn”一词，但这些东西有时也称为其他名称，例如“extensions”，“... 继续阅读 >
2020
10-20

基于JavaScript实现简单抽奖功能代码实例

基于JavaScript实现简单抽奖功能代码实例 为什么会做这个东西呢，纯属好玩，闲的其实是在上次班会的时候想到的，班会的时候叫人回答问题，没人回答当时就想，我如果抽签抽到你了，你还是不回答吗？？好吧，一切都是扯淡先来看看页面效果吧：点击抽取就可以抽签了，红色框会显示内容，（PS：红色框是没有的，仅仅做描述）抽取到的效果图如下，字体会随机滚动，最后停止：里面的抽取内容完全可以替换，，，，下面贴上代码：<!DOCTYPEhtml><htmllang="zh"><head><metacha... 继续阅读 >
2020
10-18

JavaScript中EventBus实现对象之间通信

 一、什么是EventBus?我个人理解：EventBus可以实现对象之间的通信，当数据或某些特性发生改变时，能自动监听事件作出一些改变。还有更多的内容可能我还没有拓宽。怎么实现通信呢？这里通过一个例子可以理解到其中的精髓。二、一个简单的例子add(){data+=1;render(data);},minus(){data-=1;render(data);},multiply(){data*=2;render(data);},divide(){data/=2;render(data);},以上代码是进行加减乘除的... 继续阅读 >
2020
10-18

详解如何在Javascript中使用Object.freeze()

Object.freeze()Object.freeze()方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze()返回和传入的参数相同的对象用法constobjectExample={prop1:20,prop2:"羊先生"};//默认情况下，我们可以根据需要修改对... 继续阅读 >
2020
10-16

如何手动实现一个 JavaScript 模块执行器

如果给你下面这样一个代码片段(动态获取的代码字符串)，让你在前端动态引入这个模块并执行里面的函数，你会如何处理呢?module.exports={name:'ConardLi',action:function(){console.log(this.name);}};node环境的执行如果在node环境，我们可能会很快的想到使用Module模块，Module模块中有一个私有函数_compile，可以动态的加载一个模块：exportfunctiongetRuleFromString(code){constmyModule... 继续阅读 >
2020
10-16

JavaScript通如何过RGraph实现动态仪表盘

目前针对于统计图的制作方法有很多，可以直接利用快逸报表中的自带统计图，还可以通过自定义统计图个性化定制，当然除此之外，在新的HTML5标准中，新增了一个非常重要的元素—canvas元素。使用该元素，可以在页面中直接进行各种复杂图形的制作。因此，如果使用该元素绘制统计图，比之前使用服务器端控件来生成统计图的方法更加具有优越性，因为使用了该元素之后，绘制统计图的工作是直接在客户端进行的，而不再是在服务器端所完成... 继续阅读 >