分类：Js

2020
09-29

JavaScript 实现自己的安卓手机自动化工具脚本(推荐)

一个神奇的APP这个软件叫做Auto.js，只支持安卓，是一个不需要Root权限的JavaScript自动化软件。什么意思呢，就是在你的安卓手机上安装这个APP，然后通过编写JS脚本的方式实现自动化操作。类似的也有其他的一些软件，比如苹果自带的快捷操作，可以通过自定义配置完成一系列的流程，但是由于其目标是所有人都可以使用，所以定制的时候就没有那么灵活。而Auto.js通过写代码的方式定制，那不用多说，灵活性肯定是没的说，... 继续阅读 >

2020
09-29

JS如何实现手机端输入验证码效果

之前在“掘金”上看到这样一个demo我觉得很有意思，于是今天把它搬下来，记在自己的“小本本”里也许会对以后的项目有点用，若要自己去实现这样一个案例也能实现，但是可能没有那么“妙”。想法：1、使用label标签做显示验证码的框，2、然后每个labelfor属性指向同一个id为vcode的input，3、为了能够触发input焦点，将input改透明度样式隐藏，4、这样就实现了点击label触发input焦点，调用键盘。运行效果：示例代码：结构... 继续阅读 >

2020
09-29

基于JS实现视频上传显示进度条

示例代码：css部分：#content{border:1pxsolidsaddlebrown;padding:16px;border-radius:2px}.list{top:15px;width:140px;height:40px;border:1pxsolid#0082E6;display:inline-block;border-radius:2px;position:relative;line-height:40px;}#file{position:absolute;opacity:0;color:white;width:100%;height:100%;z-index:100;}.listspan{display:inline-block;text-align:center;w... 继续阅读 >

2020
09-28

JS实现单张或多张图片持续无缝滚动的示例代码

背景：想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动... 继续阅读 >

2020
09-28

js中!和!!的区别与用法

js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，1、！可将变量转换成boolean类型，null、undefined和空字符串取反都为false，其余都为true。!null=true!undefined=true!''=true!100=false!'abc'=false2、！！常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码：判断变量a为非空，未定义或者非空串才能执行方法体的内容vara;if(... 继续阅读 >

2020
09-28

ES6标准 Arrow Function（箭头函数=>）

ES6—箭头函数0.为什么会出现箭头函数？1.传统的javascript函数语法并没有提供任何的灵活性，每一次你需要定义一个函数时，你都必须输入function(){},这至少会出现两个问题，ES6箭头函数都圆满解决了它，第一个问题：代码输入快了容易输错成funciton或者functoin或者其它，但是=>这个玩意你要是再写错就只能说有点过分了。第二个问题：节省大量代码，我们先不用管下面的ES6代码为什么这样的语法能实现同样的功能，我们就直观的... 继续阅读 >

2020
09-28

JS 获取文件后缀，判断文件类型(比如是否为图片格式)

1、获取文件后缀有时候我们需要通过文件名或者路径，得到该文件的后缀名（扩展名），可以通过如下方式进行截取：//文件路径varfilePath="file://upload/jb51.png";//获取最后一个.的位置varindex=filePath.lastIndexOf(".");//获取后缀varext=filePath.substr(index+1);//输出结果console.log(ext);效果图如下：2、文件类型判断我们得到文件后缀名后，根据后缀即可判断文件的类型（文件格式）。比如我们需要判断一个文件是... 继续阅读 >

2020
09-28

JS原形与原型链深入详解

本文实例讲述了JS原形与原型链。分享给大家供大家参考，具体如下：前言在JS中，我们经常会遇到原型。字面上的意思会让我们认为，是某个对象的原型，可用来继承。但是其实这样的理解是片面的，下面通过本文来了解原型与原型链的细节，再顺便谈谈继承的几种方式。原型在讲到原型之前，我们先来回顾一下JS中的对象。在JS中，万物皆对象，就像字符串、数值、布尔、数组等。ECMA-262把对象定义为：无序属性的集合，其属性可包含基本值、... 继续阅读 >

2020
09-28

JS数组的常用10种方法详解

数组在JavaScript中经常使用，如何对数组进行增删改非常重要，下面为数组的常用方法：在数组末尾插入元素arr.push(value)，在数组的末尾添加一个或多个元素，并返回数组的新长度。例如：letarr=[1,2,3,4,5]varlongth=arr.push(6,7);console.log(arr,longth);数组的arr的值变为arr[1,2,3,4,5,6,7];length接收返回的是修改后数组的长度7;删除数组末尾的元素arr.pop()删除索引值最大的元素,并返回被删除的元素。letarr=[1,2,3,4,5... 继续阅读 >

2020
09-28

如何实现js拖拽效果及原理解析

元素拖拽分成3个步骤：按下鼠标，移动鼠标，松开鼠标。拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置?鼠标在div中相对于左上角的位置）。然后松开鼠标时，删除移动事件和松开事件，元素完成拖拽。一开始先监听鼠标按下事件mousedown，事件触发执行mouseHandler函数；div.addEventListener(... 继续阅读 >

2020
09-28

JS图片预加载三种实现方法解析

预加载基本概念：当页面打开图片提前加载，并且缓存在用户本地，需要用到时直接进行渲染；在浏览图片较多的网页（百度图库，淘宝京东等），可以有更好的用户体验；一张图片的预加载varimg=newImage();img.addEventListener("load",loadHandler);img.src="./img/1.jpg";document.body.appendChild(img);console.log(img.width)；functionloadHandler(e){console.log(img.width);//当前图片的原始宽度... 继续阅读 >

2020
09-28

JS面试题中深拷贝的实现讲解

在面试中你是否遇到过如下场景：Q：小朋友，你是否了解如何拷贝一个对象？R：此时，机智的你可能会想到Object.assign({},obj);Q：那如何深拷贝一个对象呢？R：机智的你JSON.parse(JSON.stringify(obj));Q：使用stringify这种方式有何弊端？性能问题，stringify再解析其实需要耗费较多时间，特别是数据量大的时候。一些类型无法拷贝，例如函数(不输出)，正则(输出空对象)，时间对象(输出时间字符串)，Undefiend(不输出)遇到... 继续阅读 >

2020
09-28

JS 设计模式之：工厂模式定义与实现方法浅析

本文实例讲述了JS设计模式之：工厂模式定义与实现方法。分享给大家供大家参考，具体如下：前言上次我们介绍了单例模式，没看过的小伙伴可以看这个链接：浅析JS设计模式之：单例模式今天来说一说一种常见的设计模式：工厂模式。工厂模式是一种创建对象的创建型模式，遵循DRY（Don'tRepeatYourself）原则。在该模式下，代码将会根据具体的输入或其他既定规则，自行决定创建哪种类型的对象。简单点儿说就是，动态返回需要的实... 继续阅读 >

2020
09-28

JS 设计模式之：单例模式定义与实现方法浅析

本文实例讲述了JS设计模式之：单例模式定义与实现方法。分享给大家供大家参考，具体如下：良好的设计模式可以显著提高代码的可读性，降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式。今天先从最简单的一个入手：单例模式。文中的示例代码会使用ES6语法，尽量简化不必要的细节概念单例模式（Singleton）属于创建型的设计模式，它限制我们只能创建单一对象或者某个类的单一实例。通常情况下，... 继续阅读 >

2020
09-28

js代码实现轮播图

本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下又从头到尾把轮播图研究了一遍，感觉理解更深刻了。就怕自己搞不懂，分析了各个步骤的思路，为啥用，怎么用。总算搞清楚了。话不多说，干货奉上.效果图：//1，左右按钮初始隐藏鼠标进入box按钮显示鼠标离开box按钮隐藏//获取元素varbox=document.getElementById('box');varleftbtn=document.getElementById('leftbtn');varrigbtn=document.getE... 继续阅读 >

2020
09-28

原生js实现轮播图特效

轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：​ 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。​ 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。​ 3.图片播放的同时，下面小圆圈模块跟随一起变化。​ 4.点击小圆圈，可以播放相应图片。​ 5.鼠标不经过轮播图，轮播图也会自动播放图片。​ 6.鼠标经过，轮播图模块，... 继续阅读 >