笑问客从何处来-优快云博客

原创使用encodeURI与decodeURI对json字符串进行转码和解码

使用encodeURI与decodeURI对json字符串进行转码和解码let jsonData = { "code": "0000", "msg": "请求成功", "data": [ { "title": "家网合约产品", "info": [ {

2022-04-28 17:31:35 3065

原创 js获取当前日期

js获取今天日期new Date(new Date()).toLocaleDateString()js获取昨天日期new Date(new Date() - 24*60*60*1000).toLocaleDateString()js获取前天日期new Date(new Date() - 24*60*60*1000*2).toLocaleDateString()…以此类推

2021-08-09 17:59:07 10203

js数组里的对象排序let data=[ {id:1,name:'111111111111'}, {id:3,name:'333333333333'}, {id:2,name:'222222222222'}, {id:9,name:'999999999999'}, {id:7,name:'777777777777'} ];function sortId(a,b){ return a.id-b.id }data.sort

2021-06-15 15:36:55 358 1

原创 TypeScript环境搭建和基本使用

一、安装ypeScriptTypeScript 的命令行工具安装方法如下：//全局安装npm install -g typescript二、编译编译一个 TypeScript 文件：tsc demo.ts它会自动生成一个js文件 demo.js , 再用node运行demo.jsnode demo.js如果你觉得这样会显得麻烦，我们可以安装一个叫做 ts-node 进行编译运行：//全局安装npm install ts-node -g然后运行：ts-node demo.ts

2020-12-14 14:34:04 204

原创 MongoDB数据库的环境搭建和基本使用

一、下载数据库MongoDB数据库官方下载二、安装数据库安装过程中，你可以通过点击 “Custom(自定义)” 按钮来设置你的安装目录，但我们选择第一个选项就行三、启动数据库打开cdm命令窗口，输入 mongod 启动数据库；如果输入指令后显示不是内部或者外部命令，那么就是mongodb数据库的环境变量有问题，你需要去配置一下环境变量，找到mongodb数据库的安装地址，然后复制它bin目录的地址，然后添加到环境变量；然后在cdm命令窗口，输入 mongod 启动数据库。然后你还需要在

2020-12-12 15:24:21 282

原创如何使用Promise对象

一、为什么要Promise对象的？大量的异步操作，如果要按顺序执行，通过回调函数执行的方式，就会造成回调地狱。二、解决方法通过Promise解决回调地狱，然后形成链式调用，一组链式调用只需要一个catch,但多个也可以function test(){ //返回Promise return new Promise((resolve,reject)=>{ //异步处理成功执行resolve 失败执行reject }

2020-12-11 17:23:29 408

原创 react中使用Context实现跨层级组件传递数据

演示demo如下：import React,{Component} from 'react';import ReactDOM from 'react-dom';//创建Context组件，ContextDemo是自己随便命名的，不是固定写法const ContextDemo = React.createContext(); export default class ChiDemo extends Component{ constructor(){ super()

2020-12-07 18:13:17 441

原创 react路由的基本用法（三）----- 路由传参&&其他路由组件（IndexRoute，IndexRedirect，Link）

一、在你的react项目中安装react-router,我这里指定了版本号3.2.0,安装命令如下：npm i react-router@3.2.0二、在项目的scr目录下创建一个文件夹，我这里取名为reactRouter,名字不是规定的，可以随便命名。然后创建文件如下：app.jsximport React from 'react';import {Link} from 'react-router';export default class App extends React.C

2020-11-28 17:08:14 514

原创 react路由的基本用法（二）----- 路由嵌套

一、在你的react项目中安装react-router,我这里指定了版本号3.2.0,安装命令如下：npm i react-router@3.2.0二、在项目的scr目录下创建一个文件夹，我这里取名为reactRouter,名字不是规定的，可以随便命名。然后创建文件如下：app.jsximport React from 'react';export default class App extends React.Component{ constructor(){

2020-11-28 15:35:01 201

原创 react路由的基本用法（一）

一、在你的react项目中安装react-router,我这里指定了版本号3.2.0,安装命令如下：npm i react-router@3.2.0二、在项目的scr目录下创建一个文件夹，我这里取名为reactRouter,名字不是规定的，可以随便命名。然后创建文件如下：app.jsximport React from 'react';export default class App extends React.Component{ constructor(){

2020-11-28 14:25:31 343

原创 js路由原理实现

1. 创建一个文件夹，目录结构如下：2. 项目代码如下：router.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟路由实现</title>

2020-11-27 16:32:56 330

原创 react条件渲染

一、对视图条件进行切换例1：import React from 'react';export default class IfDemo extends React.Component{ constructor(){ super() this.state = { isLogin: true } } clickHeack =()=>{ this.setState({

2020-11-26 14:04:46 114

原创 react中父子组件之间的数据传递&&react生命周期函数

一、父组件传递数据给子组件1.这是父组件this.state中的title数据this.state = { title:"我是Father组件传递过来的数据"}2.这是子组件在父组件的调用（<Children ></Children>），获取父组件this.state中的title数据，然后赋值给一个title属性<Children title={this.state.title}></Children>3.子组件中通过{ this.p

2020-11-25 17:23:09 445

原创 react项目搭建本地开发环境

1.确保你安装了较新版本的 Node.js。2.你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。3.如果npm版本是5.2以上版本，在cmd中输入 npx create-react-app my-app，当前目录下创建一个名为my-app的工程。1.创建一个名为my-app的工程项目npx create-react-app my-app2.进入项目目录cd my-app3.启动项目npm start...

2020-11-17 14:41:14 393

原创 css解决HTML标签内的长串数字、英文字母显示不能自动换行问题

不自动换行前效果：换行后效果：解决办法：加上下面的css word-break: break-word; //或者 word-break: break-all;

2020-10-26 14:45:13 324

原创 vue实现置顶

new.json 数据代码：[ {"id": "G11111","title": "手机","price": 2999}, {"id": "G22222","title": "平板电脑","price": 1999}, {"id": "G33333","title": "笔记本电脑","price": 5999}, {"id": "G44444","title": "树莓派电脑","price": 999}, {"id": "G55555","title": "超级计算机","pric

2020-10-15 14:14:13 2009 2

原创获取url里的参数实现置顶

未置顶前效果图：置顶后的效果图：代码实现：new.json[ {"id": "G11111","title": "手机","price": 2999}, {"id": "G22222","title": "平板电脑","price": 1999}, {"id": "G33333","title": "笔记本电脑","price": 5999}, {"id": "G44444","title": "树莓派电脑","price": 999}, {"id": "G55555","t

2020-10-14 11:37:15 212

原创 js实现无限不间断单方向滑动

代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 800px; height: 500px; border: 1px solid #000000; position: relative; mar

2020-08-14 15:48:52 310

原创通过npm安装http-server实现本地服务器

步骤一：先创建一个文件夹，然后打开cmd命令窗口，用cd命令进入这个文件夹。步骤二：用cd命令进入这个文件夹后，然后通过以下命令来使用npm安装http-server：npm install -g http-server或者：cnpm install -g http-server步骤三：安装完成后，cmd输入http-server即可开启本地服务器。http-server然后把你的项目文件拉入这个文件夹即可运行。...

2020-08-08 15:43:48 9255

原创 html+css实现Loading动画

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .Loading{ width: 150px; height: 150px; position: absolute;

2020-06-16 16:22:11 1064

原创 rem适配移动端

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...

2020-06-10 15:44:34 142

原创 js中for...in和for...of的区别

for…in 语句for…in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）;遍历数组： var arr = [25,58,65,15,48,78,98,23,19]; for(let i in arr){ console.log(i) } //输出： // 0 // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8遍历结果是key,数组下标。得到了下标，也就可以遍历数组了： var arr = [25,58,6

2020-05-27 15:09:29 386

原创 Less入门教程

一、什么是LessLess 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。二、使用方法2.1 ------> Node环境的使用方法安装在服务器上安装Less的最简单方法是通过node.js软件包管理器npm进行，如下所示：$ npm install -g less命令行用法安装后，您可以从命令行调用编译器，如下所示：$ lessc styles.less这

2020-05-19 17:08:55 839

原创 SASS入门教程

一、什么是SASSSASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。二、安装和使用2.1 ---------->> 安装：window下面安装ruby下载地址：https://www.ruby-lang.org/en/documentation/installation/#homebrew下载rubyinstaller.exe 安装就可以了。mac下面安装ruby$ curl -L https://get.rvm.

2020-05-18 16:02:44 277

原创受欢迎的前端UI框架

一、Mint UI官网地址：https://mint-ui.github.io/#!/zh-cnGithub： https://github.com/ElemeFE/mint-ui/由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库，自开源以来，根据社区和团队内部的反馈，修复了一些 bug 并新增了部分组件。二、WeUI官网地址：https://weui.io/Github： https://github.com/weui/weui.gitWeUI 是一套同微

2020-05-14 17:51:41 428

原创 Css单位px，rem，em，vw，vh的区别

单位说明pxpx就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的emem是相对长度单位，相对于当前对象内文本的字体尺寸，根据父元素的大小变化而变化remrem是相对长度单位，相对于跟元素（即 html 元素）font-size 的倍数，不会被它的父元素影响vwvw是相对视口（viewport）...

2020-05-06 15:22:49 285

原创雪花飘落动画

雪花飘落动画，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: b...

2020-04-10 16:57:26 277

原创 flex布局设置最后一行居左对齐

用margin属性隔开，话不多说，请看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ paddin...

2020-03-26 14:17:11 1451

原创 css如何设置滚动条样式

话不多说，请看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设置滚动条样式</title> <style> html{ height: 5000p...

2020-03-26 14:04:20 661

原创 js实现随机抽奖

1.话不多说，直接上代码了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>随机抽奖</title> &lt...

2020-01-10 10:31:17 1502 2

原创 css+js实现3D盒子

话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</title> &...

2019-11-30 14:34:43 633

原创 3D旋转木马相册

话不多说，直接上代码了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: b...

2019-11-29 18:05:33 618

原创 js如何实现无限无缝轮播？

首选，我说一下我实现的思路，如下图所示：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ wi...

2019-11-13 16:18:10 1062 2

原创 css控制文字超出宽度范围以省略号显示

一、单行文本显示不完时出现省略号代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ width: 300...

2019-10-28 16:56:07 417

原创 js实现简单选项卡

js实现简单选项卡直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title></head><style> .box{ width:600px...

2019-10-24 18:23:06 321

原创正则表达式

前言对于正则表达式其实我只知道它的一个概念，以及知道它用来做什么，但具体怎么写正则表达式，我还没有真正的认识和理解，所以通过这次博客说说自己对正则的认识。一、什么是正则表达式？正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。在编写...

2019-10-12 10:57:11 250

原创如何用div实现炫酷3D球体？

话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D球体</title> <style> html{ background: bla...

2019-09-29 16:47:53 1254

原创如何获取对象的长度？

1.我们知道，字符串（string）、数组（array）的长度可以直接用.length来获取，但对象的长度不能用.length获取，用js原生的Object.keys可以获取到，例：var kfc = { ip:11233566, ki:6899, vip:"king", ctf:"kill", "home":"he...

2019-09-25 17:09:42 3557

原创如何去除移动端浏览器滚动条？

话不多说，直接上代码，例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px...

2019-09-25 14:16:30 2764 1

原创博客Start——为什么决定开始写博客

前言一直想写博客，因为时间和自己知识储备的关系，所以一直拖到了现在才开始写。第一篇博客，我主要是谈谈一些自己的感悟，以及为什么要写博客。感悟回想自己的大学三年，在大学我学的专业是计算机应用技术，当时我们学校，我们专业分了两个方向学习，分别是Java和web前端方向，而我那时候选择了前端方向的学习。大学毕业后出来找工作，我发现我们在大学学到的东西远远不够，我们要学的东西还有很多，其实我们这...

2019-07-07 18:08:23 186

空空如也

空空如也