weixin_42839080的博客

前端实现页面水印的思路,先将名称画到canvas上,再将canvas生成base64图片格式作为盒子的背景图追加到页面上,其中利用pointer-events: none属性实现点击穿透.

由于clipboard.js功能复杂,且体量过大.本文将在其基础上删减部分代码实现更小,更快的赋值功能// 改写的Clipboard.js代码(更快更简洁更小)class ClipboardAction { /** * @param {Object} options */ constructor(options) { this.resolv...

一. 页面元素全屏function requestFullScreen(elem) { // 兼容不同的浏览器 var requestMethod = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullScreen; ...

// 地图的工具类(使用平台,小程序,h5,pc等)const EARTHRADIUS = 6370996.81;const mapUtils = (function() { const GeoUtils = function () { }; // ------添加静态方法------- /** * 判断点是否在矩形内 * @param...

一. sessionStorage的封装const PREFIX = 'cache_';class Store { constructor(device) { this.store = device; } get(key) { return this.store.get(key); } set(key, value)...

excel是常见的表格处理工具,那么前端怎么实现excel生成与下载呢?我们利用xlsx.js来实现一. 安装js-xlsxnpm install xlsx二. 文档简介完成的XLSX对象:需要理解的术语:1 workbook是xlsx读取excel内容后的js对象,读取到内容后可以对表格进行操作;同样的也可以创建一个空的workbook,往其中写入内容完整的workbook对象...

git是很多公司使用的版本控制工具，今天就来说一下git使用的大体流程：1 下载git在使用Git前我们需要先安装 Git。Git 目前支持 Linux/Unix、Solaris、Mac和 Windows 平台上运行。Git 各平台安装包下载地址为：http://git-scm.com/downloads2 配置gitGit 提供了一个叫做 git config 的工具，专门用来配置或读...

最早接触bootstrap框架里面对图片的响应式处理是这样做的:给所有的图片一个img-responsive类而这个类里面的利用css属性来做到响应式一. 利用类名响应式图片<img src="test.png" class="img-responsive" alt="">响应式类的具体做法:.img-responsive { di

本期拿两个面试题来充当内容:一 函数作为返回值的运用要求实现下面的形式:add(1)(2)(3) 最终的结果是6初次看到这个题,很多人都是一脸懵逼,现在我们来解析一下,这个无非是函数的多次调用,我们改变下题型,相信很多人就能看懂了.const fn1 = add(1)const fn2 = fn1(2)const fn3 = fn4(3)这样表示函数的每次的返回值又是一个函数,...

一 什么是重定向重定向（Redirect）就是通过各种方法将各种网络请求重新定个方向转到其他位置。二 为什么用重定向举一个例子:比如用户注册完账号后,此时用户点击注册后,那么页面应该取到登录页面,...

下面是操作localStorage的代码:页面代码:<input type="search" id="search-input" placeholder=&quot

其实是一个很简单的东西，认真看十分钟就从一脸懵B 到完全 理解！先看明白下面：例1obj.objAge; //17obj.myFun() //小张年龄undefined例2shows() //盲僧比较一下这两者this 的差别，第一个打印里面的this 指向obj，第二个全局声明的shows()函数 this 是window ；1，call()、apply()、bind(...

一. 改变对象的属性名let jsonObj = [ { "_id": "123456", &

一 浅拷贝浅拷贝: 当拷贝的数据是对象,对象里的 1) 属性值是基本数据类型,那么拷贝的是地址, 2) 属性值是复杂引用类型,那么拷贝的是地址浅拷贝只解决了第一层的问题,拷贝的第一层如果是引用类型,拷贝的还是地址1.1 对象的浅拷贝1.1.1 Object.assgin()方法Object.assgin()//将所有可以枚举属性的值从一个或多个源对象复制到目标对象,返...

因为Date对象里没有格式化日期的方法,但是日常操作中,我们却经常用到,很多同学喜欢直接引入moment.js这个第三方工具库,但是moment.js是一个非常大且强壮的开源库,如果对于小型应用,并不适合,所以我们直接封装一个小型的格式化日期的JS

一 什么是单例模式单例模式之所以这么叫，是因为它限制一个类只能有一个实例化对象。经典的实现方式是，创建一个类，这个类包含一个方法，这个方法在没有对象存在的情况下，将会创建一个新的实例对象。如果对象存在，这个方法只是返回这个对象的引用二 实现一个单例模式2.1 ES6的class写法class Singleton { static instance = null ...

一 定义:MDN对闭包的定义为:闭包是指那些能访问到自由变量的函数那什么是自由变量呢?自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量举个例子:let x = 10;由此可以看出闭包由两部分组成:闭包 = 函数 + 函数能够访问到的自由变量举个例子:var a = 1;function foo() { console.log(a);}...

1.概念介绍策略模式(Strategy Pattern)：封装一系列算法，支持我们在运行时，使用相同接口，选择不同算法。它的目的是为了将算法的使用与算法的实现分离开来。策略模式通常会有两部分组成，一部分是策略类，它负责实现通用的算法，另一部分是环境类，它用户接收客户端请求并委托给策略类。2.优缺点2.1优点有效地避免多重条件选择语句；支持开闭原则，将算法独立封装，使得更加便于切...

this指向在前端的代码里,是最常见的运用技巧,那么搞清this指向,也就就能梳理更清晰的逻辑,避免bug的产生.一 this指向大全1. 全局的this指向window2. 函数内部的this指向window3. 对象里的方法中的this指向这个对象4. ---------以上内容总结为: this指向其调用者------------5. 箭头函数的this是定义其所在的对象而不是使...

在JS里面是基于对象的语言,那么我们在前面两篇文章中具体分析了Food.js文件的作用,以及Snake.js的文件作用,在我们的顶层Game.js文件中来调用这些方法就可以了,而页面中只需要调用我们的Game.js里面的方法就可以实现整体的功能,这就是面向对象:找一个专业的人来完成所有的功能 游戏对象模块的设计: 在游戏模块中设计好所有的内容为顶层模块,在这里设计好所有的功能与接口交互,这样在...

JS中的同步与异步,解释的最准确的一段话:JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScrip...

在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法:// 1. 在模板引擎里面添加行内事件 // 2. 利用事件的委托获取(常用)// 3. 在ajax的监听响应完成函数后面获取一 在模板引擎里面添加行内事件添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素.<!-- 1.准...

JS中的offset家族：一、offsetEWidth与offsetHeight：获取的是元素的实际宽高 = width + border + padding注意点： 1.可以获取行内及内嵌的宽高 2.获取到的值是一个number类型，不带单位 3.获取的宽高包含border和padding 4.只能读取，不能设置console.log ( box.offsetWi...

登录框的设计的样式以及结构思路在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这样就可以让其脱标,不会影响页面的内容,同时也要将登录框的盒子设置为定位属性,但是它的层级一定比cover-bg的层级高,这样就可以让遮罩层显示在下面,登录框在上面的样式.HTML+CSS...

一首先介绍什么是递归: 递归就是在函数的内部调用自己的函数的形式。 二：递归的思想精髓： 正如上面所描述的场景，递归就是有去（递去）有回（归来），如下图所示。“有去”是指：递归问题必须可以分解为若干个规模较小，与原问题形式相同的子问题，这些子问题可以用相同的解题思路来解决，就像上面例子中的钥匙可以打开后面所有门上的锁一样；“有回”是指 : 这些问题的演化过程是一个从大到小，由近及远的过程，...

在前面三篇文章里,我们讲了三个不同的JS文件来一起实现最终的效果,但是在网页加载的时候,每一次都要下载三个JS文件 ,怎样耗费性能,所以我们利用沙箱的隔断作用域的原理,将三个文件放到一起来:最后在HTML结构中只调用一个文件就可以了. JS实现完整的功能:并且加上了如果贪吃蛇的蛇头与蛇身体的某一个部位接触之后,游戏结束的功能. 这个功能的需求分析: 当贪吃蛇的蛇头与蛇身体的某一个部位...

一.需求分析: 1. 在页面上初始化一条蛇长3个食物宽度,并且初始化移动方向是向右 2. 让蛇可以在页面上移动 3. 让蛇吃掉食物后,身体变长 二.思路分析: 1.同样利用构造函数完成对蛇的初始化,但是除了构造蛇的宽度,高度,颜色外,还需要将蛇分成三个单元(红色,黄色,绿色),这三个单元对应不同的地图x,y坐标....

一. 食物模块需求分析: 1.在页面地图上显示一个食物的方块盒子,位置是随机显示的. 2.需要盒子被蛇吃后要消失,并且重新随机生成新的食物盒子 二. 食物的设计思路分析: 1.将一块地图分割成一个一个的方格,而这个方格刚好是食物盒子的大小.这样我们可以先确定食物盒子在地图上的X,Y坐标,再利用X,Y坐标来定位食物盒子的left,top的值.比如:上图红色的坐标是:(4...

首先我们先介绍什么是事件: 事件就是某一个对象在特定的时刻做了某一件事。比如：点击事件，当我点击了按钮后变触发了点击事件浏览器会做出相应的响应。那么事件有三大要素： 1、事件源：dom对象 2、事件类型：具体参照W3C的javas事件参考手册 3、事件响应：一般是一个函数，称之为事件处理函数原生JS注册事件的语法： //原生注册事件语法： documen...

第一步:因为我们没有UI提供的页面原图,所以我们需要自己在官网场面去截图,那么怎么截图呢? a: 用谷歌浏览器先打开冒险岛官网：http://mxd2.qq.com/main.htm b: 打开你想截图的网页，然后按下 F12（macOS 是 option + command + i）调出开发者工具，接着按「Ctrl + Shift + P」（macOS 是 command + Shift...

此处不考虑兼容性问题,因为在IE8及其以下的版本中不支持事件对象的page坐标系列。所以我们直接使用元素的page系列坐标。需求： // 1.点击登录按钮,让登录盒子显示在页面上,同时出现遮罩层 // 2.点击登录盒子的关闭按钮,登录盒子消失 // 3.登录盒子可拖拽思路分析：这里的重点是第三步登录盒子的可拖拽，具体思路如下图： 我们解决盒子拖拽的思路就...

悬浮窗在很多网页里面都有使用,在小风车这里曾经也使用过.现在把遇到的悬浮窗问题都总结在本文.一 简单固定定位的悬浮窗1.1 这种悬浮窗一般悬浮在页面底部,比如:淘宝,京东等一直悬浮在页面的固定位置上.这种的做法很简单,我只需要给盒子一个固定定位即可.但是一定要提高盒子的层级,避免与页面上其他定位冲突.1.2 具体代码实现:/*给盒子一个固定的样式就可以了*/#scrollsidebar...

因为在项目中遇到锚点定位的问题，觉得有必要单独成文，来介绍锚点定位的解决办法。一 学习锚点定位之前的知识储备:1.1 #号的作用#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。为网页位置...

一 图片文件转成临时的URL首先,在网页里面图片可以直接拖到浏览器里面显示,但是也打开了新的网页,为了让图片就在当前网页内显示,那么必须上传或则拖拉当当前网页,然后再经过处理,就能显示出来了.关于文件对象的知识点:/* **一 File 对象代表一个文件，用来读写文件信息。 File 对象有以下实例属性: File.lastModified：最后修改时间...

字符串的操作方法:一 检索字符串//方法可返回某个指定的字符串值在字符串中首次出现的位置。字符串对象.indexOf() //注意对大小写敏感,如果检索的字符串没出现返回-1.有的话返回字符串出现的第一个位置.应用场景:<a id=&a

一、首先，我们先说行内注册事件的方式：// 语法： 事件名 = function(){ 函数体 } //或则// 事件名 = 功能代码下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。<input type="text" size="30" id="email" onchange=&am

首先,我们先搞清楚属性与属性节点是什么?属性: 在对象中,我们说属性就是对象存储的数据,或则说对象身上保存的变量就是属性。在CSS的样式中，因为它也是键值对的形式，所以我们也称CSS样式属性。操作属性的方法：1、点语法： 对象.属性 = 属性值； （赋值） 对象.属性 (取值)2、字符串语法： 对象[‘属性名称’] = 属性值； （赋...

在介绍事件的冒泡与捕获之前,我们先介绍为一个元素注册多个相同事件: 比如: 我们给一个盒子注册两次点击事件//可以给同名的事件，绑定多个事件处理程序 //语法：对象.addEventListener(参数1,参数2,参数3); //参数1：事件名(字符串)，不要加on 例如：click 、 mouseover 、mouseout //参数2：事件处理程序（函...

一、等于（==）是比较的是非严格的，允许类型转换。 二、全等于（===）是严格的比较，不允许类型转换。先看等于： //1. == != //比较的是 非严格的,允许类型转换. var num1 = 100; var str1 = "100"; console.log(num1 == str1); //true console.log(u...

利用JS实现在页面中新建一个Excel表格一.功能展示: 二.需求分析: 1.在页面上显示4个输入框,分别输入用户的姓名,邮箱,手机号码,地址. 2.有一个添加按钮,当用户点击添加按钮,会动态添加用户的信息表格 3.实现单数行呈现黄色,双数行呈现红色 三.思路分析: 第一步:先展示如图所示的静态页面: 第二步:需要动态向内容里面添加我的用户信息表格 ...