- 博客(77)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 countup.js 的简单使用
countup.jscountup.js 是一个轻量级，无依赖的JavaScript类，通过简单的设置就可以达到数字滚动的效果GitHub官网源码var CountUp=function(target,startVal,endVal,decimals,duration,options){var self=this;self.version=function(){return"1.9.2"};self.options={useEasing:true,useGrouping:true,separato
2021-03-22 10:56:42
8956
原创 art-template 模板引擎的简单使用
模板引擎模板引擎是第三方模块让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。art-template 官网视频教程在浏览器中使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-06-23 02:19:12
478
原创 通俗理解计算机中的 进程 与 线程
cpu计算机的核心是CPU，它承担了所有的计算任务。我们可以把它理解为是一个工厂，时刻在运行。进程 一个工厂有好多个车间，每个车间负责不同的任务。 对于操作系统来说，一个任务就是一个进程（Process），比如打开一个浏览器就是启动一个浏览器进程，打开一个记事本就启动了一个记事本进程，打开两个记事本就启动了两个记事本进程，打开一个Word就启动了一个Word进程。 假定工厂的电力有限（单核cpu），一次只能供给一个车间使用。也就是说，一个车间开工的时候，其他车间都必须停工。就好比你用浏览
2020-05-25 16:38:23
526
原创 JavaScript 中的 隐式转换
隐式转换介绍 在js中，当运算符在运算时，如果 两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算这种无需程序员手动转换，而由编译器自动转换的方式就称为 隐式转换隐式转换规则转化类型运算符说明转换成 String+ ‘任意字符串’+ 任意一边有字符串+ 都认为字符串连接符转换成 Number++/-- (自增自减运算符)+ - * / % (算术运算符) > < >= <
2020-05-24 18:21:24
759
原创 一图看懂 script 标签中 defer 和 async 的区别
浏览器渲染过程中遇到 JS 文件怎么处理？ JavaScript 的加载、解析与执行会 阻塞文档的解析，也就是说，在构建 DOM 时，HTML 解析器若遇到了 JavaScript，那么它会暂停文档的解析，将控制权移交给 JavaScript 引擎，等 JavaScript 引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。 也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script
2020-05-24 02:51:41
486
原创 react 的简单使用
安装脚手架 npm install create-react-app -g //全局安装 react 的脚手架创建项目create-react-app <projectName> //创建一个自定义名称的项目文件说明 index.js 入口文件import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import
2020-05-16 02:21:21
244
原创 react脚手架运行 npm start时报错
当我们在终端输入运行命令时报错npm stratThere might be a problem with the project dependency tree.It is likely not a bug in Create React App, but something you need to fix locally.The react-scripts package provided by Create React App requires a dependency:“webpack
2020-05-15 17:44:09
2541
1
原创 vue 的插件封装方式
我们这里以 封装 Toast 插件为例1. 创建目录结构└── components └── toast ├── Toast.vue └── index.js创建一个 toast 的文件夹，里面包含 Toast.vue 和 index.js<!-- Toast.vue --><template> <div class="toast" v-show='isshow'> <div>{{message}}</div>
2020-05-12 22:36:27
1992
原创 在 vue 中简单封装 better-scroll 并使用
better-scroll 官网链接 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。安装better-sc
2020-05-11 12:53:41
590
原创 CSS / JS 实现粘性头部（滚动到一定位置后固定）
要实现的效果： 当页面滚动到一定位置时，.nav position的值变为 fixedcss 实现.nav { position: sticky; top: 0px;} 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。 在 viewport 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将...
2020-05-08 16:45:28
12312
1
原创 vue-cli 中使用 postcss-px-to-viewport 插件实现移动端自适应
简介 github介绍 如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。 开发时，我们只需关注设计稿的视图宽度对我们的项目进行排版。使用安装使用 npm 安装npm install postcss-px-to-viewport --save-dev在 vue.config.js 中配置参数modul...
2020-05-08 14:51:00
3069
原创 在vue 中使用 axios
官网 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。安装使用 npmnpm install axios -S使用 cdn<script src="https://unpkg.com/axios/dist/axios.min.js"></script>封装 ❌ 不建议直接在每个组件中直接引用 axios ...
2020-05-07 16:53:15
363
原创 如何获取鼠标位置，以及pageX/Y、screenX/Y、clientX/Y和offsetX/Y 的区别
如何获取鼠标位置当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内我们可以先打印一下 事件对象event ,看看里面到底有什么document.onclick = function(event){ console.log(event)}那该用哪个，它们又有什么区别呢？属性描述offsetX / offsetY相对于父盒子的...
2020-04-17 23:48:08
455
原创 如何判断 一个对象是 Array 还是 Object
Array.isArray()只需判断是否为数组时使用var a = [];Array.isArray(a); // truevar a ={};Array.isArray(a); // falseconstructor判断对象时–首推 (可判断 Arrray、Object、Number、Boolean、String)var a = [];a.constructor ...
2020-04-13 20:03:10
1681
原创 ES6中的类，class 讲解
类和对象//创建 class 类class Star { constructor(uname, age) { //constructor里面的this指向的是创建的实例对象 this.uname = uname; this.age = age; } sing(song){ console.log(this.uname + song) }}// 利用 类 创建对象 ne...
2020-04-01 00:04:52
174
原创 Vue 自定义移动端的 滑动事件
核心代码function vueTouch(el,binding,type){//触屏函数 var _this=this; this.obj=el; this.binding=binding; this.touchType=type; this.vueTouches={x:0,y:0};//触屏坐标 this.vueMoves=true; ...
2020-03-31 16:27:32
2066
原创 RequireJs 的简单使用
文章目录RequireJS 是什么引入 RequireJSmain.jsrequire()require.config()模块的写法RequireJS 是什么<script src="1.js"></script><script src="2.js"></script><script src="3.js"></script&...
2020-03-25 18:27:32
749
原创 bootstrap4 的核心 栅格系统 grid
文章目录grid css容器 container行 rowgrid css<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap-grid.css" rel="stylesheet"><link href="https://cdn.bootcss.com/twitter-bootst...
2020-03-24 18:11:19
543
原创 如何获取表单 复选框checkBox 的值
<head> <meta charset="UTF-8"> <title>checkBox</title> <!--引入jquery文件--> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>...
2020-03-23 14:37:58
6675
原创 小程序常用标签列举
小程序类似的 htmlviewdivtextspannavigatoraimageimgswiper轮播图容器swiper-item轮播图子容器
2020-03-20 15:02:57
865
原创 vue-cli 中 /sockjs-node/info?t= net::ERR_SSL_PROTOCOL_ERROR 解决方案报错
sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。解决找到/node_modules/sockjs-client/dist/sockjs.js找到代码的 1605行把这行代码注释掉try { //self.xhr.send(payload); } catch (e) {...
2020-03-12 21:47:43
5506
1
原创 小程序如何获取 url 参数
加入我们输入的 url 是 demo01/demo01?type=1那我们如何获取 参数type 呢？onLoad在生命周期 onLoad 中还是比较简单的，直接可以在 onLoad 中的参数中获取 onLoad: function (option) { console.log(option) // {type: "1"} }onShow在生命周期 onShow 中并...
2020-03-07 17:57:50
5623
原创 微信常用开发功能
获取用户信息 可以从 bindgetuserinfo 回调中获取到用户信息获取用户收货地址 点击取消后再次点击讲不再 出现弹框，可通过 wx.openSetting 引导用户开启权限...
2020-03-07 15:46:57
238
原创 浏览器存储技术 localStorage 、sessionStorage
文章目录localStoragesessionStorage区别 HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地...
2020-03-04 14:10:16
297
原创 微信小程序 请求数据
小程序发起网络请求 需用到 wx.request(Object object)wx.request({ url: 'https://URL', data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header succ...
2020-03-02 23:09:39
563
原创 CSS中 字体大小随屏幕大小自适应变化
1、通过媒体查询的方式@media (min-width:0px){ html{font-size:12px;}}@media (min-width: 320px){ html{font-size:12px;}}@media (min-width: 340px){ html{font-size:13px;}}@media (min-width: 360px){...
2020-03-02 15:21:50
21055
原创 分享常用的样式重置css
/* reset.css */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */fieldset, le...
2020-03-02 14:10:27
339
原创 创建项目 并与 github 关联流程
1、首先，你得有一个项目文件，没有的话自己创建2、然后在 gitHub 中创建远程仓库3、输入仓库的基本信息后 gitHub 会提示你怎么做对于我们刚才的项目，我们可以先手动 建个 md 文件（不建也可以，一般项目都会有 md 文件用于对项目的介绍）由于我们的项目之前没有进行 git 的任何操作，所以我们先在项目目录中右击打开git然后输入 git init 对我们的项目进行初始...
2020-03-02 11:43:51
366
原创 微信小程序 事件方法传参
事件方法传参<button bindtap="add" data-agr="hello">+</button> <!-- 参数不能写成 add(23) -->Page({ data: { num: 20 }, add: function(e){ const val = e.currentTarget.dataset.agr ...
2020-03-01 16:27:31
405
原创 微信小程序 注册账号 和 创建初始项目
注册账号 访问官网小程序注册获取APPID开发工具 严格来说，微信小程序支持所有的开发工具，但是从观察效果只能用微信的开发工具微信小程序开发工具下载地址扫码登陆 安装完成后打开开发者工具，用微信扫码登陆创建项目 选择小程序创建项目，填写路径和APPID（或者通过测试号创建） 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS , 以及 JavaScript ,...
2020-03-01 16:04:27
698
原创 小程序 input 双向数据绑定
input 双向数据绑定<input type="text" bindinput="change" /> <!--bindinput方法 触发 change函数 --><view> {{num}}</view>Page({ data: { num: 20 }, change: function(e) { ...
2020-03-01 15:53:55
556
原创 常用的 JS库 总结
文章目录moment.jsqs.jswow.jshtml2canvasmoment.js进入官网 javascript 日期处理库 添加中文语言： https://blog.youkuaiyun.com/zhouyingge1104/article/details/50596420qs.js qs是一个 url参数转化 (parse和stringify)的js库let url = 'http:/...
2020-02-29 15:01:59
1594
原创 微信小程序生命周期
文章目录小程序生命周期onLauchonShowonHideonErroronPageNotFound页面生命周期小程序生命周期onLauch 应用 第一次启动时 就会触发的事件 一般用于第一次启动时，获取用户个人信息onLauch() { console.log("onLauch")}onShow 应用 被用户看到时 触发 一般用于 对应用的数据或者页面效果进行重置o...
2020-02-29 00:10:51
187
原创 bootstrap 表单验证神器 bootstrapValidator
引入BootstrapValidator插件 BootstrapValidator插件依赖于 jQuery 和 Bootstrap 3 (所以之前要引入jQuery 和 Bootstrap 3) 引入 js 和 css 文件<link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstra...
2020-02-26 16:27:28
247
原创 bootstrap 模态框显示后页面偏移问题
body.modal-open { overflow-y: auto !important; padding-right: 0 !important;//解决了右边框每次加17px问题}
2020-02-26 15:15:16
1103
1
原创 防抖 和 节流 详解
防抖（debounce） 当 javascript 中函数触发的频率特别高时，我们需要限制它触发的评率。（好比如我们玩游戏的时候，每次释放完一次技能都会进入冷却时间，这个冷却的机制就是所谓的防抖）比如：监听浏览器滚动事件，返回当前滚条与顶部的距离function showTop () { var scrollTop = document.body.scrollTop || doc...
2020-02-21 16:50:51
4357
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人