- 博客(62)
- 收藏
- 关注
RSS订阅原创 vue中的过滤器（将数字转换为中文数字）
<body> <div id="app"> <div>{{123.123|currency(2,'£')}}</div> <div>{{'cassadasdasdxf'|money}}</div> <input type="number" v-model="val"> <p>{{val|str}}</p> </di.
2022-02-22 15:47:59
728
原创 vue 实现无限向上滚动
<template> <!-- vue 实现无限向上滚动 --> <div id="box"> <div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave" > <p v-for="(item, index) in..
2022-02-21 21:33:36
4603
1
原创 利用递归实现深拷贝
<script> // 利用递归实现深拷贝 // 浅拷贝和深拷贝的区别： // 浅拷贝 ： 只是将数据中所有的数据引用下来，依旧指向同一个存放地址，拷贝之后的数据修改之后，也会影响到原数据的中的对象数据 // 深拷贝： 将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据 // 实现思路： // 将要拷贝的数据 obj 以参数的形式传参 // 声明一个变量 来储存我们拷贝出来的内容 // 判断 obj 是否.
2022-02-09 20:10:13
1561
原创 数组去重三种方法
<script> // 利用ES6 Set去重（ES6中最常用） //结果[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}] // 不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。 var arr = [1, 1, 'true', 'true', true, true, 15, 15, false,.
2022-02-09 20:04:53
166
原创 数组升序降序
<script> let arr =[8,7,2,3,5]; arr.sort((a,b)=>{ return b - a; }); console.log(arr); arr.sort((a,b)=>{ return a - b; }); console.log(arr); </script>实现效果
2022-02-09 19:53:26
194
原创 数组中的数字打乱重排
<script> let arr =[8,7,2,3,5]; arr.sort((a,b)=>{ return Math.random()>0.5?1:-1; }) console.log(arr);</script>实现效果
2022-02-09 19:43:59
250
原创 根据数组中的年龄排序
<script> let arr=[ { name: '阿敏', age: 40 }, { name: '代善', age: 50 }, { name: '皇太极', age: 36 }, { name: '莽古尔泰', age: 33 } ]; //方法一，冒泡排序 // for(var i=1;i<arr.length;i++){ // for(var j=0;j<arr.
2022-02-09 19:37:52
445
原创 格式化url
<script> let str = 'http://jd.com?name=易烊千玺&age=18'; //书写一个函数， 使他输出{name:'易烊千玺'，age:18} function urlParse(url) { let num = url.indexOf('?'); // console.log(num); let data = url.substr(num + 1); // cons.
2022-02-09 19:34:01
1677
原创 获取字符串中最多的字母
<script> // abcdefgsdds 获取里面字面最多的字母 var str = 'abcdefgsdds'; var obj = {}; for (var i = 0; i < str.length; i++) { // console.log(str[i]); //obj.str[i] 不能这样写 .运算权限最高 if (obj[str[i]]) { //存在 ob.
2022-02-09 19:30:36
357
原创 js冒泡排序
<script> var arr = [8, 9, 2, 4, 1]; //第一趟比较 for (var i = 0; i < arr.length; i++) { if (arr[i] >= arr[i + 1]) { var temp = arr[i]; arr[i] = arr[i + 1]; arr[i + 1] = temp; } .
2022-02-09 19:23:01
290
原创 点击弹出下标
<body> <!-- 获取一堆name名相同的div，点击弹出显示第几个div --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</.
2022-02-09 19:15:50
283
原创 使用js实现抽奖效果
<script> var arr =["张三","李四","罗五","柴六","马七",] //获取按钮 var newArr = JSON.parse(JSON.stringify(arr)); var start = document.querySelector('.start') //获取姓名所在标签 var p = document.querySelectorAll('p'); var index = 0 .
2022-02-09 12:58:51
1048
原创 AJAX请求
AJAX概念 Asynchronous Javascript And XML（异步JavaScript和XML）， AJAX并不是一种语言，而是一种创建交互式网页应用的网页开发技术 AJAX是Javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技术的组合 使用XHTML+CSS来标准化呈现； 使用XML和XSLT进行数据交换及相关操作-json代替； 使用XMLHttpRequest对象与We
2021-10-04 12:14:00
114
原创 this的使用
什么是this this是Javascript语言的一个关键字 它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。 随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象 this的多种用法 全局范围内 函数调用 作为对象方法的调用 call/apply/bind 的调用 作为构造函数调用 全局范围内使用this在全局范围内使用this ，它将指向全局对象（浏
2021-10-04 12:00:31
897
原创 正则表达式
官方定义：正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。 正则表达式是由一个字符序列形成的搜索模式。 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。 正则表达式可以是一个简单的字符，或一个更复杂的模式。 作用：正则表达式可用于所有文本搜索和文本替换的操作。 正则表达式的构成 定界符 元字符 模式修正符
2021-09-29 18:29:48
89
原创 DOM对象
DOM概述官方定义： DOM是W3C制定的一个规范(标准)，(Document Object Model，文档对象模型)，是提供了访问和操作网页中各元素的方法，让程序可以动态的修改或改变网页元素的内容、样式、结构。 DOM是W3C制定的一个规范(标准)，而这个规范在浏览器中，以对象的形式得以实现。 在 1998 年，W3C 发布了第一级的 DOM 规范，所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了DOM按其内容可分为5个部分 核心DOM：可以同时
2021-09-29 18:26:40
241
原创 BOM对象
BOM对象BOM（Browser Object Model）浏览器对象模型 BOM 使 JavaScript 有能力与浏览器“对话” BOM尚无正式标准,但是浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性window对象 表示浏览器窗口，所有浏览器都支持 window 对象 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 全局变量是 window 对象的属性 全局函数是 window 对象的方法
2021-09-29 18:25:09
73
原创 【JavaScript】事件
Event对象 只要事件发生就会产生一个event事件 事件发生后创建对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行 鼠标事件事件 说明 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onmouseover 鼠标被移到某元素之上 onmouseout 鼠标从某元素移开 onm
2021-09-29 18:22:47
103
原创 【JavaScript】对象
对象JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。 在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。 方法是能够在对象上执行的动作。.关键词（） 举例：汽车就是现实生活中的对象。汽车的属性： car.name=Fiat 名称 car.model=500 型号 car.weight=850kg 重量 car.color=white 颜色汽车的方法： car.start() 启动 car.drive() 驾驶 car.brake()
2021-09-29 18:20:27
127
原创 【JavaScript】自定义函数
函数 函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。 函数包含着的代码只能在函数被调用时才会执行，就可以避免页面载入时执行该脚本 在JavaScript中，可以使用以下三种方法来定义一个函数 使用function语句定义函数 使用Function()构造函数来定义函数 在表达式中定义函数 Function构造函数定义函数var 函数名 = new Functi
2021-09-29 18:13:08
3442
原创 【JavaScript】流程控制
流程控制在任何一门程序设计语言中，都需要支持满足程序结构 化所需要的三种流程控制: 顺序控制 分支控制（条件控制） 循环控制 顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。分支流程控制 if语句 switch语句 if语句分类：单分支，双分支，多分支，分支嵌套// 单分支if (条件表达式){ 代码段}// 双分支if (条件表达式) { 代码段1 }else { 代码段2}...
2021-09-03 17:02:50
113
原创 【JavaScript】变量数据类型运算符
1.变量的声明和赋值什么是变量？解释：可以变化的量1. 变量是用于存储信息的容器2. 变量是一段命名的存储空间3. 变量是才程序运行过程中值允许改变的量4. 变量是由变量名，变量值，和变量类型组成变量命名规则1. 第一个字符必须为字母，_或$，其后的字符还可以是数字2. 严格区分大小写，要有一定的含义3. 建议使用小驼峰规则来命名变量。redApple4. 不能使用关键词，保留字作为变量名变量的命名和赋值 var 变量名 变量名=值 var 变量名
2021-09-02 11:21:40
386
原创 【JavaScript】js基础语法
1.JS概念JavaScript是用于实现用户交互、动态控制文档的外观和内容,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言2.特点 是基于对象的弱类型语言 弱类型语言：是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变量自动进行转换，不需要经过显性强制转换。弱类型语言包括vb，php，javascript等。 强类型语言：是一种强制类型定义的语言，一旦某一个变量被定义类型，如果不经过强制转换，则它
2021-09-02 10:15:27
159
原创 【Javascript】实现金字塔与菱形
一、简单实现1.使用while语句，就是var i = 1var x = ''while(i<6){i++x=x+'*'console.log(x)}如果是在html中，就需要加上换行符。代码如下var i = 1var x = ''while(i<6){i++x=x+'*'document.write(x)document.write('</br>')}2.使用for语句，就是var x=""for (
2021-09-01 19:07:43
901
2
原创 Sass_02
1 函数 functionSass允许用户编写自己的函数，以 @function 开始，用 @return 返回值。$fontSize: 10px;@function pxTorem($px) { @return $px / $fontSize * 1rem;}div { font-size: pxTorem(16px);}// css编译后样式div { font-size: 1.6rem;}2 条件语句@if 语句可以用来判断，配套的还有 @e...
2021-09-01 15:52:21
160
原创 Sass_01
1 维护 CSS 的弊端 CSS 需要书写大量没有逻辑的代码，重复度很高。 不方便维护以及扩展，不利于复用。 2 什么是 SASSSASS 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得 CSS 的开发，变得简单和可维护。它没有减少 CSS 的功能，而是在 CSS 的基础上引入了变量，Mixin（混合），运算以及函数等功能，大大简化了 CSS 的编写，并且降低 CSS 的维护成本。总结：写更少的代码，实现更多的样式。3 在线工具
2021-09-01 14:45:15
72
原创 Bootstrap_05
7 小标签通过 .label 实现小标签，用于提示类。<h1>h1标题 <span class="label label-default">标签</span></h1><h2>h2标题<span class="label label-default">标签</span></h2><h3>h3标题<span class="label label-default">标签</
2021-09-01 12:13:56
230
原创 Bootstrap_04
1 下拉菜单Bootstrap 中的下拉菜单依赖于 .dropdown 类，或者添加了 position: relative; 的元素。<div class="dropdown"> <div class="btn btn-default" data-toggle="dropdown">个人中心 <span class="caret"></span></div> <ul class="dropdown-menu">...
2021-09-01 11:47:30
383
原创 Bootstrap_03
7 表单7.1 基本实例设置了 .form-control 类的表单元素，默认设置宽度属性为 width: 100%;。将 label 元素和表单元素包裹在 .form-group 中可以按照排好的样式进行展示。<form action="#" method="post"> <div class="form-group"> <label for="email1">邮箱地址</label> <inp...
2021-09-01 10:58:29
290
原创 Bootstrap_02
4 排版使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素，实际上它是把大部分在HTML的基本标签加了样式。所以这部分相对比较简单。4.1 标题h1-h6 重新定义样式，HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。增加了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 .h1 字体大小 36px .h2 字体大小 30px .h3 字体大小 24px
2021-09-01 10:07:18
216
原创 Bootstrap_01
1 什么是 Bootstrap？Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使 Web 开发更加快捷。它对 HTML、CSS 和 JavaScript 进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。Bootstrap 使用了一些 HTML5 元素和 CSS3 属性（如媒体查询）。为了让这些正常工作，需要使用 HTML5 文档类型。如果在 B
2021-09-01 08:50:58
147
原创 移动端布局
1 移动端布局虽然 H5 的页面与PC的Web页面相比简单了不少，但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备。看看下图你就会知道，这是多么痛苦的一件事情，看到这些数据，是否为此捏了一把汗出来。1.1 基本概念1.1.1 像素物理像素物理像素又被称为设备像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的 px 元素显示会不一样，是因为像素点的个数相同情况下，不同分辨率下每个像素点对应的像素宽度不同。比如同样是 14px 大小的字，
2021-08-31 18:18:51
70
原创 CSS3滤镜
1 滤镜之前我们要处理一张图片的取色，模糊，褐色等效果必须使用 Photoshop 处理完后保存多张图片，而 CSS3 滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过 filter 滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等1.1 定义和使用filter 属性定义了元素(通常是 img)的可视效果(例如：模糊与饱和度)。filter 滤镜，借鉴了 Photoshop 的滤镜效果，在 p
2021-08-31 16:33:51
274
原创 锚链接返回顶部，同页面、不同页面跳转
1 锚链接其实就是超链接的一种，一种特殊的超链接普通的超链接：<a href="路径"></a> 是跳转到不同的页面锚点：<a href="位置"></a> 可以在同一个页面中不同的位置间跳转可以看到，跳转到锚点的超链接跟普通的超链接格式是一样的。常用于在页面很长时，让用户方便在页面不同部分间跳转。1.1 用法1.1.1 创建锚点目标建立锚点目标，只需要给目标元素增加 id 或者 name 即可 锚的名称可以是
2021-08-31 16:21:42
4766
原创 CSS3多媒体查询
1 多媒体查询1.1 响应式网页概念同⼀个网页根据窗口大小的不同，显示不同的版式。1.2 优缺点优点：对于不同视⼝都可以显示⾮常饱满的⽹⻚结构，没有横向滚动条。缺点：制作复杂，同时对于移动端⽽⾔，需要加载⾮常多的 pc 端的样式和图⽚等资源，影响加载速度，同时费流量。国内流量⾮常贵。（这也是国内纯响应式⽹站不多的原因。）1.3 原理媒体查询能在不同的条件下使⽤不同的样式，使⻚⾯在不同在终端设备下达到不同的渲染效果。1.4 媒体设备值 描述 all
2021-08-31 14:44:21
307
原创 CSS3新增选择器
1 新增选择器1.1 CSS 选择器选择器 类型 说明 * 元素选择器 通配选择符。选择页面所有元素。通常不建议频繁使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用。 E 元素选择器 选择匹配 E 的元素。 E#id 元素选择器 选择匹配 E 的元素，且该元素定义了 ID 选择器。 E.class 元素选择器 选择匹配 E 的元素，且该元素定义了类选择器。 E F 关系选择器
2021-08-31 13:59:05
182
原创 Flex布局
1 Flex 布局1.1 Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box { display: flex;}行内元素也可以使用 Flex 布局。.box { display: inline-flex;} flex： 将对象作为弹性伸缩盒显示，没有为⽗元素设置宽度，默认为100%。 inline-flex：将对象作为内联块级...
2021-08-31 12:05:25
479
原创 CSS3过渡动画
1 过渡1.1 基本形式transition 是 css3 新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前：元素 -> 元素:hover 状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡：从开始状态到结束状态的中间过程可以查看格式：transition:过渡的属性 完成时间(s) 运动曲线 延迟时间transition:all 3s(1s=1000ms) linear 0s;
2021-08-31 11:32:30
4205
原创 2D3D转换
1 2D转换转换是 CSS3 中具有颠覆性的⼀个特征，可以实现元素的位移、旋转、变形、缩放。通过 transform 转换来实现 2D 转换或者 3D 转换。2D转换包括： 缩放 移动 旋转 倾斜 1.1 scale设置元素的缩放效果语法： transform: scale(x, y); transform: scale(2, 0.5); 参数： x：表示水平方向的缩放倍数 y：表示垂直方向的缩放倍数 注
2021-08-31 10:12:34
700
原创 CSS3样式
1 文本1.1 text-shadow设置⽂本的阴影参数：⽔平位移 垂直位移 模糊程度 阴影颜⾊text-shadow: 20px 27px 22px pink;p { font: bolder 50px "Microsoft Yahei"; text-align: center; margin-top: 10px; color: teal; text-shadow: 10px 10px 5px red; } text-sha...
2021-08-31 08:52:31
226
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人