- 博客(47)
- 资源 (4)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 百度地图的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <title>浏览器定位</title> <style> html,body,#allmap{ .
2022-02-13 19:53:26
329
原创 js中鼠标事件
click：单击事件。dblclick：双击事件。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousemove：鼠标移动事件。mouseover：移入事件。mouseout：移出事件。mouseenter：移入事件。mouseleave：移出事件。contextmenu：右键事件。mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover
2022-02-13 19:20:32
13195
原创 Vue常用的插件集合
element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用eme - 优雅
2022-02-09 20:04:21
6672
原创 webpack的基础用法
1.关于webpackwebpack:对项目里面的资源进行打包，不仅对模块化写法的代码可以进行大宝，对图片，css，js，json，less，html等资源打包成静态资源，但必须是配合各种loader进行打包，并且也可以把资源之间依赖关系一同打包在内，webpack还可以搭建本地服务器，设置热更，也可以设置代理服务器。1安装webpack webpack-cli -g,2在单独使用时可以把webpack webpack-cli -s 装到本地项目.webpack:webpack 提供核心功能.webpa
2021-11-25 21:49:50
347
原创 cookie，session和token三种验证机制
1.cookiecookie的特点1 :服务器生成cookie可以设置cookie有效期等配置，把cookie返回给客户端，每次请求都会把cookie追加请求头里面返回给服务器2：cookie存储在浏览器端，不安全，3：浏览器关闭之后，再次打开会记录之前的状态Cookie的使用//先随机定义一个字符串作为cookie的值var userInfo = {} // 作为cookie的值function getRandom(){ var str = "0123456789qwe.
2021-11-24 19:41:37
1389
原创 es6新增
es6是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.let关键字定义变量var 关键字定义变量的时候，全局变量和局部变量let 关键字定义变量的时候，全局的变量和局部变量，块级变量var a = 10; let b = 20 // 全局变量;(function (){ var a = 20; let b = 30 //局部变量}()...
2021-11-24 19:17:21
430
原创 Node.js中的express项目生成器
1.express简介express项目生成器，是一个nodejs程序，可以快速搭建一个express项目。安装指令是 npm install express-generator -g全局安装，使用命令：express [项目名] -v项目根目录下有4个自带的文件夹bin:存放项目源代码的文件夹。public:项目静态文件夹。routers:存放路由的文件夹。views:存放模板的文件夹。注意：创建的项目中没有node_modules文件夹，但是在packag...
2021-11-15 22:20:42
1125
原创 Node.js实现登陆注册
1.服务器端在项目里创建一个json文件用来存储数据，通过express创建服务器对象，fs模块对文件进行读写。运用post请求代码如下：var express = require('express')var fs = require("fs")var app = express()app.use(express.static("www"))app.use(express.urlencoded({extended:false}))// 先获取user.json里面的数据和req.
2021-11-12 21:35:38
4697
5
原创 Node.js的http模块的使用
http模块简介http模块中封装了一个HTTP服务器和一个简易的HTTP客户端：使用http.Server类创建一个基于事件的HTTP服务器，而使用http.request()和http.get()方法则可以作为HTTP客户端向服务器发起请求。 1、http.Server 类：用于创建HTTP服务器，使用时需要先实例化； 2、http.ClientRequest 类：该对象在 http.request() 内部被创建并返回。它表示着一个正在处理的请求； 3、http.Incoming
2021-11-11 22:45:51
2909
原创 利用echart创建雷达图
html代码： <div id="box" style="width: 100vw;height: 600px;background-color: gray;"></div>引入jQuery文件和echarts第三方，下面是jQuery代码：var echart = echarts.init($("#box")[0]) var option = { legend:{ bottom:0,
2021-11-10 19:17:07
667
原创 文件上传带进度条版本
css代码：.progress{ width: 300px; border: 1px solid black; border-radius: 10px; height: 10px; margin: 10px 0; overflow: hidden; } .progress>div{ width: 0
2021-11-09 23:33:49
73
原创 上传文件的几种方式
一、拖拽上传文件css代码： .box { width: 300px; height: 300px; border: 1px solid red; } #ddd { width: 20px; height: 20px; border: 1px solid #000; } .o
2021-11-08 21:41:02
1102
原创 Promise
一、promise状态的改变状态指的是实例对象中的一个属性 PromiseState1.pending 未决定2.resolved/fullfilled 成功3.rejected 失败pending变为resolved或者pending变为rejected。只有这两种状态，并且promise对象只能改变一次，无论变为成功还是失败都会有一个结果数据。成功的结果数据一般称为value，失败的结果称为reason。二、promise对象的值实例对象中的另一个属性 PromiseRes.
2021-11-07 21:01:49
1163
原创 解决代码阻塞问题
把复杂业务逻辑放在分线程里面或者异步任务里面.解决代码阻塞。1 在主线程里面创建分线程对象2 在主线程里发送消息 w.postMessage()3 在分线程监听onmessage事件，在时间函数通过ev.data获取数据4 在分线程发出结果，通过postMessage()发消息给主线程5 在主线程接收数据 w.onmessage事件，在事件函数通过ev.data获取数据下面是一个webwork案例HTML文件<!DOCTYPE html><html l.
2021-11-03 21:28:25
436
原创 Promise的常用API和解决异步的方法
promise的常用APIPromise.all() 并行执行所有的异步请求，当所有的请求都返回成功结果时，Promise对象的结果则变成resolved成功；有一个不成功则失败，Promise对象的结果则变成rejected失败。Promise.prototype.catch() 请求出现错误或异常时被catch捕获。相当于$.AJAX()中的error回调函数。Promise.prototype.finally() 不论请求是否成功，finally都会执行。相当于$.AJAX()中的comp..
2021-11-03 21:16:01
283
原创 关于canvas的简单动画
线性动画：原理就是清空---绘制---清空---绘制 在俩次绘制的过程中，只需要改变绘制的起始点的一个坐标就行。代码如下html代码：<canvas id="c1" width="600" height="600" style="border:1px solid red"></canvas>js代码： <canvas id="c1" width="600" height="600" style="border:1px solid red">&l.
2021-11-01 19:28:35
327
原创 canvas实现刮刮乐案例
效果图HTML代码： <div class="ggk"> <span id="span">200元</span> <canvas id="canvas"></canvas> </div>css代码： .ggk { width: 200px; height: 100px; borde.
2021-10-28 22:45:42
106
原创 验证码案例
css代码： input{ width: 200px; height: 32px; border: 1px solid #000; box-sizing: border-box; } #c1{ vertical-align: middle; box-sizing: border-box; ...
2021-10-28 19:16:20
542
1
原创 3D轮播图
主要有平移和旋转构成3d效果的轮播图，小白一只，不足之处还请大家多多指教，代码如下css代码： *{ padding: 0; margin: 0; } .box{ position: relative; width: 100%; height: 100%; top: 200px; margin: ..
2021-10-27 19:30:26
1915
原创 css3实现立方体
css代码： body{ perspective: 600px; } .cube{ width: 100px; height: 100px; margin: 100px auto; position: relative; /* 子元素继承3d效果 */ transform-style: p...
2021-10-26 19:18:44
70
原创 jQuery查找 笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-10-15 12:05:07
95
原创 js抽奖案例
简单的抽奖案例，效果已实现，但还存在很多的不足之处，新人初写代码，望大家指点html代码:<button id="start">开始</button> <button id="stop1">停止</button> <div class="warp"> </div>css代码: * { margin: 0; padding: 0;
2021-09-27 14:01:08
220
前端使用mapbox添加pbf矢量切片
2022-08-17
js中的事件和循环机制
2021-09-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人