2020年10月_明天自己会更好

原创小程序总结1

小程序总结11微信开发者工具下载地址2AppID的获取3使用微信开发者工具创建项目4重要配置5相关单位6创建新页面7事件8点击事件1微信开发者工具下载地址微信开发者工具2AppID的获取在微信公众平台注册小程序3使用微信开发者工具创建项目4重要配置app.json ---- 全局的公共配置:是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。project.config.json ---- 记录开发者工具配置信息例如界面颜色、编译配置等等。

2020-10-30 00:11:49 159

原创 vue中$router和$route的区别

vue中$router和$route的区别1效果图2结论1效果图2结论从图中可以得知router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。同样获取到query值 $router需要向内3层 $route只需要1层即可

2020-10-24 15:31:45 216

原创前端时间格式转换2020-10-08T0:03:09.478Z

前端时间格式转换1效果2方法一：原生方式3方法二：函数方式4方法三：使用自定义过滤器1效果2方法一：原生方式根据图1获取的字段createdAt let time=new Date(+new Date(new Date(this.userInfo.createdAt).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 3方法二：函数方式function getTim

2020-10-19 16:08:56 735 1

原创 jQuery总结1

jQuery总结1一、jq入门一、jq入门1.本地引用<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>2网址引用<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>...

2020-10-18 20:28:26 102

原创 JavaScript find和findIndex的区别

JavaScript find和findIndex的区别1对Array数组操作2对复杂数组（包含对象的）操作总结1对Array数组操作find()方法const arr=[1,2,4,8,12];var va1=arr.find(value=>value>8);console.log(va1); //12arr = [1, 2, 4, 8, 12]var v2 = arr.find((value, index, arr) => { return index ==

2020-10-16 09:51:57 1079

原创 js 正则总结

js正则总结1正则的创建2正则的方法3字符串方法4元字符5量词：6修饰符7 数字字符验证1正则的创建var reg=new RegExp('要匹配的元素','修饰符')var reg=//;2正则的方法test() //input框里的值通过test方法去匹配一个正则，匹配成功返回true否则返回false。exec() //方法用于检索字符串中的正则表达式的匹配。3字符串方法1)search():搜索,返回第一次搜索到的元素的下标，找不到返回-12)match()：匹配,返回匹配成

2020-10-11 19:50:34 235

原创原生 js小案例

原生 js小案例1效果图2html3js4css1效果图点击12个月份中的任意一个，底部就会显示对应月份2html<div id="dv1"> <div id="dv2"></div> </div>3js<script type="text/javascript"> var mydv1 = document.getElementById("dv1"); var xd = document.getElements

2020-10-11 19:05:48 830 1

原创 vue移动端使用nprogress进度条详细操作

vue移动端使用nprogress进度条详细操作1前期准备2指令：3在项目中引入4用法1前期准备准备一个新配置好的vue脚手架2指令：npm install --save nprogress3在项目中引入在路由的index.js中引入要使用的nprogress,也可以在main.js中引用我的在index.js中import NProgress from 'nprogress'import 'nprogress/nprogress.css'4用法NProgress.start();

2020-10-07 09:42:41 1447

原创 vue移动端项目顶部动态变化(插槽的应用)

vue移动端项目顶部动态变化插槽的应用1效果图加前引2创建匿名插槽2使用匿名插槽4创建具名插槽5使用具名插槽1效果图加前引一般我们写移动端项目时会遇到这种需求，当点击底部的关于页面，顶部的位置也要显示与之对应，今天为大家介绍一种简单的方法!使用插槽分两种1只需要改动一个值只需要用到匿名插槽2组要改动多处最好用到具名插槽2创建匿名插槽创建一个头部组件Head.vue，暂与About同级目录，图片右侧为插槽部分，右侧使用插槽的位置2使用匿名插槽操作About页面1导入import He

2020-10-07 00:15:14 1524 2

原创 JavaScript三种三个系统对话框

JavaScript三种三个系统对话框1alert()2confirm()3prompt()1alert()用于显示带有一条指定消息和一个确定按钮的警告框2confirm()用于显示一个带有指定消息和确定及取消按钮的对话框。语法：confirm(message)如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。3prompt()用于显示可提示用户进行输入的对话框。语法：prompt(text,defaultText)

2020-10-05 23:38:36 431

原创 JavaScript BOM

JavaScript BOM1浏览器对象模型 (BOM)2Window 对象3Window 函数4window 时间等待与间隔函数4Location 对象5Navigator 对象6Screen 对象7History 对象8DOM对象1浏览器对象模型 (BOM)浏览器对象模型（Browser Object Model）BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法

2020-10-05 23:32:46 158

原创原生 js 九九乘法表

原生 js 九九乘法表1效果图2html1效果图2html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var str = ''; for(var i = 1; i <

2020-10-05 23:04:23 287

原创原生js 百度搜索小案例

原生js 百度搜索小案例1效果图2css3html4js1效果图2css <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } #pop { width: 350px; border: 1px solid red; } #pop ul { margin: 10px; pa

2020-10-05 00:37:37 391 1

原创 JavaScript中DOM

JavaScript中DOM1什么是DOM2DOM 节点3DOM 节点关系4获得body名5四者区别1什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。2DOM 节点在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。HTML 文档中的所有内容都是节点：整个文档是一个文档节点 docu

2020-10-04 23:59:49 167

原创 vue 移动端配置

vue 移动端配置1安装flexible2项目中导入（main文件中引入）3 viewprot设置4总结1安装flexiblenpm install lib-flexible --save2项目中导入（main文件中引入）import 'lib-flexible'3 viewprot设置<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,m

2020-10-04 23:53:44 230

原创移动端新增选择器

移动端新增选择器1新增选择器2比较：nth-child与nth-of-type的区别？1新增选择器选择器：例子描述element>elementdiv>p选择 <div>的子元素<p> 。element+elementdiv+p选择在 <div> 元素之后的相邻的 <p> 元素。element~elementdiv~p选择在 <div> 元素之后的所有 <p> 元素。

2020-10-04 23:31:53 116

原创移动端总结新增页面标签

移动端总结新增页面标签1新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）2功能标签：3兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)4兼容代码（html5shiv.min.js）1新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）标签名标签案例页面头部标签 header页脚底部标签 footer导航 nav 划分区域 section

2020-10-04 23:05:00 254

原创原生 js 三级联动小例子

原生 js 三级联动小例子1效果图2html3js4总结1效果图2html<body> <div id="category"></div></body>3js<script> /*使用 HTML DOM 的方式实现联动菜单*/ var categories=[ {"id":10,"name":'男装',"children":[ {"id":101,"name":'正装'}, {"id":10

2020-10-04 17:54:30 261

原创原生 js 轮播图小案例内含详细注释

原生 js 轮播图小案例1效果图2html3js4css5结构目录1效果图2html<div class="all" id='box'> <div class="screen">  <ul> <li><img src="images/1.jpg" width="500" height="200" /></li> <li><img src=

2020-10-04 17:45:08 257

原创原生 js 类手风琴小例子

原生 js 类手风琴小例子1效果图2html3css4js5总结1效果图2html <body> <div class="panel" id="panel"> <h4 class="panel-title" id="panel-title">1 《抉择》</h4> <div class="collapse" id="One"> <p></p>

2020-10-04 17:29:15 224

原创原生js 小球随键盘移动事件小案例

原生js 小球随键盘移动事件小案例1效果图2html和js3css4总结1效果图2html和js<body> <div id="ball"></div> <script> // 获取小球 var ball = document.getElementById('ball'); // 设置小球移动的步径 var step = 2; // 设置定时器标志 var run = false; // runing 计

2020-10-04 17:16:22 515 1

原创原生js方大镜小例子

原生js方大镜小例子1效果图2html3css4js5结构目录6图片7总结1效果图在图片区域选中左侧出现放大区域2html<body> <div id="min_tu"> <img src="imgs/3.jpg" /> <div id="fdj"></div> </div> <div id="list"> <ul> <li><img src=

2020-10-04 17:05:41 150

原创 JavaScript数组

JavaScript数组1什么是JavaScript数组2调用构造函数Array()是创建数组的另外一种方法。可以用三种方式调用构造函数。3数组元素的读和写3数组长度4检测5数组元素的添加和删除6push()7pop()8join()9reverse()10sort()11concat()12slice()13 splice()14 unshift()和shift()1什么是JavaScript数组数组是值的有序集合javascript数组是无类型的；数组元素可以是任意类型，并且同一个数组的不同元素也

2020-10-04 00:11:30 459

原创 JavaScript中String

JavaScriptString1charAt()2charCodeAt()3fromCharCode()4replace()5substring()6substr()7split()8concat()9slice()10indexOf()11lastIndexOf()12toLowerCase()13toUpperCase()1charAt()charAt() 方法可返回指定位置的字符str.charAt(index)index必需。表示字符串中某个位置的数字，即字符在字符串中的下标注释：字符

2020-10-03 23:55:04 360

原创 JavaScript函数

JavaScript函数1什么时JavaScript函数2定义函数方式3函数调用4参数的分类5函数变量作用域1什么时JavaScript函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。简而言之：什么是函数？函数是一组可以随时随地运行的语句。函数是ECMAScript的核心作用：使程序变得更简短而清晰有利于程序维护可以提高程序开发的效率提高了代码的重用性(复用性)2定义函数方式1函数声明function add( x,y ){ return x+y;

2020-10-03 23:42:45 178

原创 JavaScript语句

JavaScript语句1语句的概念2function3条件语句4if else5else if6switch7for8while9do while1语句的概念表达式在javascript中是短语，那么语句就是javascript整句或命令。正如英文是用点号作结尾来分隔语句，javascript语句是以分号结束。javascript程序无非就是一系列可执行语句的集合。分号 ;分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条

2020-10-03 23:31:37 268

原创 JavaScript表达式与运算符

JavaScript表达式与运算符1什么叫JavaScript表达式2JavaScript运算符与表达式3运算符的优先级4运算顺序图5比较运算符6赋值运算符7逻辑运算符（用于测定变量或值之间的逻辑）8其他运算符9void运算符的应用场合10逗号运算符（，）1什么叫JavaScript表达式将同类型的数据（如常量、变量、函数等），用运算符号按一定的规则连接起来的、有意义的式子称为表达式2JavaScript运算符与表达式1.运算符:算术运算符、赋值运算符、自减、自增表达式、逗号运算符、关系运算符、逻辑

2020-10-03 23:16:53 446

原创 js的数据类型

js的数据类型1什么是JavaScript变量2JavaScript变量起名注意事项3数据类型4简单数据类型与复杂数据类型的分类1什么是JavaScript变量答:变量：值可以改变的量称为变量；变量占据一段内存，通过变量名字可以调用内存中的信息。JavaScript中的变量没有类型，即弱类型语言。var a=1；var b='a'；var代表声明变量（声明就是创建的意思）。var是variable的缩写a、b都是变量名（可以任意取名）必须使用字母或者下划线开始1,'a’都是变量值，1是数字

2020-10-03 22:46:31 266

原创如何在HTML中使用JavaScript

如何在HTML中使用JavaScript1行内2内部嵌入3外部嵌入：1行内 <a href="https://www.baidu.com" onclick="alert('您将要跳转到百度')">百度</a>2内部嵌入script元素：向HTML页面中插入javascript的主要方法。charset:可选。表示通过src属性指定的代码的字符集defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。相对于告诉浏览器立即下载，但延迟执行（只对外部脚本文件

2020-10-02 23:59:21 471

原创 js初级入门

js初级入门1Javascript与java相同吗？2Javascript很难学吗？3Javascript能做什么？4什么是javascript？5JavaScript 是什么6Javascript的组成7JavaScript语言的特点8JavaScript 的组成9学习javascript需要啥？1Javascript与java相同吗？答：javascript与java没有任何关系，他们本身就是俩种语言取成差不多的名字，主要是由于商业上的原因（完全是想要抱大腿！）。javascript是一种客户端脚

2020-10-02 23:49:15 197

qq_40770473的博客