JS
关注
分享
扫一扫
文章平均质量分 85
Curry 3O
I can do ALL things !
展开
-
Promise API 的手动实现
Promise API 的手动实现一、Promise 手写实现原理：其实就是一个发布订阅者模式构造函数接收一个 executor 函数，并会在 new Promise() 时立即执行该函数then 时收集依赖，将回调函数收集到 成功/失败队列executor 函数中调用 resolve/reject 函数resolve/reject 函数被调用时会通知触发队列中的回调ES5写法(function(window) { const PENDING = "pending"; con原创 2021-05-18 20:19:15 · 599 阅读 · 6 评论 -
javascript的数组方法重写
push()方法：可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度Array.prototype.myPush = function () { var L = this.length; for (var i = L; i < L + arguments.length; i++) { this[i] = arguments[i - L]; } return ...原创 2019-12-17 18:02:55 · 810 阅读 · 0 评论 -
Vue项目登录及token验证
一、Vue实现token验证思路逻辑第一次登录的时候，前端调后端的登陆接口，发送用户名和密码后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面每次调后端接口，都要...原创 2019-12-14 10:15:34 · 742 阅读 · 0 评论 -
JS制作小车上下左右移动
假设一个在html页面元素，你可以通过按键盘上下左右键来控制它的位置并且能改变它的方向，下面我们用’小车’来实现。方法一这个方法需要用四张不同的小车图片，当我们按下键盘上下左右键后通过if判断键值来改变小车的移动方向并且更换对应的图片，最终达到小车开动的效果。图片：详细代码:<!DOCTYPE html><html lang="en"><head...原创 2019-07-22 20:32:08 · 1745 阅读 · 1 评论 -
JS用鼠标绘制椭圆
按下鼠标，自由移动绘制椭圆；当鼠标松开时，绘画结束，可以进行下一次的绘画。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画图</title> <style> div{ background: rgba(2...原创 2019-07-22 21:10:19 · 887 阅读 · 0 评论 -
数组的迭代方法
数组的迭代方法ECMAScript 5 为数组定义了 5 个迭代方法。每个方法都接收两个参数：要在每一项上运行的函数（可选的）运行该函数的作用域对象——影响 this 的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这 5 个迭代方法的作用。一、不生成新数组的迭代器方法f...原创 2019-08-04 20:03:16 · 135 阅读 · 0 评论 -
Bootstrap 模态框
Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。用法1.通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#ide...原创 2019-08-01 11:31:00 · 254 阅读 · 0 评论 -
canvas制作动态太极图
用 canvas 画布绘制出一个会旋转的太极图方法一：运用css动画来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态版太极图</title> <style> *{ margin: 0; ...原创 2019-08-06 13:40:48 · 1479 阅读 · 0 评论 -
Javascript小题库
一、简答题1. Javascript的组成？ECMAScript 核心语法规则DOM 对文档节点的操作BOM 对浏览器的操作2. Javascript可以运行在什么地方？Node环境下或浏览器中。3. Javascript基本数据类型有哪些undefinednullnumberstringboolean在JS中除了以上基本数据类型，其他所有类型都可以归结为引用数据...原创 2019-08-13 20:42:09 · 1961 阅读 · 0 评论 -
七夕的小礼物
把这个送给你喜欢的人看，他/她会很开心的！示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>七夕的秘密</title> <style> canvas { position: absolute; t...原创 2019-08-07 12:35:28 · 323 阅读 · 0 评论 -
Bootstrap中的switch开关组件
一、简介Bootstrap Switch是一款通过复选框美化实现的一款开关控件，可以给选择框设置类似于开关的样式，它是依赖于Bootstrap的一款插件。二、下载官网地址 : https://www.bootcdn.cn/bootstrap-switch/GitHub下载地址 : https://github.com/Bttstrp/bootstrap-switch三、导入<li...原创 2019-08-11 18:49:47 · 14418 阅读 · 0 评论 -
浅谈 ECMAScript 6 基本语法
一、相关背景介绍我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5。这个版本己经很多年了，且完美被各大浏览器所支持。所以很多学js的朋友可以一直分不清楚es5和javscript的关系。javascript是一门编程语言，那么它就会有版本，es5还是es6 就就是它的版本号。最新版es7己经在紧锣密布的进行中，它最新的语法会让我们写代码更新的行云流水。想了...原创 2019-08-12 12:43:14 · 347 阅读 · 0 评论 -
JavaScript面试题
1. javascript 的 typeof 返回哪些数据类型答案: string、number、undefined、boolean、object 和 function2.例举几种强制类型转换和隐式类型转换答案: 强制类型转换: parseInt、parseFloat、Number()、String() 、Boolean()隐式类型转换: +、-、== 、===3. spli...原创 2019-08-25 20:27:11 · 628 阅读 · 0 评论 -
ES5和ES6中继承的实现
一、ES5中的两种非常经典的继承1.组合继承指的是将原型链和构造函数的技术组合到一起来实现继承。其背后的思路就是使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。示例//构造函数继承实例属性(当然也可以有方法，不过不建议这么做)function Phone(name){ this.name = name; this.label=["全面屏","5...原创 2019-08-17 13:20:14 · 199 阅读 · 0 评论 -
Web前端面试题汇总
1.说一下http和https- http和https的基本概念 http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL...原创 2019-09-10 20:42:00 · 558 阅读 · 0 评论 -
常见的浏览器js兼容性问题
无论是在工作或者面试中，总会遇到关于浏览器兼容性的问题，往往会感到一头雾水不知从何说起，于是我结合一些工作经验及从网上搜集的一些资料对此做了一些汇总，希望对从事前端工作的朋友们起到一些帮助。Javascript:1.事件 event 绑定问题function bind(el,type,handle){ if (el.addEventListener) { //DOM2级非IE8及以下浏...原创 2019-08-04 13:06:52 · 464 阅读 · 0 评论 -
用Bootstrap框架制作下拉列表
Bootstrap下拉菜单用于显示链接列表的可切换、有上下文的菜单。实例将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative;的元素。然后加入组成菜单的 HTML 代码。<div class="dropdown"> <button class="btn btn-default dropdown-toggl...原创 2019-07-31 11:31:36 · 994 阅读 · 0 评论 -
鼠标拖动div移动
实现鼠标能够拖动div实现div的随意拖拽，需要注意的就是不能拖着拖着div在浏览器里面消失，因此需要进行位置计算。示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标拖动div</title> <style>...原创 2019-08-03 19:32:44 · 2257 阅读 · 1 评论 -
JS里如何制作乘法口诀表
在JavaScript中，制作乘法口诀表我们需要用到两个for循环,一个控制行数，一个控制列数。详细代码如下（我里面添加了一些CSS样式，目的是让乘法表排列的更整齐些）:结果图如下：...原创 2019-07-09 14:59:55 · 1581 阅读 · 0 评论 -
JS里如何构造函数判断一个数是否为质数
质数质数（prime number）又称素数，有无限个。质数定义为在大于1的自然数中，除了1和它本身以外不再有其他因数。例如17就是素数，因为它不能被 2~16 的任一整数整除。构造函数思路判断一个整数m是否是素数，只需把 m 被 2 ~ m-1 之间的每一个整数去除，如果都不能被整除，那么 m 就是一个素数。具体代码如下：运行结果图：先随便输入一个数字，比如8：所以8不是素...原创 2019-07-09 15:11:43 · 1518 阅读 · 0 评论 -
浅谈JS中的函数闭包
闭包闭包是函数和声明该函数的词法环境的组合。这个环境包含了这个闭包创建时所能访问的所有局部变量。下面我们来看一段代码：原创 2019-07-12 20:05:48 · 235 阅读 · 0 评论 -
JS中的冒泡排序
冒泡排序冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果他们的顺序（如从大到小、首字母从A到Z）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。从小到大的排序先定义一个数组，再输入一组数据，用两个for 循环控制比较次数。具体代码如下：结果如下:...原创 2019-07-09 15:38:53 · 132 阅读 · 0 评论 -
JS函数作为参数传递
JS中关于把函数作为函数的参数来传递的问题的小总结第一种，最简单的形式无参函数，直接形式函数的函数名放到括号中，再在执行部分这个函数即可。代码如下图所示：运行结果：第二种，带参数的普通调用法。跟第一种唯一的区别就是在定义主函数的执行语句里调用参数函数时该把参数加上。代码如下图所示：运行结果：这一种，就是把的引用的函数不在单独定义而是作为调用主函数时，里面的参数时生成，这里是个匿名...原创 2019-07-13 18:24:23 · 3271 阅读 · 0 评论 -
JavaScript中const、var和let区别与用法
const由 const 定义的变量不可以修改,而且必须初始化。例如：结果为：如果只定义变量不初始化就会报错，比如 const b结果：如果a已经用const定义并初始化了，那么它的值将不能更改，否则会报错。结果：var由 var 定义的变量可以修改,如果不初始化会输出undefined，不会报错。例如：结果：并且用var声明并初始化后的变量的值可以更改结果...原创 2019-07-14 16:27:06 · 183 阅读 · 0 评论 -
JS中的一些小习题（求水仙花数、质数、阶乘、完全数等）
1）有1、2、3、4个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？解法：结果：2）判断101-200之间有多少个素数，并输出所有素数（只能被1和它本身整除的自然数为素数）解法：结果：3）打印出所有的“水仙花数”，所谓“水仙花数”是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个“水仙花数”，因为153=1的三次方＋5的三次方＋3的三次方解法：结...原创 2019-07-10 20:27:52 · 580 阅读 · 0 评论 -
JS中自己封装方法，实现sort、reverse等方法
1.实现 sort 升序排序我用的是冒泡排序法，将输入的数据传入到arr数组中，再将他们从小打到排序，代码如下：运行结果如下：2.实现 sort 降序排序方法与升序类似，具体代码如下：运行结果如下：3.reverse 反转排序rag数组第一个元素与最后一个元素交换位置，遍历整个数组，直至排序完，代码如下：运行结果如下：4.栈中实现 pushpush() 可接受任意类...原创 2019-07-15 13:54:57 · 1347 阅读 · 0 评论 -
JS正则表达式小运用
使用match()方法来返回匹配结果。如果匹配上，直接扔出来，下次开始位置是扔出来的下一位开始;如果没有匹配上，从本次匹配的下一位开始继续匹配。实例一var str = 'abbab';var pattern = /[a-z]{2}/g; //筛选出连续的两个字符都是小写字母即可console.log(str.match(pattern)); //Array [ "ab", "ba" ]...原创 2019-07-18 11:51:41 · 114 阅读 · 0 评论 -
变量声明提前，函数声明提前顺序
函数声明和变量声明都会被提升。但是一个值得注意的细节（这个细节可以出现在有多个“重复”声明的代码中）是函数会首先被提升，然后才是变量。考虑以下代码：会输出 1 而不是 2 ！这个代码片段会被引擎理解为如下形式：注意， var foo 尽管出现在 function foo()… 的声明之前，但它是重复的声明（因此被忽略了），因为函数声明会被提升到普通变量之前。尽管重复的 var 声明会被...原创 2019-07-11 22:13:07 · 240 阅读 · 0 评论 -
JS数组的习题
1.计算给定数组 arr 中所有元素的总和解题思路：通过forEach() 遍历数组每个元素，并将它们累加起来。代码如下：运行结果：2.移除数组 arr 中的所有值与 item 相等的元素 ，结果返回新的数组解题思路：先创建一个新数组，然后通过forEach() 遍历arr数组每个元素，让它们与item比较，如果不相等则用push() 方法把它们放入新数组。代码如下:运行结果：...原创 2019-07-16 11:44:28 · 699 阅读 · 0 评论 -
JS正则表达式中的修饰符
修饰符1. i（ignore case） 不区分大小写var pattern = /hello/i;var str = 'Hello world';console.log(pattern.ignoreCase); //trueconsole.log(pattern.test(str)); //trueconsole.log(pattern.exec(str)); //Arr...原创 2019-07-17 19:17:13 · 996 阅读 · 0 评论 -
沙箱应用
沙箱Sandboxie(又叫沙箱、沙盘)即是一个虚拟系统程序，允许你在沙盘环境中运行浏览器或其他程序，因此运行所产生的变化可以随后删除。它创造了一个类似沙盒的独立作业环境，在其内部运行的程序并不能对硬盘产生永久性的影响。其为一个独立的虚拟环境，可以用来测试不受信任的应用程序或上网行为。实例：给每个div、p标签设置边框属性。<!DOCTYPE html><html la...原创 2019-07-21 17:30:32 · 1327 阅读 · 0 评论 -
图片放大镜功能
实现效果演示：鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。我将用三种方法来实现。1.原生js代码实现思路：1.原图窗口与放大窗口插入的是同一个图片，不过原图窗口的图片要适当缩小，放大窗口图片保持原大小，超出部分设置隐藏。2.先定下放大比例，例如本文原图大小为10001000，可以把原图窗口的图片设为400400，这样放大窗口就能实现2.5倍的...原创 2019-08-02 21:05:37 · 2349 阅读 · 2 评论 -
详谈JavaScript
一、JavaScript概述 JavaScript是什么？有什么作用？ HTML：就是用来写网页的。 人的身体 CSS： 就是用来美化页面的。 人的衣服 JavaScript：前端大脑、灵魂。 人的大脑、灵魂 JavaScript是WEB上强大的脚本语言。 脚本语言： 无法独立执行。必...原创 2019-07-08 14:06:34 · 118 阅读 · 0 评论