javascript技巧

Javascript类型判断相关例题及解析

2020-08-26
题目: 请在index.html文件中,编写arraysSimilar函数,实现判断传入的两个数组是否相似.具体需求: 1. 数组中的成员类型相同,顺序可以不同.例如[1, true] 与 [false, 2]是相似的. 2. 数组的长度一致. 3. 类型的判断范围,需要区分:String, Boolean, Number, undefined, null, 函数,日期, window. 当以上全部满足,则返回"判定结果:通过",否则返回"判定结果:不通过". 一.

Javascript如何实现扩充基本类型

2020-08-26
可以通过给Function.prototype增加方法来使得该方法对所有函数可用. 通过给Function.prototype增加一个method方法,下次给对象增加方法的时候就不必键入prototype这几个字符了. Function.prototype.method=function(name,func){ this.prototype[name]=func; return this; } 一.JavaScript增加整数类型 JavaScript没有专门的整数类型,但有时候确实只需要提前数

VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)

2020-08-25
如何设置一个自定义注释 整洁的代码和注释风格总是给人一种眼前一亮.赏心悦目的感觉,同时详细的注释也是程序员所必须的职业素养之一 今天主要分享一下如何在VS Code中设置自定义 注释 第一步: 使用ctrl + shift + p 调出如下窗口,并且输入snippets 第二步:进入json文件编辑 这里以自定义js注释为例: 进入到 json 文件中后,添加如下代码,大家可以自定义设计,保存退出 我这里是一个类注释 一个方法注释 "Print to js class": { &quo

Javascript var变量删除原理及实现

2020-08-25
var有三种声明的情形: var声明的全局变量 var在函数范围内声明的局部变量 eval中声明的全局变量. 首先, 1.2种情形var声明的变量是无法删除的. 尽管var声明的全局变量是属于window对象的属性(在浏览器中),但依然是无法删除的,因为这种属性的configurable=false,因此不能delete掉. 局部变量就更不用说了,连var变量依附的对象都不知道在哪里,肯定无法删除. 而eval('vara=1')看似和直接var是一样的效果(当然是在全局作用执行eval),执行

js实现飞机大战游戏

2020-08-25
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo

js实现QQ邮箱邮件拖拽删除功能

2020-08-25
本文实例为大家分享了js实现QQ邮箱邮件拖拽删除的具体代码,供大家参考,具体内容如下 步骤分析: 根据数据结构生成HTML结构 全选和单选功能的实现,以及当其为选中状态时它的父级的颜色变化的 点击删除,删除结构同时删除数据 给每一个li绑定mousedown,tip显示,并且定位在鼠标位置 鼠标移动时,tip跟随,取消默认行为 碰撞检测是否拖到"已删除"项 鼠标松开.删除结构和数据 过程实现 HTML代码 <body> <div class="wrap&qu

React实现轮播效果

2020-08-25
本文实例为大家分享了React实现轮播,供大家参考,具体内容如下 思路 1.使用全局的state进行状态管理 2.设置全局下标,对当前的图片下表进行样式划分 3.定时循环人物便利改变全局下标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

js实现前端界面导航栏下拉列表

2020-08-25
本文实例为大家分享了js实现前端界面导航栏下拉列表的具体代码,供大家参考,具体内容如下 先来看成果图 html代码: <nav> <ul class="nav"> <li class="dropDowm"> <a href="javascript:;" class="dropdown-toggle"> 列表一 </a> <ul class="dropd

基于JS实现快速读取TXT文件

2020-08-24
1 前言 最近有个需求,需要使用JS快速读取外部大数据文件(60w条记录的表).笔者尝试过使用JS读取Excel文件,但是跑了十几分钟仍未出结果,后来笔者尝试将原数据保存为TXT文件,再从TXT文件中读取数据,只需几秒钟即可读取完毕.在此分享一下,也留着以后备用. 2 案例 为方便快速理解,笔者挑选了一个数据量小.业务逻辑简单的案例:从TXT文件中读取数据,并按照原列表格式显示. 工作空间 待读取的TXT文件数据 read.html <!DOCTYPE html> <html> &

js实现飞机大战小游戏

2020-08-24
本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/

js利用拖放实现添加删除

2020-08-24
本文实例为大家分享了js利用拖放实现添加删除的具体代码,供大家参考,具体内容如下 实现的效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>通过拖放实现添加删除</title> <styl

浅谈JavaScript节流和防抖函数

2020-08-24
概念 节流函数 间隔固定的时间执行传入的方法 目的是防止函数执行的频率过快,影响性能.常见于跟滚动,鼠标移动事件绑定的功能. 防抖函数 对于接触过硬件的人也许更好理解,硬件按钮按下时,由于用户按住时间的长短不一,会多次触发电流的波动,加一个防抖函数就会只触发一次,防止了无意义的电流波动引起的问题. 按键防反跳(Debounce)为什么要去抖动呢?机械按键在按下时,并非按下就接触的很好,尤其是有簧片的机械开关,会在接触的瞬间反复的开合多次,直到开关状态完全改变. 应用在前端时,常见的场景是,输入框

JS面向对象实现飞机大战

2020-08-24
本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma

JS实现拖动模糊框特效

2020-08-24
本文实例为大家分享了JS实现拖动模糊框特效的具体代码,供大家参考,具体内容如下 需求: 在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下角文字时,文字隐藏. 技术: 监听器,鼠标坐标获取 效果图 源码分享: HTML <h1>Image Comparison Slider</h1> <nav> <!--底层图--> <img src="img/img-original.jpg" alt=""> &l

js 函数性能比较方法

2020-08-24
在学习js过程中,经常会遇到同样一个功能点 这样实现也可以,那样实现也可以.但是哪个方式最优呢?自己写了一个简短的proferencesCompare 函数.代码如下: /** * 函数性能比较 * @param fns 要比较的函数数组 * @args 每个要比较函数在执行的时候传入的参数,可以是数组,或者 被调用后 返回数组类型 * @repeatCount 每个函数重复执行的次数,多次执行 拉开差距.默认值10000 * * @return [{runTime:执行repeatCount次

JavaScript实现简单验证码

2020-08-23
JavaScript实现简单验证码,供大家参考,具体内容如下 验证流程图 HTML部分 ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo

JavaScript实现矩形块大小任意缩放

2020-08-23
最近写了一个原生JavaScript实现矩形块大小任意缩放的案例,感觉里面的东西比较的绕,,里分享源码给大家,一起学习一下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.

JS轮播图的实现方法2

2020-08-23
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: ![轮播图] 思路: 将所有需要轮播的图片横向排列,可视区大小设置为只能显示一张图片,给容器设置移出隐藏后,可视区之外的部分被隐藏,这样我们就只能看见一张图片. 轮播实现是改变整个图片画幅的left值或者margin-left 值,当点击时移动整个画幅单个图片的宽度即可实现滚动到下一张. 后面功能实现顺序依旧是写法一里的思路. 戳!写法一地址

一文秒懂JavaScript构造函数、实例、原型对象以及原型链

2020-08-23
1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age

微信小程序换肤功能实现代码(思路详解)

2020-08-23
在手机.电脑使用频率如此高的当下,应用可以更换皮肤,以提升美观性,并减轻屏幕对眼睛的刺激,无疑对用户体验有很大的帮助 实现功能 要实现如上更换皮肤的效果,有几个思路: 1.准备皮肤相关的wxss,引入到app.wxss中,方便每个页面使用: 2.设置皮肤时,动态改变wxml中元素的类名或id,使页面应用对应的皮肤: 3.将选中皮肤的值保存在小程序本地缓存中,保证其他页面及下一次打开小程序时,页面展示正确的皮肤: 下面介绍一些实现的细节 wxml <view class="page"