经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 JavaScript
ES6的内置对象扩展实现示例

ES6的内置对象扩展实现示例

目录一、Array的扩展方法1.扩展运算符(展开语法)2、扩展运算符的应用1.合并数组2. 将伪数组转换为真正的数组3.构造函数方法:Array.from()4.实例方法 :find() 5.findIndex()6.includes() 一、Array的扩展方法 1.扩展运算符(展开...[2022/7/4]

2022发布ECMAScript新特性盘点

目录引言1. Top-level Await2. Object.hasOwn()3. at()4. error.cause5. 正则表达式匹配索引6. 类的实例成员(1)公共实例字段(2)私有实例字段、方法和访问器(3)静态公共字段(4)静态私有字段和方法(5)类静态初始化块 引言 2022 年...[2022/7/4]

JS实现简单拖动模态框案例

本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下 需要实现的效果: ①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮,模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析: 首先给上面...[2022/7/4]

js实现京东快递单号查询

本文实例为大家分享了js实现京东快递单号查询的具体代码,供大家参考,具体内容如下 1.实现效果: 当文本框中输入文字时,上面有一个放大文字的框中显示文本框内容。失去焦点时,放大文字的框消失,获得焦点时,放大文字的框显示。 2.案例分析 3.代码实现 <!DOC...[2022/7/4]

js实现模态框的拖拽效果

本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下 之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动。<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来。di...[2022/7/4]

JS实现拖动模态框案例

JS实现拖动模态框案例

本文实例为大家分享了JS实现拖动模态框的具体代码,供大家参考,具体内容如下 效果图: 需求分析: 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏。输入密码时可以明文查看或者隐藏。在表单的头部按下鼠标后可以拖拽表单。鼠标弹起拖拽结束。  话不多说,我们直接上代码: ...[2022/7/4]

用JS实现贪吃蛇游戏

本文实例为大家分享了JS实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 效果图: 完整代码如下: html: <!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta char...[2022/7/4]

js实现拖动模态框效果

本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下 1.实现效果: 点击链接,弹出模态框。点击关闭,关闭模态框。 点击标题部分,可以随意移动模态框的位置。 主要是获取鼠标位置。 2.思路: 3.代码: <!DOCTYPE h...[2022/7/4]

用js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下 1.实现功能: 2.实现思路: (1)鼠标放到图片上,显示箭头,用display来做。 (2)动态生成小圆圈。 (3)小圆圈的排他思想 (4)点击小圆圈滚动图片 设...[2022/7/4]

js实现淘宝固定侧边栏

本文实例为大家分享了js实现淘宝固定侧边栏的具体代码,供大家参考,具体内容如下 1.实现效果: 当页面运行到banner区域时,右边侧边栏改为固定定位,当页面运行到主体区域时,右边侧边栏显示返回到顶部。 2.思路: (1)给document加scroll事件。 (2)获取...[2022/7/4]

js仿京东放大镜

本文实例为大家分享了js仿京东放大镜的具体代码,供大家参考,具体内容如下 1.实现效果: 移动遮挡框,右边的图片响应的放大并移动。 2.实现思路: (1)鼠标移动到图片上,遮罩层和右边盒子显示。鼠标移出,遮罩层和右边盒子消失。 (2)黄色遮罩层跟随鼠标移动 (3...[2022/7/4]

使用clipboard.js库实现复制剪切功能

项目地址:https: github.com/zenorocha/clipboard.js 现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。 为什么使用它 复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 K...[2022/6/27]

JS中Object.assign方法的使用

最在做项目过程中,大量的使用了Object.a ign方法,发现这个还是挺好使用的,现在总结下Object.a ign的基本使用。 一、基本语法 Object.a ign(target, ...sources) 二、基本概念 Object.a ign方法用来将源对象(source)的所...[2022/6/21]

js中值类型和引用类型的区别介绍

1.JavaScript中的变量类型有哪些? (1)值类型(基本类型):字符串(string)、数值(number)、布尔值(boolean)、undefined、null  、symbol  (2)引用类型:对象(Object)、数组(Array)、函数(Fu...[2022/6/21]

基于JS实现动态跟随特效的示例代码

目录演示技术栈源码c 部分js部分 演示 技术栈 这次用到了关于c 的一些功能,和jQuery。 CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyfram...[2022/6/20]

js实现文字滚动的效果

本文实例为大家分享了js实现文字滚动的效果的具体代码,供大家参考,具体内容如下 在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果。该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它。相信大家都使用酷狗音乐或是网易云音乐进行音乐的搜索,听鉴,那...[2022/6/20]

js实现电子时钟功能

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和c 技能,同时需要有简单的javascript基础。 先准备一个html元素,用来放置时钟。新建一个div元素,它的id命名为clock,如下所示: &l...[2022/6/20]

js实现电子时钟效果

本文实例为大家分享了js实现电子时钟效果的具体代码,供大家参考,具体内容如下 代码区域 代码如下(示例): <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"...[2022/6/20]

原生js实现电子时钟

本文实例为大家分享了js实现电子时钟的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ...[2022/6/20]

JS实现电子时钟入门操作

本文实例为大家分享了JS实现电子时钟入门操作的具体代码,供大家参考,具体内容如下 代码呈上: <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ?...[2022/6/20]

js实现连连看游戏

本文实例为大家分享了js实现连连看游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8" /> ?? ??? ?<st...[2022/5/9]

Js中forEach修改原数组与sort排序经典场景详解

目录forEach() 介绍forEach() 能不能改变原数组?sort() 介绍如果在使用 sort() 方法时不带参,sort()方法:带参时,自定义排序规则sort 方法举例:将数组按里面某个字段从小到大排序总结 forEach() 介绍 forEach()方法需要一个回调函数(这种函数...[2022/5/9]

js+canvas实现飞机大战

本文实例为大家分享了js canvas实现飞机大战的具体代码,供大家参考,具体内容如下 首先我们绘制一个canvas区域,确实其宽高为480px*852px;水平居中 <!DOCTYPE html> <html lang="en"> ? <head>...[2022/5/9]

JS实现电影票选座的项目示例

简单模拟电影票选座,详细代码如下: 利用js实现给li标签添加和取消属性,来实现选座功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...[2022/4/7]

关于ES6中数组新增的方法详解

目录在ES6之前,创建数组的方式有2种:Array.find((item,indexArr,arr)=>{}) 掌握Array.findIndex((item, index, Arr) => {}) 掌握Array.flat()用于拉平嵌套的数组[推荐-超级好用]Array.at()返回...[2022/3/29]

es6?js?匹配两个数组对象的方法

判断两个数组用的value是否相等 this.list = [ { user_type: 0, user_id: 1003, department_id: 1, ...[2022/3/29]

用JS写了一个30分钟倒计时器的实现示例

前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> <html> ?? ?<head> ?? ??? ?<meta http-equ...[2022/3/14]

JS模拟实现串行加法器

在重温《编码:隐匿在计算机软硬件背后的语言》第12章——二进制加法器时,心血来潮用JS写了一个模拟串行加法器。 测试断言工具TestUtils.js function a ertTrue(actual){ ? ? if(!actual) ? ? ? ? thro...[2022/3/14]

JS实现表单全选以及取消全选实例

本文实例为大家分享了JS实现表单全选以及取消全选的具体代码,供大家参考,具体内容如下 实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中;点掉全选按钮,所有按钮取消选中; 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1、全选和取消全选做法:让下面所有复选框的 ch...[2022/3/7]

JS实现拖动滑块验证

使用这种验证方法的目的:证明当前的用户不是机器人~防止恶意操作。 实现思路: 1、获取silde滑块(获取元素) 2、为元素注册事件———鼠标点击事件(onmousedown)鼠标点击之后获得当前鼠标的X坐标。 3、如何获取到鼠标的x坐标&mdas...[2022/3/7]

使用原生JS获取select元素选中的value和text值

示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width...[2022/3/2]

js异步之async和await实现同步写法

js异步之async和await实现同步写法

首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的。 var gen = function* (){ ? ? var a = yield readFile(''./a.txt''); ? ? console.log(a.toString()); ? ?...[2022/3/2]

学习Vite的原理

目录1. 概述2. 实现静态测试服务器3. 处理第三方模块4. 单文件组件处理 1. 概述 Vite是一个更轻、更快的web应用开发工具,面向现代浏览器。底层基于ECMAScript标准原生模块系统ES Module实现。他的出现是为了解决webpack冷启动时间过长以及Webpack HMR热...[2022/2/14]

js事件流、事件委托与事件阶段实例详解

目录前言1、事件流2、事件处理程序3、事件对象4、跨浏览器事件处理5、事件委托总结 前言 JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器(也叫处理程序)订阅事件。本文总结一下 JS 中的事件相关知识点。 ...[2022/2/14]

一起来看看js对象和事件的学习笔记

一起来看看js对象和事件的学习笔记

目录1.内置对象2.对象2.1 对象的创建2.1.1字面量形式创建2.1.2new object 创建2.1.3object对象的create方法3.对象的序列化和反序列化4.this4.1 在函数中使用this4.2在对象中使用this5.事件5.1事件5.2作用5.3事件中的几个名词5...[2022/2/14]

千篇一律的JS运算符讲解,一起来看看

目录算术运算符字符串运算符赋值运算符比较运算符逻辑运算符三元运算符位运算符运算符优先级总结 算术运算符 对数值类型的变量及常量进行算数运算。也是最简单和最常用的运算符号。 四则混合运算,遵循 “先乘除后加减”的原则。取模运算结果的正负取决于被模数(%左边的数)的符号...[2022/2/14]

JS判断对象属性是否存在的五种方案分享

JS判断对象属性是否存在的五种方案分享

目录背景检查属性是否存在inReflect.has()hasOwnProperty构造函数法对象字面量缺点 覆盖报错Object.prototype.hasOwnProperty()ES13(ES2022)Object.hasOwn()总结 背景 在这篇Acce ible Object.prot...[2022/1/24]

通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回到顶部按钮回到顶部,并隐藏按钮,鼠标移动到顶部导航栏出现,鼠标移出导航栏后3秒后再次隐藏(导航栏...[2022/1/18]

JavaScript DOM 基础操作

JavaScript DOM 基础操作 一、获取元素的六方式 document.getElementById(''id名称'') 根据id名称获取 document.getElementsBycla Name(''元素类名'') 根据元素类名获取 返回值:伪...[2022/1/18]

JavaScript创建和获取时间的方法

一、获取时间常用方法 1、创建时间对象 var time=new Date() 创建当前的时间信息对象 var time1=new Date(2022,1,1,10,25,30) 创建2022-1-1 10:25:30 的时间对象 2、获取年份信息 var year=ti...[2022/1/18]

Javascript中数组的定义和常见使用方法

一、定义数组 1、定义数组 var arry=[1,2,''小名'',false] var 数组名=[值1,值2,...] 2、设置数组长度 arry.length=10 数组长度设置为10 二、数组常见方法 (1)在尾部增加值(push()) 格式:数组名.push(...[2022/1/17]

一篇文章让你轻松记住js的隐式转化

一篇文章让你轻松记住js的隐式转化

目录前言一、包装类Boolean()扩展Number()引用类型转换Number原始类型转Number还有这些混淆点是需要注意的:扩展String()Object.prototype.toStringArray.prototype.toString二、隐式转化触发规则布尔的隐式转化number的隐式...[2022/1/17]

async await的理解

async await的理解

初识 async 函数表示这个函数内部有异步请求,如果这个 async 函数没有返回值,那么这个 async 仅仅只是一个标识而已. await 需要结合 async 函数一起使用,它通常用于等待一个 Promise 函数或 async 函数的执行(你当然可以写个await 123,但这不会有...[2022/1/17]

基于JS实现弹性漂浮广告的示例代码

目录效果图1.功能(鼠标移入移出事件、点击事件、定时器控制移动)2.div初始样式设置3.获取div可以移动的页面大小4.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动。5.点击事件点击让div消失6.完整代码 效果图 1.功能(鼠标移入移出事件、点击事件、定时器控制移动) d...[2022/1/17]

诡异的 javascript 变量

诡异例子: function DelayExe() {   var a = 10;   setTimeout( function Print() { console.log(a); },  1000  ); } &n...[2022/1/17]

对象及defineProperty 方法

数据属性 configurable 属性是否可以通过 delete 删除并重新定义 是否可以修改他的特性(属性是否可以被配置) 是否可以把它改为访问器属性 默认 true enumerable 属性是否可以通过 for-in 循环返回 默认true writable 属性值是否可以被修改 ...[2022/1/17]

我的简易2048小游戏记录整理

我的简易2048小游戏记录整理

前言 注:该篇记录暂未实现过渡动画以及移动端的上下左右操作 我的2048后续最新效果展示2048GAME (226yzy.com) 还有后续代码我放在了我的Github上了226YZY/my2048game: 我的简易2048小游戏 (github.com) (本篇效果烦请自行根据代码复现...[2022/1/17]

Three.js 实现虎年春节3D创意页面

Three.js 实现虎年春节3D创意页面

背景 虎年 ?? 春节将至,本文使用 React + Three.js 技术栈,实现趣味 3D 创意页面。本文包含的知识点主要包括:ShadowMaterial、 MeshPhongMaterial 两种基本材质的使用、使用 LoadingManager 展示模型加载进度、OrbitCont...[2022/1/17]

jsPDF 添加 中文字体 分页打印 移除空白页

jsPDF2.5版本 默认不支持utf-8的字体 具体看官方的说明,默认是不支持中文的。要使用中文需要自己添加字体。 1 将字体转换为base64编码 然后引入。也可以直接引入二进制文件,但没试过这个。 建议直接使用jsPFD源码里的 /fontconverter/fontconverter...[2022/1/17]

JavaScript:数据类型详解

JavaScript:数据类型详解

ECMAScript中数据类型目前有两种:基本数据类型和引用数据类型。 基本数据类型   基本数据类型也称作简单数据类型,为Undefined,Null,Boolean,Number,String,Symbol。   基本数据类型的特点是:在内存中有固定大小空间,保存在栈中。 1、Undef...[2022/1/17]

101
2
记录数:6562 页数:1/13212345678910下一页尾页
 友情链接: NPS
加载更多