- 博客(22)
- 收藏
- 关注
RSS订阅原创 封装高亮显示函数
在实际的需求中，经常会对某些内容进行高亮处理，比如说搜索结果的高亮显示，尤其是处理某些富文本时。在这里对关键词做一个高亮显示的封装，以后难免还会遇到。搜索结果的高亮显示 // 高亮显示 function highLight(text) { // 正则表达式 需要被替换的数据是一个变量时声明正则表达式对象 const reg = new RegExp(text, 'gi') const highStr = `<span clas
2021-10-23 17:25:06
150
原创 生成随机数、随机颜色（rgb格式）
封装生成随机数的函数，封装生成随机颜色的函数（rgb的格式）// 获取min-max之间的随机数 [min,max] 闭区间 Math.floor(Math.random() * (max - min+1) + min)function getRandom(min, max) { console.log(Math.floor(Math.random() * (max - min + 1) + min));}// getRandom(10, 12);//如果要获取[min,max) 区间的随机
2021-10-23 11:17:27
2099
原创 css盒子模型
什么是css盒模型？标准盒模型和IE盒模型有什么区别？css盒模型：本质上是一个盒子，用于封装周围的HTML元素，它包括：边距margin，边框border，填充padding和实际内容content。标准W3C盒子模型的范围：包括margin、border、padding、content，width部分只包含content不包含其他部分。IE 盒子模型的范围：也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 width 包含了
2021-10-23 11:02:24
504
原创 vue生命周期
Vue生命周期什么是生命周期从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期函数=生命周期事件=生命周期钩子Vue生命周期 <script> const vm = new
2021-10-22 21:18:29
90
原创 get和post请求的区别
get请求和post请求的区别无论是POST还是GET请求，都是基于超文本传输协议（HTTP）的，而HTTP协议是TCP/IP协议族的应用层协议。从缓存的角度，GET 请求会被浏览器主动缓存下来，留下历史记录，而 POST 默认不会。从编码的角度，GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制。从参数的角度，GET 一般放在 URL 中，因此不安全，POST 放在请求体中，更适合传输敏感信息。从幂等性的角度，GET是幂等的，而POST不是。(幂等表示执行相同的操
2021-10-22 21:13:33
1765
原创 发送原生ajax请求的步骤
需要考虑下浏览器的兼容性<script> /* ajax请求数据的步骤： 1、创建ajax对象 2、配置请求方式和请求地址以及是否异步请求 3、浏览器向服务器发送请求 4、服务器接受请求 5、判断请求并响应数据 6、服务器向浏览器返回数据 7、浏览器渲染数据 */ // 1、 if (window.XMLHttpRequest) { var xhr = new XMLHttpR
2021-10-22 21:12:21
313
原创 微信小程序知识点总结
微信小程序知识总结微信小程序的优势和劣势优势：容易推广，入口众多使用便捷，体验良好，有接近原生app的体验，H5页面经常出现延迟，卡顿，加载慢，权限不足等，而这些在小程序中不会出现成本低，劣势：单个包大小限制为2M，无法开发大型应用，分包之后最大值是20M上架需要审核，比较麻烦会受到微信限制，比如不能直接分享到朋友圈，涉及到积分和虚拟交易时也是不允许的在小程序中，规定所有手机的屏幕宽度都是750rpx。改变数据：this.setData({msg:’’})h5 自定义
2021-10-22 21:02:03
1992
原创 vue中的常用指令
vue常用指令v-cloak：防抖动[v-cloak]{ display:none;}v-text ：类似于innerText 不可以解析富文本，原文输出，都会覆盖原来的值v-html ：类似于innerHTML 可以解析富文本v-bind：绑定属性 语法糖 是:v-bind绑定class <div id="app"> <!-- <h2 v-bind:class="{类名1:true,类名2:boolean}">{{me
2021-10-22 20:51:04
418
1
原创 基于vue的水墨新闻项目（移动端）
水墨新闻项目功能介绍：首页：搜索吸顶，轮播图，分类的table切换 新闻布局 可以管理分类(添加和删除) 记住列表滚动位置（使用vh）让每一个标签列表产生自己的滚动容器 上拉刷新，触底加载使用到的组件：search 顶部的搜索框van-cell 单元格 文章封面的布局 （左右结构）van-list ：list列表 用于新闻内容的展示新闻详情页：点赞， 收藏，分享，关注 图片预览功能 记录滚动条位置发现页面热搜榜，更多热搜，新闻个人中心页面登录，退出
2021-10-22 16:02:56
1156
原创 微信小程序中实现瀑布流
wxml<!-- 把数据放在比较矮的那一侧，如果左右两边数据一样高，优先放置在左侧 --><view class="discuss-container"> <view class="left-box"> <template wx:for="{{leftList}}" is="item" data="{{...item}}"></template> </view> <view class="right-bo
2021-10-22 14:14:47
790
1
原创 判断数据类型的几种方法
判断数据类型的几种方法1 typeof 除了null都可以显示正确的数据类型console.log(typeof 2); // numberconsole.log(typeof true); // booleanconsole.log(typeof 'str'); // stringconsole.log(typeof []); // object console.log(typeof
2021-10-22 13:59:37
1045
原创 数字转千分位
数字转千分位 12,345,678 从后往前每三位数字都用逗号隔开，思路：先将数字转化为字符串 toString() 或者String() ，再将字符串转化为数组用split() 方法，然后使用 reverse() 方法翻转数组，因为只有翻转数组后我们才好处理，再每隔三个元素插入一个逗号，最后再将数组翻转过来再通过 join() 方法转化为字符串 var num = 12345678 function RMB(num) { let arr = [] String(nu
2021-08-27 22:41:48
521
原创 实现对象深拷贝的五种方法
对象深拷贝的五种方法1.json暴力转化通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。var obj = {name:'123'}var obj2 = JSON.parse(JSON.stringify(obj这种简单粗暴的方式有局限性，当值为undefined、function、symbol会在转换过程中被忽略。2 es6解构赋var obj = {name:'123',age:13};var obj2 = {...obj}只能深
2021-08-27 21:54:16
23405
4
原创 处理url路径，将地址栏参数转化成对象
处理url路径，将地址栏参数转化成对象获取url地址中 ？后面的参数，并将参数对象化，，模仿node中url.parse().query 方法例如www.baidu.com?name=张三&key=haha&age=1处理后obj={name:张三,key:哈哈,age:1}封装成函数 var url = "www.baidu.com?name=张三&key=haha&age=1 "; function handleUrl(url) { var ob
2021-08-27 21:32:04
689
原创 数组去重方法总结
数组去重方法总结对目前所学的知识进行个小小的总结，今天总结一下数组去重的方。而且不同的方法会有不同的缺陷，比如不能复杂数据类型等，1，双重for循环遍历数组 var arr = [1, 1, 1, 2, 2]; var newArr = []; for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) {
2021-08-27 21:18:09
142
原创 Bootstrap之部分组件练习和基础知识阶段总结（一）
Bootstrap之部分组件练习和基础知识阶段总结（一）在使用BootStrap之前，我们需要先引入BootStrap对应的文件，需要注意的是BootStrap是依赖于jQuery的，引用BootStrap的js文件我们要先引入jQuery.js文件。写这篇博客的原因也是方便自己的日后查看，同时也是起一个督促自己每天学习进步的作用，欢迎大家的评论、指正。1. Bootstrap实现响应式导航（汉堡）要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的
2021-08-16 21:36:56
449
1
原创 bootstrap响应式布局练习
bootstrap响应式布局练习在三种不同的屏幕下呈现不同的效果大屏(pc端)小屏下(平板)超小屏(手机)html文件<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht
2020-10-16 15:53:35
785
1
原创 css3动画:奔跑的北极熊
css3动画:奔跑的北极编辑器:vs code<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>冰山</title> <style>
2020-10-16 15:23:14
439
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人