- 博客(29)
- 收藏
- 关注
RSS订阅
原创 基于vue框架Vant UI组件库移动端电商网站webapp项目总结
项目总结一、项目名称电商网站webapp开发二、技术栈框架：vue框架UI组件：Vant移动端Vue组件库 安装：npm install vant -S 项目中引用的部分组件： 1、Tabbar标签栏：封装成底部标签栏，引入到其他组件中，导入路由，在底部作为导航栏使用； 2、Sidebar,SidebarItem 侧边导航：在商品分类展示模块中引入，按照后台系统中的商品分类进行展示，完成商品筛选分类展示模块； 3、Grid,GridItem 宫格：...
2020-11-23 10:12:13
4345
3
原创 函数的闭包
函数的执行空间会在函数执行完毕之后销毁但是，一旦函数内部返回了一个 引用数据类型，并且 在函数外部有变量接受 的情况下那么这个函数 执行空间 就不会销毁了function fn() { const obj = { name: 'Jack', age: 18, gender: '男' } return obj}const o = fn()闭包就是利用了这个函数执行空间不销毁的逻辑闭包概念1、有一个 A 函数，再 A 函数内部返回一个 B
2020-10-24 09:42:27
1123
4
原创 js完美拖拽与碰撞检测
拖拽与碰撞检测点个赞啊，靓仔！拖拽原理分析对于拖拽一个div盒子，首先我们需要将鼠标移动到盒子上，然后按住鼠标左键，移动鼠标到目标位置，再松开鼠标，对于这一过程的分析，显然需要三个鼠标事件：按住鼠标：onmousedown移动鼠标：onmousemove松开鼠标：onmouseup实现步骤1、**鼠标按下时：**我们获取鼠标当前所在的位置距离页面左边界与上边界的距离，分别减去盒子距离页面左边界与上边界的值，这样我们就得到了鼠标距离盒子左边界与上边界的值；2、**鼠标移动时：**我们
2020-09-17 20:00:38
3019
1
原创 小时候玩一天的打砖块小游戏（附完整源码）
打砖块小游戏点赞再看，实现如图需求分析1、小球在触碰到大盒子上、左、右边框，以及滑块后沿另一方向反弹，在碰到底边框后游戏结束；2、小球在触碰到方块之后，方块消失；3、消除所有方块获得游戏胜利；4、可通过鼠标与键盘两种方式移动滑块；5、游戏难度可调整，实时显示得分。代码分析1、html结构：左右两个提示框盒子分别用一个div，在其中添加需要的内容；中间主体部分用一个div，里面包含一个滑块（slider），一个小球（ball），以及一个装有所有方块的brick盒子，我们通过使用js在br
2020-09-17 18:44:26
4924
5
原创 获取当前ip地址及ip所属国家地区接口
fetch('https://www.cloudflare.com/cdn-cgi/trace').then(response=> response.text()).then(data=>{ const obj = {} var arr = data.trim().split('\n') for(var i = 0; i < arr.length; i++){ var key = arr[i].split("=") obj[key[0]] = key[1]
2022-03-29 11:39:43
1256
原创 el-input-number在el-table中无法刷新问题
导致原因：绑定的数据未刷新是vue的绑定深度过多，没有关联绑定起来，点击一次后会出现光标丢失现象。解决方法：步骤一、el-input-numbe所在列添加key，el-input-number中添加 @change="inputChange($event,‘num’)"方法 <el-table-column prop="num" label="数量" width="100" align="center" :key="tablekey"> <el-input-number @cha
2021-10-13 11:46:38
1432
5
转载 JS按空格和换行或者其他字符进行切割形成数组
方案一let arr = value.split(/[,，\s\n]/).filter(_ => )方案二let arr = value.replace(/[,，\s]+/gmi, ‘,’).split(’,’).filter( => _)
2021-08-24 15:33:23
1758
原创 Vuex基础核心概念State,Mutations,Actions,Getters,Modules
Vuex 是专为vue.js设计的全局状态管理工具。集中管理检测组件（数据）的状态变化，实现全局状态下的数据共享，高效实现组件之间的数据通信，存储在Vuex中的数据都是响应式的。也就是说当Vuex中的数据发生改变的时候，调用该数据的组件也会同步发生变化。vue组件之间通信：父传子：通过v-bind绑定子传父：通过v-on绑定方法兄弟组件通信：通过定义一个evenBus事件总线进行通信import Vue from ‘vue’import Vuex from ‘vuex’Vue.use(‘Vue
2021-03-29 14:45:55
265
原创 基于Vue框架Element UI组件库单页面应用后台管理系统项目总结
使用说明npm installnpm run serve项目总结一、项目名称电商网站webapp开发二、技术栈 REM布局：rem（font size of the root element）是指相对于根元素的字体大小的单位。移动端布局主要采用REM布局，结合Flex布局,bootstrap布局等集中布局方式，完成整个移动端项目。在编辑器vscode中预先下载插件cssrem/px to rem,在设置中预先将根字体字号设置为75,1rem为根字体字号的大小，则分辨率宽度为750px
2020-11-23 10:10:43
1843
原创 使用 谷歌浏览器 将 网页截取为图片
在进行前端网页页面制作练习时，如果看中了某一个网站，可以保存为图片，利用ps测量数据；下面教你三步完成 通过谷歌浏览器 将网页转为图片：1、在想要转为图片的页面，按下 F12 打开开发者工具;2、按 Ctrl + Shift + P ;3、在弹出的输入框里输入 full size screenshot ，然后按回车等待下载完成即可。...
2020-09-21 20:40:18
663
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> #shijian{ .
2020-09-17 20:37:00
625
原创 苹果手表表盘时钟与js圆周运动
表盘时钟与圆周运动实现结果需求分析：1、时钟时间按照北京时间进行显示;2、时针、分针、秒针按照时钟运转标准进行运转；3、小球跟随秒表围绕表盘进行圆周运动。代码分析1、html结构：时针、分针、秒针、小球分别用一个div，将他们一起放到一个大的div中；2、css样式：表盘布局多使用相对定位与绝对定位，将表针与各时刻标刻移动到特定的位置；3、js行为：为了实现动态获取时间，可以使用var now=new Date()，再利用定时器setInterval，实现每经过1s重新获取当前时间。核
2020-09-17 17:40:14
657
原创 超赞随机点名系统（抽奖系统），快来看看是不是你想要的（附完整源码）
名称：随机点名系统需求及功能：1、点击按钮开始随机，再次点击按钮停止随机；2、已经被随机到的下一次开始随机时将不能再被随机到；3、随机的位数可根据需求进行自定义，随机到之后出现姓名；4、两侧图片在随机时也进行随机；5、背景颜色切换。...
2020-09-05 10:30:28
2979
1
原创 一款好看的秒表计时器
实现图片：分+秒+跑秒时+分+秒+跑秒需求分析：1、显示整个秒表页面；2、在点击“开始”按钮之后，开始计时，并将按钮转为“暂停”按钮，在点击“暂停”按钮之后，将按钮转为“开始”按钮，并停止计时；3、在点击“复位”按钮之后，将显示的计时清零，并将按钮变回“开始”按钮。页面结构：<div id="miaoBiao"> <div id="dingShi"> <p> <!-- <span id
2020-09-03 09:03:02
1178
原创 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> <style>
2020-09-02 11:20:47
2422
原创 js字符串的常用方法
charAtcharAt（索引）是找到指定位置的内容并返回，如果没有对应的索引，那么返回空字符串var str = 'Jack'// 使用 charAt 找到字符串中的某一个内容var index = str.charAt(2)console.log(index) // ccharCodeAtcharCodeAt（索引）返回对应索引位置的unicode编码var str = 'Jack'// 使用 charAt 找到字符串中的某一个内容var index = str.charCo
2020-09-01 19:33:22
172
1
原创 js数组的常用方法
pushpush是用来在数组的末尾添加一个或多个元素var arr = [1, 2, 3]// 使用 push 方法追加一个元素在末尾arr.push(4)console.log(arr) // [1, 2, 3, 4]pop删除数组末尾的一个元素var arr = [1, 2, 3]// 使用 pop 方法删除末尾的一个元素arr.pop()console.log(arr) // [1, 2]unshiftunshift用于在数组前面添加一个元素var arr =
2020-09-01 11:53:52
149
原创 js实现数组从小到大或从大到小排序
代码：<script> var arr=[2,5,3,9,1,8,7,4,6]//给出一个乱序的数组 arr.sort( function paixu(value1,value2){ return value1-value2;//替换为value2-value1可实现从大到小排序 }) document.write(arr) </script>实现效果：
2020-08-31 18:43:24
3583
原创 前端面试题之js实现数组冒泡排序与选择排序
在对数组内的元素进行从小到大或从大到小排序时，使用数组方法sort可以很简单的实现，但是在面试时，面试官很喜欢对冒泡排序及选择排序进行提问，下面我们来了解一下冒泡排序与选择排序：冒泡排序先准备一个乱序的数组：var arr = [3, 1, 5, 6, 4, 9, 7, 2, 8]思路1、先遍历数组，让相邻的两个进行比较，如果前一个比后一个大，那么就把两个换个位置for (var i = 0; i < arr.length; i++) { // 判断，如果数组中的当前一个比后一个大.
2020-08-31 17:57:12
871
原创 JavaScript实现“空心等腰三角形”（改进版）及“菱形”
空心等腰三角形实现效果如图 <script> function sanJiao(num){ for(var n = 1; n <= num ;n++){ for(var i = 1 ;i <= num - n; i++){ document.write("   ") }//打印出三角形左侧空格
2020-08-27 11:29:35
2476
原创 js实现N行M列表格，并填充0~100随机数
编写一个函数，在页面上输出一个N行M列的表格，表格内容填充0~100的随机数字通过调用函数生成一个5行8列随机数表格 <script> // 编写一个函数，在页面上输出一个N行M列的表格，表格内容填充0~100的随机数字 function printTable(n,m){ document.write("<table>") for(var i=0; i <= n; i++){
2020-08-26 17:18:55
1321
原创 js实现“实心等腰三角形”与“空心等腰三角形”
实心等腰三角形实现如图 <script> var num = prompt("请输入所要打印的三角形层数") for(var i= 1 ; i <= num ; i++){ for(var k = 1; k <= num-i; k++){ document.write("  ") } //打印三角形左侧空格
2020-08-26 16:27:45
800
原创 弹性盒模型布局（FLEX布局）
display:flex 添加在伸缩容器（父元素的） flex-direction： 伸缩布局方向 row 左向右 row-reverse 水平返向 column 上向下 column-reverse flex-wrap:换行 nowrap不换行（默认值） wrap 换行（超出才换行，不超出不换行） wrap-reverse换行反向 当主轴方向是水平的 上下反向 当主轴方向垂直时 左右反向 justify-content:主轴的对齐方式（水...
2020-08-14 15:57:28
365
原创 文本溢出变省略号设置
当文本溢出时要显示省略号的效果需完成以下定义：1、容器设置宽度:width value;(px %,都可以）2、强制文本在一行内显示：white-space:nowrap;3、溢出内容为隐藏：overflow:hidden;4、溢出文本显示省略号：text-overflow:ellipsis;注：必须是单行文本！...
2020-08-10 19:23:35
228
2
原创 高度塌陷的原因及解决方法
子元素可以撑开父元素的高度，但是子元素如果有浮动就不能撑不开父元素的高度（高度塌陷了）。什么情况下会出现高度塌陷，子元素浮动，而父元素没有高度会出现高度塌陷。解决高度塌陷的方法方法1：给父元素加overflow:hidden;(触发了BFC) 缺点：超出的元素会被隐藏。方法2：给需要清浮动的地方加一个空标签 缺点：造成代码冗余方法3：万能清除浮动法(给父元素加).clearfix:after{content:""; display:block; visibility:hidden; ove
2020-08-06 17:03:06
551
原创 设置一个元素在容器中垂直居中
1、如果只有一行元素，设置text-align:center;line-height=容器高度；2、如果有多行元素步骤一：给容器加上text-align:center;步骤二：给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;步骤三：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block
2020-08-04 17:52:05
423
原创 ＜HTML5前端开发＞页面布局：05 主体
一、主体部分页面布局1、对页面进行分层次划分，可以将整个页面放在一个div容器中，利用div可嵌套使用，在div容器再次添加div容器并添加颜色进行前期布局；2、对于主体页面，若出现多窗口，可分别置于div容器中，并设置好大小，注意使用float：left；3、利用margin：上 右 下 左；进行窗口位置调整；4、在窗口中设置自定义列表dl，将图片视频文字内容填入到dt、dd之中，分别在dl与dt、dd当中设置class类，便于完成所需要的调整：图片视频位置、文字类型等二、实现代码<!D
2020-07-31 21:20:38
370
原创 ＜HTML5前端开发＞页面布局：02 搜索栏
一、实现代码 二、实现效果提示文字可在中进行添加。
2020-07-31 20:54:11
607
原创 link与@import的区别
**差别1：老祖宗的差别：**link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS。**差别2：加载顺序的差别：**当一个页面被加载的时（被浏览者浏览时），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏l览@import加载CSS的页面时开始会没有样式。差别3：兼容性的差别：@import是CSS
2020-07-30 08:45:42
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人