分类：javascript

2020
11-19

Javascript中window.name属性详解

Javascript中window.name属性详解 关于window下自带name的属性不知道大家有没有发现这样一种情况在控制台里直接输出未声明变量，正常情况应该是会报错的，而且声明未赋值的变量输出应该是undefinedvara;//undefinedb;//报错但是偏偏就个别特例，就是name属性其实window自身就带有name这个属性，在控制台输入window可以可以看到打开往下翻就可以找到window.name直译过来是窗口名字，主要用于为超链接和表单设置目标（targets），什么意思呢，我们做个案例建立两个... 继续阅读 >
2020
11-19

JavaScript实现图片合成下载的示例

最近项目一个功能需求，需实现将两张图片合成后下载的一个功能。分析完功能需求后，决定直接使用前端技术来实现。为提高效率，使用插件(html2canvas)配合编写此功能。有关插件(html2canvas)的介绍，这里不多说明，大家可自行网上查阅。以下直接附上效果演示图以及完整代码效果演示：完整代码：(代码复制可直接使用)注：最好将代码文件放在服务器环境下运行，以防止插件(html2canvas)出错，这里使用的服务器环境为phpStudy，为本地... 继续阅读 >
2020
11-17

JavaScript枚举选择jquery插件代码实例

JavaScript枚举选择jquery插件代码实例 某次做项目要实现一个功能：按星期选择一个连续的时间范围比如：周一到周五，周六到周日或周六到周三聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。源码用法:鼠标点击开始/结束项（红色部分，可自定义）进行选择和取消选择效果图：周一到周五周六到周日周日到周三<html><head><title>daybox测试</title><scripttype='text/ja... 继续阅读 >
2020
11-17

详解JavaScript原型与原型链

正如一些面向对象语言中所实现的那样，在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复、实现类型检查与实现更加清晰地代码结构。在JavaScript中，继承是通过原型链实现的。了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式。在JavaScript中创建对象JavaScript中对象创建的方式有两种：工厂方法（FactoryFunctions）、构造器方法（ConstructorFunctions）。工厂方... 继续阅读 >
2020
11-17

详解JavaScript执行模型

JavaScript执行模型引言JavaScript是一个单线程（Single-threaded）异步（Asynchronous）非阻塞（Non-blocking）并发（Concurrent）语言，这些语言效果通过一个调用栈（CallStack）、一个事件循环（EventLoop）、一个回调队列（CallbackQueue）有些时候也叫任务队列（TaskQueue）与跟运行环境相关的API组成。概念调用栈CallStack调用栈是一个LIFO后进先出数据结构的函数运行栈，它内部的数据结构为函数帧。当在JavaScript中... 继续阅读 >
2020
11-13

详解ES6 扩展运算符的使用与注意事项

扩展运算符spreadsyntax又叫展开语法，写法是...，顾名思义，其实是用来展开字符串，数组和对象的一种语法，可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开；还可以在构造字面量对象时,将对象表达式按key-value的方式展开。常用的语法如下：//函数调用：myFunction(...iterableObj);//字面量数组构造或字符串：[...iterableObj,'4',...'hello',6];//构造字面量对象时,进行克隆或者属性拷贝（ECMAS... 继续阅读 >
2020
11-13

JavaScript ES 模块的使用

自从ES模块被添加到规范中后，JavaScript中的模块就更加简单了。模块按文件分开，异步加载。导出是用export关键字定义的；值可以用import关键字导入。虽然导入和导出单个值的基础知识非常容易掌握和使用，但还有许多其他方法可以使用ES模块来使你的导入和导出按照你需要的方式工作。在本文中，我将介绍你可以在模块中导出和导入的所有方法。需要记住的一点是，导出和静态导入只能发生在模块的最外层。你不能从函数、if语... 继续阅读 >
2020
11-11

JavaScript 实现拖拽效果组件功能(兼容移动端)

JavaScript 实现拖拽效果组件功能(兼容移动端) 页面元素拖拽是一种非常实用的前端效果，基于元素拖拽可以实现很多不同的功能，增加客户端许多操作的便捷性，大大提高用户体验。日常生活中大家多多少少都见过这种效果，所以就不废话了，直接开干吧。预期目标实现一个Class类，通过该Class，可以将任意DOM元素（比如div）一键变为可拖拽状态，也可以恢复成原来的状态，例如这样：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"con... 继续阅读 >
2020
11-06

JavaScript 实现轮播图特效的示例

效果展示1.页面截图2.相关效果html页面从微信读书上找了几张书籍封面来做轮播的图片。index.html<body><divid="container"><divclass="big_pic_div"><divclass="prev"></div><divclass="next"></div><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"class="mark_left"></a><ahref="javascript:;"rel="externalnofollow"rel="externalnofollow"class="mark_right"></a><div... 继续阅读 >
2020
11-06

JavaScript setTimeout()基本用法有哪些

在制作网页动态效果时，可能会遇到需要延时在执行的需求，这时就可以用到js中定时器来实现此类需求，本文将对setTimeout()做一个用法总结。setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式(以毫秒为单位)setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()setTimeout()用法举个简单的例子加入下列代码，在打开的页面静候三秒后，弹出警告框“你好”<scri... 继续阅读 >
2020
11-04

通过实例解析javascript Date对象属性及方法

日常生活中，各种形式的时间字符到处都是。时间观念的产生，时间单位、计时工具的发明，给人类带来的变化实在一言难尽。今天就来谈谈日期那些事儿。一起来看看JavaScript中的日期对象Date。获取月份天数//获取月份天数functiongetMonthDayCount(year,month){returnnewDate(year,month,0).getDate();}console.log(getMonthDayCount(2017,10));//31Date第三个参数的本质跟setDate是一样的。因为date为0时自动... 继续阅读 >
2020
11-03

JavaScript语法约定和程序调试原理解析

JavaScript语法约定和程序调试原理解析 JavaScript语法约定1、大小写的区分1).JavaScript的关键字，永远都是小写的；2).内置对象，如Math和Date是以大写字母开头的；3).对象的名称通常是小写；若是多个单词，驼峰（Camel）命名法。驼峰（Camel）命名法：开头单词小写，后面单词首字母大写。使用的很普遍，很多人习惯这种命名方法。示例：userName。2、变量、对象和函数的名称命名当声明变量、对象和函数的名称时大小写，数字，下划线，美元符号都可以，但是必须以字... 继续阅读 >
2020
11-03

JavaScript动态生成表格的示例

要求：HTML标签只写一行表头通过JS来写动态的表格（有多少组数据，就自动创建多少行表格）为学习和演示，采用固定的数据，不涉及调用后台数据代码实现：HTML内容：<tablecellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table>CSS内容：table{width:500px;margin:100pxauto;border-collapse:collapse;text-a... 继续阅读 >
2020
11-01

详解JavaScript之Array.reduce源码解读

前言reduce(...)方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值（累计作用）此方法接受两个参数：callback(...)(必选)、initialValue(可选)。callback(...)接受4个参数：Accumulator(acc)(累计器)、CurrentValue(cur)(当前值)、CurrentIndex(idx)(当前索引)、SourceArray(src)(源数组)。注意点：1、callback(...)一般需要返回值2、不会改变原数组实现思路1、先获取初始累计... 继续阅读 >