使用 JavaScript 制作页面效果

十一、使用 JavaScript 制作页面效果11.1 DOM 编程DOM 编程(Document Object Model)文档对象模型在 DOM 编程中,把整个页面看成一个 document 对象,其中的 html 元素为具体对...

js+Html实现表格可编辑操作

本文实例为大家分享了js+Html实现表格可编辑操作的具体代码,供大家参考,具体内容如下功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容...

js前端解决跨域的八种实现方案

由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。
那么如何实现跨域呢,以下是实现跨域的一些方法。
一、jsonp...

怎样用Javascript实现策略模式

概述策略模式是JavaScript设计模式中行为型的设计模式;定义:定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换...

怎样用Javascript实现函数柯里化与反柯里化

函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感;下面来一起看看究竟什么是函数柯里化:维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的...

JavaScript哪些场景不能使用箭头函数

1. 定义对象方法
   JS 中对象方法的定义方式是在对象上定义一个指向函数的属性,当方法被调用的时候,方法内的 this 就会指向方法所属的对象。let obj = { array: [1, 2,...

微信小程序实现登录界面

微信小程序的登录界面实现,供大家参考,具体内容如下<view class="container"> <view class="wrapper"> <view class="left-top-sign">LOGIN</view> <view class="welco...

怎样用JavaScript实现观察者模式

概述观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式;定义:观察者模式定义了一种一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得...

js实现简单省市区三级选择联级

本文实例为大家分享了js实现省市区三级选择联级的具体代码,供大家参考,具体内容如下代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti...

微信小程序实现视频播放器发送弹幕

本文实例为大家分享了微信小程序实现视频播放器发送弹幕的具体代码,供大家参考,具体内容如下一、视频播放器 video-detail 视频播放器 select-color 发送弹幕1. 页面制...

JS Canvas接口和动画效果大全

概述<canvas>元素用于生成图像。它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像。它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitm...

JS ES6异步解决方案

最初使用回调函数&#8203; 由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用。&#8203;...

原生js如何实现call,apply以及bind

1、实现call
步骤: 将函数设为对象的属性; 指定this到函数,并传入给定参数执行函数; 执行之后删除这个函数; 如果不传入参数,默认指向window;Function.prototype.mycal...

如何使JavaScript休眠或等待

概述JavaScript不具有 sleep()函数,该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待,该怎么做呢?假设您想将三则消息记录到Javascript控制台,每条消息...

原生JS封装vue Tab切换效果

本文实例为大家分享了原生JS封装vue Tab切换的具体代码,供大家参考,具体内容如下先看效果图使用的技术vue,js,css3vue组件 可以直接使用<template> <div class="bookcircle-h...

js精准计算

var numA = 0.1; var numB = 0.2; alert( numA + numB );0.1 + 0.2 = 0.30000000000000004。
计算精度误差问题(和二进制相关)。对于浮点数的四则运算,几乎所有的编程语言都会...

JavaScript使用canvas绘制坐标和线

本文实例为大家分享了JavaScript使用canvas绘制坐标和线的具体代码,供大家参考,具体内容如下具体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...

JS什么场景不适合箭头函数

概述这些年来,ES6 将js的可用性提升到一个新的水平时: 箭头函数、类等等,这些都很棒。箭头函数是最有价值的新功能之一,有很多好文章描述了它的上下文透明性和简短的语法。但...

JavaScript实现随机码的生成与校验

JavaScript之随机码的生成与校验,供大家参考,具体内容如下由于获取事件源有两种写法,所以在此处都附上:这个是直接用var去定义的<!DOCTYPE html><html lang="en"><head> <met...

JavaScript实现显示和隐藏图片

JavaScript之显示和隐藏图片,供大家参考,具体内容如下点击按钮可以显示和隐藏图片(默认显示),附上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...

你可能不需要在JavaScript使用switch语句

没有 switch 就没有复杂的代码块switch很方便:给定一个表达式,我们可以检查它是否与一堆case子句中的其他表达式匹配。 考虑以下示例:const name = "Juliana";switch (name) {...

测量JavaScript函数的性能各种方式对比

概述测量执行一个函数所需的时间总是一个很好的办法,证明某些实现比另一个实现的性能更好。这也是一个很好的方法,可以确保性能没有在某些改变后受到影响,也可以追踪瓶颈。良好...

浅谈JS包装对象

概述定义对象是JavaScript语言最主要的数据类型,三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”(wrapper)。所谓“...

比较JavaScript对象的四种方式

前言比较JavaScript中的原始值非常简单。只需使用任何一种可用的相等运算符即可,例如严格相等运算符:'a' === 'c'; // => false1 === 1; // => true但是对象却有结构化数...

JS Object构造函数之Object.freeze

概述Object.freeze(obj)可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已经属性,不能修改该对象已有属性的可枚举性...

JS如何为promise增加abort功能

概述Promise只有三种状态:pending、resolve、reject,一个异步的承诺一旦发出,经历等待(pending)后,最终只能为成功或者失败,中途无法取消(abort)。为promise提供abort功能的思路有两...

JS对象复制(深拷贝和浅拷贝)

一、浅拷贝1、Object.assign(target,source,source...)a、可支持多个对象复制b、如果source和target属性相同 source会复制target的属性c、target只能为Object对象var obj =...

聊聊JS ES6中的解构

概述es6新增了一种从数组或者对象中获取指定元素的方式,这种方式就是我们今天要说的解构。先来说说数组的解构在有解构之前呢,我们获取数组中的指定元素通常是根据索引去做的:c...

JavaScript实现简单日期特效

JavaScript之日期特效的具体代码,供大家参考,具体内容如下直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style...

详解JS中的compose函数和pipe函数用法

compose函数compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数。我们考虑一个简单的需求:这个需求很简单,直接一个计算函数就行:co...

如何用JavaScript检测当前浏览器是无头浏览器

什么是无头浏览器(headless browser)?无头浏览器是指可以在图形界面情况下运行的浏览器。我可以通过编程来控制无头浏览器自动执行各种任务,比如做测试,给网页截屏等。为什么叫...

理解与使用JavaScript中的回调函数

概述在JavaScript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创...

怎样用JS模拟实现枚举

前言在当前的JavaScript中,并没有枚举这个概念,在某些场景中使用枚举更能保证数据的正确性,减少数据校验过程,下面就介绍一下JavaScript如何模拟实现枚举效果。枚举主要特点...

10大Js图像处理库

介绍对于很多人来说,使用JavaScript来处理图像不是一件非常简单的事情,幸运的是我们可以借助第三方的库来实现我们想要的功能,本篇文章就介绍一有哪些JavaScript图片处理库可供...

JS如何理解data URL

概述canvas有一个非常常用的方法canvas.toDataURL(),它会将canvas转化为data URL的格式。
通常情况下这个data URL的类型为image。
看看下面的例子:<canvas id="canvas" heigh...

详解TypeScript中的类型保护

概述在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况:interface Bird { // 独有方法 fly(); // 共有方法 layEggs();}interface Fish { // 独有方法...

JavaScript实现长图滚动效果

本文实例为大家分享了JavaScript之长图滚动的具体代码,供大家参考,具体内容如下长图的滚动会涉及定时器:
我们先来回顾下定时器:<!DOCTYPE html><html lang="en"><head> <met...

详细讨论JavaScript中的求值策略

最近在研究 lambda演算 中的 η-变换 在JavaScript中的应用,偶然在 stackoverflow 上看到一个比较有意思的问题。关于JavaScript的求值策略,问js中函数的参数传递是按值传递还...

如何利用js在两个html窗口间通信

场景:当A页面打开B页面,在B页面操作后,A页面需要同步变更数据时A 页面 ,http://127.0.0.1:10001/A.htmlvar domain = 'http://127.0.0.1:10001';window.open('http://127.0.0.1...

JavaScript控制台的更多功能

概述你可能在JavaScript项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是JavaScriptconsole 对象还有许多其他的功能,可以在处理项目...

7个你应该知道的JS原生错误类型

概述从浏览器控制台到运行 Node.js的终端,我们到处都会看到错误。本文的重点是概述我们在js开发过程中可能遇到的错误类型。提示:良好的错误提示会导致快速而无痛的发展经历与...

JavaScript实现点击改变图片形状(transform应用)

JavaScript之点击改变图片形状(transform的应用),供大家参考,具体内容如下附上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>transform的运...

js数组去重的11种方法

在实际工作或面试中,我们经常会遇到“数组去重”问题,接下来就是使用js实现的数组去重的多种方法:1.将数组的每一个元素依次与其他元素做比较,发现重复元素,删除var arr = [1,23,...

如何通俗的解释TypeScript 泛型

概述在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束。这里的函数,同时包含 class 的构造函数,因此,一个类的声明部分,也可以使用泛型。那么,究竟什么是泛型?如果通俗...

JavaScript中正则表达式的实际应用详解

实际工作中,JavaScript正则表达式还是经常用到的。所以这部分的知识是非常重要的。一、基础语法:
第一种:字面量语法var expression=/pattern/flags;第二种:RegExp构造函数语法v...

如何自己实现JavaScript的new操作符

构造函数在介绍new之前,必须要知道什么是构造函数。构造函数和普通函数在写法上没有任何区别,当一个函数通过new Fun()调用时,就叫做构造函数,构造函数首字母通常大写。function...

如何用JavaScript实现一个数组惰性求值库

概述在编程语言理论中,惰性求值(英语:Lazy Evaluation),又译为惰性计算、懒惰求值,也称为传需求调用(call-by-need),是一个计算机编程中的一个概念,它的目的是要最小化计算机要做的工...

详解JS变量存储深拷贝和浅拷贝

变量类型与存储空间栈内存和堆内存基本数据类型string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值
基本数据类型...

使用Vue3实现一个Upload组件的示例代码

通用上传组件开发
开发上传组件前我们需要了解: FormData上传文件所需API dragOver文件拖拽到区域时触发 dragLeave 文件离开拖动区域 drop文件移动到有效目标...

7个好用的TypeScript新功能

1. 可选链从 v3.7 可用这是当你尝试访问嵌套数据时的一个痛点,嵌套数据越多,代码就会变得越繁琐。在下面的例子中,要访问address,你必须遍历data.customer.address,而且data或cus...

返回顶部
顶部