- 博客(57)
- 资源 (1)
- 收藏
- 关注
原创 微信小程序处理多数据显示方案
微信小程序处理多数据显示方案1首先回忆下生命周期2页面加载数据3方案一:配合onReachBottom函数1首先回忆下生命周期onLoad: function (options) {} —— 生命周期函数–监听页面加载onReady: function () {} —— 生命周期函数–监听页面初次渲染完成onShow: function () {}, —— 生命周期函数–监听页面显示onHide: function () {},
2020-12-06 20:51:41 1155
原创 Ajax创建步骤内含兼容
Ajax创建步骤内含兼容代码代码//1.创建XMLHttpRequest 核心对象function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp");//IE6及以下 } return xhr; }var xhr=getXhr();//2.建立连接ajax.open('G
2020-12-02 09:36:32 170
原创 vue脚手架详解组件通信(内含完整demo)
vue脚手架详解组件通信方法一、props/$emit1父传子2子传父方法二、$emit和 $on1跨级通信四总结方法一、props/$emit1父传子父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。<!-- 父传子中的父页面 --><template> <div class="afu"> <h1>{{ afuname }}</h1> <Azi
2020-11-23 19:13:40 575
原创 详解js中的promise、async和await
promisehttps://www.cnblogs.com/ming1025/p/13092502.htmlasync和awaithttps://blog.csdn.net/happy81997/article/details/106012396
2020-11-23 01:09:27 365
原创 js小案例 --数组转换对象并计数
数组转换对象并计数上代码效果上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body&g
2020-11-16 23:16:32 209
原创 后端代理跨域配置
后端代理跨域配置node中代理配置node中代理配置router.get('/',ctx=>{ ctx.redirect("/api")})router.get('/api', async ctx => { ctx.body = "早期的鸟儿有虫吃"})
2020-11-12 15:12:34 307
原创 小程序总结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 171
原创 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 224
原创 前端时间格式转换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 755 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 115
原创 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 1104
原创 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 248
原创 原生 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 842 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 1456
原创 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 1534 2
原创 JavaScript三种三个系统对话框
JavaScript三种三个系统对话框1alert()2confirm()3prompt()1alert()用于显示带有一条指定消息和一个确定按钮的警告框2confirm()用于显示一个带有指定消息和确定及取消按钮的对话框。语法:confirm(message)如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。3prompt()用于显示可提示用户进行输入的对话框。语法:prompt(text,defaultText)
2020-10-05 23:38:36 445
原创 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 170
原创 原生 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 302
原创 原生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 402 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 176
原创 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 236
原创 移动端 新增选择器
移动端 新增选择器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 126
原创 移动端总结 新增页面标签
移动端总结 新增页面标签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 265
原创 原生 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 276
原创 原生 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 264
原创 原生 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 232
原创 原生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 536 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 162
原创 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 471
原创 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 371
原创 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 185
原创 JavaScript语句
JavaScript语句1语句的概念2function3条件语句4if else5else if6switch7for8while9do while1语句的概念表达式在javascript中是短语,那么语句就是javascript整句或命令。正如英文是用点号作结尾来分隔语句,javascript语句是以分号结束。javascript程序无非就是一系列可执行语句的集合。分号 ;分号用于分隔 JavaScript 语句。通常我们在每条可执行的语句结尾添加分号。使用分号的另一用处是在一行中编写多条
2020-10-03 23:31:37 279
原创 JavaScript表达式与运算符
JavaScript表达式与运算符1什么叫JavaScript表达式2JavaScript运算符与表达式3运算符的优先级4运算顺序图5比较运算符6赋值运算符7逻辑运算符(用于测定变量或值之间的逻辑)8其他运算符9void运算符的应用场合10逗号运算符(,)1什么叫JavaScript表达式将同类型的数据(如常量、变量、函数等),用运算符号按一定的规则连接起来的、有意义的式子称为表达式2JavaScript运算符与表达式1.运算符:算术运算符、赋值运算符、自减、自增表达式、逗号运算符、关系运算符、逻辑
2020-10-03 23:16:53 456
原创 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 278
原创 如何在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 480
原创 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 206
原创 js小例子 地域列表
js小例子 地域列表1图片效果2html3js4项目结构1图片效果可以根据节点来回移动节点2html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
2020-10-02 23:40:06 304
原创 js简易倒计时小案例
js简易倒计时小案例1效果图代码1效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-10-01 23:56:00 192
原创 移动端带swiper轮播图
移动端带swiper轮播图1效果图2项目简介下载地址1效果图2项目简介①带有swiper轮播图插件②移动端自适应③运用less下载地址百度云永久免费下载链接提取码: h5ur
2020-10-01 23:22:16 139
原创 免费 纯静态 模仿华为主页
免费 纯静态 模仿华为主页1动态效果2二级菜单免费下载链接1动态效果2二级菜单免费下载链接百度云永久免费下载链接下载码: 5tdd
2020-09-30 10:31:58 400
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人