前端_小智-优快云博客

原创 JQuery轮播图效果

最近发现面试时常会要求写一段轮播图的效果；HTML部分<div id="box"> <div id="img"> //此处放图片 <img src="../img/photo1.jpg" alt=""> <img src="../img/photo2.jpg" alt=""> <img src="../img/photo3.jpg" alt=""> <img src="../img/photo4.jpg"

2020-08-16 21:07:38 294

原创 js中常见的算法面试题

1.超过范围的两个大整数相加主要思路：将数字转换为字符串，每个字符串按位相加function bigNumberAdd(number1, number2) { let result = "", carry = false; number1 = number1.split(""); number2 = number2.split(""); while (number1.length || number2.length || carry) {

2020-08-09 23:34:26 1494

原创 Vue路由以及路由钩子函数

vue路由模式vue路由有两种模式，hash和history，默认为hash模式hash：URL地址中带有‘#’，如http:localhost:8080/#/home, hash 的值为#/home,它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。原理：onhashchange事件，可以在window对象上监听这个事件const router = new VueRouter({ mode: 'hash',

2020-08-08 15:10:29 406

原创 JavaScript中的reduce()用法

reduce()方法对数组中的每一个元素执行一个reducer函数(由你提供)，从而得到一个单一的输出值。reduce() 方法将一个数组中的所有元素还原成一个单一的输出值，输出值可以是数字、对象或字符串。reduce() 方法有两个参数，第一个是回调函数，第二个是初始值。回调函数回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。Accumulator（累加器）——累加器累加回调函数的返回值。Current Value（当前值）

2020-08-02 20:50:41 582

原创 nodeJs封装MongoDB的增删查改

对MongoDB的封装，主要使用express，通过npm下载mongodb包。在这里我们使用的是2.0.43版本的mongo数据库。db.js封装层const express = require("express");const MongoClient = require("mongodb").MongoClient;// 连接数据库//使用mongodb创建好数据库后，直接引用url,封装链接。function _connectDB(callback){ let url = "

2020-08-02 20:37:15 394

原创几个npm快速开发技巧

运行npm init或npx create- response -app等命令几乎构建js项目的首选方式，无论是为客户端或服务器端，还是桌面应用程序。npm不仅仅是初始化项目或安装包，从长远来看，即使节省少量的时间也会产生显著的影响。基本快捷方式安装 — 常规：npm install，简写：npm i。测试 — 常规：npm test，简写：npm t。帮助 — 常规：npm --help，简写：npm -h。全局标志 — 常规： --global，简写：-g。保存为开发依赖

2020-07-26 22:46:24 205

原创回顾CSS calc()函数的用法

css3 的 calc() 函数允许我们在属性值中执行数学操作。比如使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}为什么是 calc在sass中遇到类似问题的情况.foo { width: 100px + 50px;}$width-one: 100px;$width-two: 50px;.bar { width: $width-one + $width-two;}首先，cal

2020-07-26 22:45:05 262

原创回顾--css3中的flexbox布局

1. 容器和容器里的元素flexbox布局的两个最重要的概念是容器(蓝色)和容器里的子元素(红色)。在本文的例子中，容器和它的子元素都是div。横向布局为了实现flex布局，我们需要在容器的CSS里添加如下代码：.container { display: flex;}效果如下：对于容器里面的子元素，我们什么都不需要做。它们会自动的按横坐标一字排开。纵向布局在上面的演示中，缺省排列是沿着横坐标方向的，还有一个方向是纵坐标，这个坐标轴的概念在理解flex布局中非常重要。当我们在容

2020-07-20 00:14:02 243 1

原创 JS中的this指向问题

2020-07-19 20:23:39 156

原创节流防抖的原理与基本实现

节流防抖的原理与基本实现使用场景防抖节流总结使用场景在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。防抖含义：持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。持续触发scroll事件时，并不执行handle函数，当100

2020-07-12 20:35:53 3593

原创懒加载的基本原理与实现

懒加载其实就是延时加载，即当对象需要用到的时候再去加载。懒加载的优点：不需要将对象的实例化全部写到viewDidLoad中，可以简化代码，增强代码的可读性对象的实例化在getter方法中，各司其职，降低耦合性对系统的内存占用率会减少；基本原理：一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进

2020-07-11 16:11:06 1113

原创 H5五大存储方式的总结

1、本地存储localstorage存储方式以键值对（key-value）的方式存储，永久存储，永不失效，除非手动删除大小每一个域名5M支持情况：IE9 localstorage不支持本地文件，需要将项目部署在服务器才可以支持。常用的API:getItem ：取记录setItem ：设置记录removeItem：移除记录key ：取key所对应的值clear：清除记录存储的内容：数组、图片、json、样式、脚本等等，只要是序列化成字符串的内容都可以存储。2、本地存储ses

2020-07-05 22:56:24 1182

原创 es6里的Map数据结构

含义和基本用法ES6中新增了Map数据结构。Map结构类似于对象，也是键值对的集合，它存储的形式就是键值对。Map中”键“的范围不限于字符串，各种类型的值或对象都可以当作键。对象存储的问题：键名只能是字符串；获取数据数量的时候不方便键名容易和原型上的名称发生冲突const m = new Map(iterator);Map中传递的参数一般为二维数组形式，数组的子数组里面只能有两项，第一项为键，第二项为值。const m = new Map([ ['m',857], ['a',11

2020-07-03 10:33:47 258

原创 ES6 解构赋值知识点归纳

解构赋值ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructing）。例如：let [a,b,c] = [1,2,3];本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果结构不成功，变量的值就等于undefined。另一种情况是不完全解构，即等号左边的模式只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。数组的解构赋值let [a,b,c] = [1,2,3];//不完全解构let [a,[b],d

2020-06-28 10:22:54 202

原创 Symbol的使用场景

Symbol的使用场景使用Symbol来作为对象属性名(key)通常定义或访问对象的属性时都是使用字符串:let obj = { abc: 123, "hello": "world"}obj["abc"] // 123obj["hello"] // 'world'在利用Symbol以后定义和访问对象的属性：const PROP_NAME = Symbol()const PROP_AGE = Symbol()let obj = { [PROP_NAME]: "刘卿"

2020-06-28 09:03:30 1536

原创 ES5_保护对象

JS对象中的普通属性随时可以被修改、添加新属性、也可以被随时删除。主要是因为对象的属性默认是可以操作的。通过设置对象属性的可操作性，从而达到保护对象和保护属性保护属性命名属性：即可以用**.**访问的属性；数据属性：即直接存储属性值的属性。属性的四大特征：value：实际存储的属性值；writable: 是否可修改默认为true；enumerable: 是否可被for in遍历到默认true。仅能控制for in，无法控制.的访问configurable: 是否可修改其它特性是否可删

2020-06-21 23:44:44 200

原创 JavaScript的闭包到底有什么特别之处？

什么是闭包？闭包是可以访问其定义的“外部"范围的函数，因此，即使闭包函数终止，它也可以访问外部作用域中的值。例子：function takeOne(){ let i = 0; return function incrementFunction(){ return i++; }}上面的代码表示一个函数返回另一个函数。但是，调用takeOne并获取后incrementFunctioon，即使已经终止incrementFunction,takeOne也会记住局部变量takeOne。使用

2020-06-21 14:08:42 306

原创 Ts与Js的区别

上一篇文末介绍到Ts程序代码与编译过后的JS文件的区别异同:js代码：Ts代码：代码中最明显的区别就是Ts在定义字符串前，多了一个String.这就是其中最大的不同：TS必须指定数据类型js有的类型：boolean类型、number类型、string类型、array类型、undefined、nullts多出的类型tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）特别的类型void类型（没有任何类型）表示定义方法没有返回值never类型：是其他类型

2020-06-13 15:31:09 26486

原创 Typescript的安装及使用

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。在简单阅读TS的说明文档后，开始进行TS的环境配置与安装。官方网站：typescript官网配置环境，安装好node.js，使用npm安装Node.js安装好后，可以打开命令行工具，同时按下win+R，然后输入cmd就可以打开，打开后输入node -v如果看到版本号说明已经安装成功了安装TypeScript包在命令行窗口继续输入如下命令：np

2020-06-13 15:04:35 472

原创 PHP与JS的不同

什么是PHP？答：一种服务器端的 HTML 脚本/编程语言,是一种简单的、面向对象的、解释型的、健壮的、安全的、性能非常之高的、独立于架构的、可移植的、动态的脚本语言。是一种广泛用于 Open Source（开放源代码）的尤其适合 Web 开发并可以嵌入 HTML 的多用途脚本语言。它的语法接近 C，Java 和 Perl，而且容易学习。该语言让 Web 开发人员快速的书写动态生成的网页。PHP是一种脚本语言。编程语言：在执行前需要先进行编译的语言脚本语言：是一种解释型语言PHP能做什么？答：P

2020-06-06 15:20:24 144

原创 DOM事件的三个阶段

事件发生后，会在DOM树上传播，DOM事件流分为三阶段：捕获，目标，冒泡如下图：事件的发生：三个阶段捕获：由外向内，记录各级元素上绑定的相同事件 IE8中无此阶段目标触发：首先触发目标元素上的事件处理函数冒泡：按照捕获顺序的反向，有内到外，依次触发各级父元素绑定的事件处理函数在事件处理中目标阶段被看做冒泡阶段的一部分如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。EventTarget.addEventListe

2020-06-06 15:09:19 400

原创在浏览器地址栏输入一个URL后按回车后，会发生什么？

首先在地址栏输入地址按下回车以后：1、DNS进行域名解析：对 www.taobao.com 这个网址进行 DNS 域名解析工作，得到对应的 IP 地址Chrome浏览器会首先搜索浏览器的DNS缓存，看自身的缓存中是否有www.taobao.com对应的条目，而且没有过期，如果有且没有过期则解析到此结束。如果浏览器自身的缓存里面没有找到对应的条目，那么Chrome会搜索操作系统的DNS缓存，如果找到且没有过期则停止搜索解析到此结束。如果在Windows系统的DNS缓存也没有找到，那

2020-05-31 22:28:41 423

原创 fullPage.js(全屏滚动插件)

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。主要功能：fullPage.js的主要功能有：支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。使用方法：引入方式：可以直接下

2020-05-31 22:10:49 957

原创 jQuery的基本动画

一、基本效果显示与隐藏show()显示：根据hide()方法记住的display属性值来显示元素。无参版本 - 不具有动画效果show(speed,callback)有参版本 - 具有动画效果speed - 设置动画执行的时长,单位为毫秒三个预定义值 - slow|normal|fastcallback - 当动画执行完毕后执行的函数hide() - 隐藏　将该元素的display样式改为 “none”。无参版本 - 不具有动画效果hide(speed,callback)有参版本

2020-05-25 00:44:33 153

原创 jQuery自定义动画方法animate()

animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。用法：$(selector).animate({styles},speed,easing,callback);参数说明：styles:styles用来设置对象属性值的目标值，即需要将属性值变成什么状态或者大小。设置格式一个属性对应一个属性值。如果同时设置多个属性值，需要用逗号连接。如果属性值是数字型的，可以不加单位，如{

2020-05-24 23:14:42 1272

原创 jQuery----attr()方法

在js中设置节点的属性与属性值用：setAttribute（），获得节点的属性与属性值用：getAttribute（）在jQuery中用attr(）方法获取和设置元素属性attr()方法有四个表达式attr（属性名）获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined ）attr(属性名，属性值)设置属性的值（为所有匹配的元素设置一个属性值。）attr（属性名，函数值）设置

2020-05-17 09:14:44 453

原创利用 jQuery实现省市县三级联动

在没有接触jQuery之前，写三级联动菜单都是利用原生JavaScript来实现。在接触jQuery之后，感觉上比JavaScript使用起来更加方便。在写demo过程中又接触到了三级联动菜单，换用jQuery来写三级联动。本篇文章中的数据没有使用Ajax,数据不是从数据库动态读取的。只是尝试用jQuery来改变以前用原生JS写三级联动的方法。省市县的数据用三维数组创建，定义一个JS文件来存放。由于数据量较大，此处不做展示。文件名为 ProvinceCity.js。页面元素中设置一个div,id为t

2020-05-17 08:46:56 1168

canvas飞机大战.zip

2048游戏.rar

空空如也