- 博客(48)
- 收藏
- 关注
RSS订阅原创 Vue+Element UI 侧边导航与标签页同步
在之前的文章中完成了侧边导航1、现在完成了侧边导航、标签页和内容的联动，2、重复点击侧边导航时，标签页不会重复出现，3、路由状态的保持（切换路由后内容不变化），4、标签页删除显示右侧标签页（右侧没有则显示左侧）我看了其他人写的，但是我自己实现的时候始终没有实现，我的是导航栏和标签页可以联动，但标签页和内容不能联动。后来我就干脆不用他们的方法了，跳转路由直接用 this.$router.push() 进行跳转。原理：侧边导航和标签页的联动：点击侧边导航时将点击的数据存放到 store 中.
2021-04-23 13:57:28
4405
3
原创 微信小程序 修改placeholder颜色
先写个文本框，默认显示 “请输入姓名”然后添加属性 placeholder-class 自定义一个名称 这里使用 placeholderStyle <input type="text" placeholder="请输入姓名" placeholder-class="placeholderStyle" />这是默认样式之后在 WXSS 页面修改样式input{ border: 1rpx solid black;}.placeholderStyle{ color: r
2021-04-14 10:58:20
857
原创 微信小程序 CSS 解决子元素图片在父元素div宽高小的时候超出div范围
今天写小程序的时候发现了这么个问题，在div内添加了图片，给div一个边框，然后我就发现我的图片不在div的范围内了，而是向下偏移了一点html：<view class="tel"> <image src="/images/tel.png"></image></view>css：.container .content .person .per .tel { width: 30rpx; height: 30rpx; border:
2021-04-13 11:56:35
837
原创 Vue和Element UI 路由跳转，侧边导航的路由跳转
首先看布局，因为我的用于页面显示的 <router-view> 是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。
2021-04-07 16:42:43
2754
1
原创 element UI 中表单输入框的样式修改，深度选择器
输入框代码：<el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="login.name"></el-input>修改前：修改后查看修改前的CSS样式：如果我们直接在CSS中修改输入框的样式，会发现修改后的样式并没有被应用上为了解决这个问题我也找了很多文章，发现可以用 /deep/ 深度选择器 ,也就是在选择器前面加上 /deep/ /* 使用 scoped 后，父组件的样式将不会
2021-04-02 11:06:58
877
原创 CSS+div布局，上中下三行div，上下固定高度，中间铺满
方法一：使用定位，父元素相对定位 position:relative; ，子元素绝对定位 position:absolute; 上下div固定高度，中间div的 top 和 bottom 偏移量为上下div的高度<div id="wrap"> <div id="head"></div> <div id="main"></div> <div id="foot"></div>&l.
2021-04-01 23:27:38
3464
原创 Element UI设置侧边栏高度占满全屏，Y轴滚动条隐藏，不影响滚动
先看效果：实现了高度占满全屏，隐藏滚动条，但可以滚动这里采用的是Element UI的Container布局，使用文档中给出的举例解决了aside和main的独立滚动条效果。布局：在布局上采用的就是文档给举例的布局，然后在 el-aside 外套了一个 div .aside ,用于设置隐藏滚动条。<!-- 侧边栏 --><div class="aside"> <el-aside width="178px"> <!-- 侧边导航 -->
2021-04-01 10:36:46
12575
原创 vue脚手架
安装脚手架：在命令行输入： npm install -g @vue/cli 卸载脚手架：在命令行输入： npm uninstall -g vue-cli 查看是否安装上及版本：在命令行输入： vue --version /*************************************************************************************************/创建项目：打开项目文件夹，在地址栏输入 cmd 回车确认之后弹出这
2021-03-22 08:45:22
104
原创 JSMath常用对象属性、对象方法
PI 属性PI 属性就是 π，即圆的周长和它的直径之比。这个值近似为 3.141592653589793。document.write("PI: " + Math.PI);对象方法abs() 方法abs() 方法可返回数的绝对值。参数：x： 必需。必须是一个数值。document.write(Math.abs(7.25) + "<br />");document.write(Math.abs(-7.25) + "<br />");document.wri
2021-02-24 16:48:55
160
原创 JS Date对象及对象方法
Date()getDate()getDay()getMonth()getFullYear()getHours()getMinutes()getSeconds()getTime()toLocaleString()
2021-02-23 16:54:43
191
原创 HTML5 拖放、拖放到div追加、拖放到div删除
设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：<img draggable="true" />源对象即需要拖动的对象，有三个事件：ondragstart ondrag ondragendbox1.ondragstart = function (event) { console.log("开始拖动");}...
2021-02-21 15:31:12
946
原创 交叉合并数组
编写一个将两个字符串交叉合并的函数merge(s1,s2)。例如merge(“123”,“abc”)的返回结果是"1a2b3c"，如果二个字符串的长度不同，那么就将多余的部分直接合并到结果字符串的末尾， 如merge(“123456”,“abc”)的返回结果是"1a2b3c456"function merge2(s1, s2) { // 获取字符串长度 var len1 = s1.length; var len2 = s2.length; // 定义空字符串存放新字符 var str = "
2021-02-18 17:11:40
1270
原创 验证码
点击按钮获取验证码，文本框失去焦点判断验证码是否输入正确。html：<input type="text" name="" id="text" /><div id="VerCode"></div><button type="button" id="ver">获取验证码</button>css:#text { width: 200px; height: 25px; float: left;}#VerCode { widt.
2021-02-07 16:58:13
497
1
原创 JS——压缩连续重复字符串
通过键盘输入一串小写字母(a~z)组成的字符串。请编写一个字符串压缩程序，将字符串中连续出席的重复字母进行压缩，并输出压缩后的字符串。压缩规则：1、仅压缩连续重复出现的字符。比如字符串"abcbc"由于无连续重复字符，压缩后的字符串还是"abcbc"。2、压缩字段的格式为"字符重复的次数+字符"。例如：字符串"xxxyyyyyyz"压缩后就成为"3x6yz"。var str = "xxxyyyzzcc";var a1 = []; //定义空数组存放字符var a2 = []; //定义空数组存放
2021-02-07 15:22:08
1284
原创 CSS——固比固布局、圣杯布局、双飞翼布局
固比固布局、圣杯布局、双飞翼布局。这三种布局都是为了做到页面左右两侧固定，中间部分随窗口大小改变而改变。固比固布局：使用弹性盒子的方式html:<div id="box"> <div class="cl1">1</div> <div class="cl2">2</div> <div class="cl3">3</div></div>css:#box{ width: 100%; /* 弹
2021-02-04 11:44:55
276
原创 JS高级——call() 和 apply()
一、方法定义：每个函数都包含两个非继承而来的方法：call()方法和apply()方法。两个方法的作用是一样的：都可以改变this的指向（在特定的作用域中调用函数）一般this总是指向调用某个方法的对象，但在使用call()、apply()后会改变this的指向。call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2…); 即A对象调用B对象的方法。apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, [
2021-02-03 16:48:30
140
原创 JS高级——原型、构造函数的继承
定义父类的Person的构造函数function Person(name) { this.name = name;}定义父类Person的原型Person.prototype.sayName = function () { console.log("名字：" + this.name);}继承原型：定义子类构造函数Studentfunction Student(name, age) { this.name = name; this.age = age;}
2021-02-03 11:46:30
118
原创 JS高级——判断对象是否有某属性in，判断对象是否有自己的某属性hasOwnPorperty
为了验证，在构造函数中添加属性，在原型中添加属性，给实例化对象添加属性// 创建构造函数function Person() { // 添加属性到构造函数中 this.job = "班长";}// 添加属性到原型中Person.prototype.name = "张三";// 实例化对象p1var p1 = new Person();// 添加属性到实例化对象中p1.school = "实验小学";判断实例化对象p1是否含有某属性，使用 in 操作符。有，返回tru
2021-02-03 10:20:22
317
原创 jQuery 拖拽div
功能实现：1、鼠标按下拖拽div2、div不能超出边框3、鼠标抬起停止拖拽HTML实现<div id="wrap"> <div id="box"></div></div>
2021-02-01 11:42:46
1408
原创 css选择器:nth-child和:nth-of-type之间的差异
两个都是伪类选择器，效果近似，但又不同。例1：HTML部分<div class="cl1"> <p>第一个p标签</p> <p>第二个p标签</p><!-- 想要这个变色 --></div><div class="cl2"> <p>第一个p标签</p> <p>第二个p标签</p><!-- 想要这个变色 -->&l
2021-01-21 16:44:49
155
原创 使用JQuery跳转页面
个人使用体验上来说，比a标签超链接要好用。语句：$().click(function(){location.href = " 目标页面地址 ";});举例： /**********************************************************************/ // 导航跳转 // 产品中心 $(".nav ul li").eq(0).on("tap", function (event) { ...
2021-01-15 10:34:46
189
1
原创 JS 关于或||、与&&在判断中的运算
|| 如果前面为false输出后面的值，如果前面为true输出前面的值&& 如果前面为false输出前面的值，如果前面为true输出后面的值&&、 || 混合运算，&&的优先级高console.log(0 || 1); // 1console.log(1 ||2); // 1console.log(0 && 1); // 0console.log(1 && 2); // 2console.log(1
2020-12-28 10:37:31
244
原创 jQuery 页面滚动到指定位置显示返回顶部按钮
功能实现：1、页面开始时没有返回顶部按钮。2、页面滚动到指定位置以下，显示返回顶部按钮。3、返回顶部按钮，固定在页面。4、点击返回顶部按钮后，页面回到顶部。5、页面回到顶部后，返回顶部按钮隐藏。需要了解的知识：jquery方法：$().scrollTop()匹配元素相对滚动条顶部的偏移。属性:scrollTop属性滚动条到顶部的垂直高度，可写可读。HTML<body> <div id="toTop">回到顶部</div></b
2020-12-23 15:06:18
762
原创 jQuery 抽奖模拟
实现功能：1、点击按钮开始抽奖2、到哪个奖项，哪个奖项背景变色3、奖项显示在下方div中4、奖项选择的次数随机5、中奖随机1、页面实现<button type="button">开始抽奖</button><!-- rules="all"规定内侧边框的哪个部分是可见的 --><table border="" cellspacing="" cellpadding="" rules="all"> <tr> <td>
2020-12-21 14:30:00
248
1
原创 JS 大圆吃小圆，实例
实现功能：1、拖动大圆。2、随机生成小圆。3、大圆碰到小圆时小圆消失。4、大圆每消除掉一个小圆，大圆宽高增加，大圆变大。代码实现：1、创建div大圆。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { width: 100px;
2020-12-17 16:33:39
391
原创 web前端——购物车模拟
实现功能：①模拟从数据库传输来的数据添加到页面，②全选，③单个商品删除，④批量删除，⑤数量增加删除按钮，⑥金额随数量变化，⑦总数量随选中商品变化，⑧总金额随商品数量变化...
2020-12-16 15:10:28
1310
原创 JS 创建节点，添加内容，删除节点
<body> <button type="button" id="btn">创建一个div</button> <script type="text/javascript"> var btn = document.getElementById("btn"); btn.onclick = function() { //创建一个节点 var div = document.createElement("div"); div.inne
2020-12-16 09:03:46
1169
原创 JS 作用域
作用域：全局作用域，局部作用域。变量：全局变量。局部变量。函数优先使用自身局部变量，没有局部变量，查找全局变量。全局变量：window.X
2020-12-10 16:53:14
68
原创 JS Window常用对象属性和对象方法
innerheight返回窗口的文档显示区的高度。innerwidthalert()confirm()prompt()setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。setTimeout()clearInterval()取消由 setInterval() 设置的 timeout。clearTimeout()...
2020-12-10 15:52:27
195
原创 JSON JSON使用，举例
JSON什么是JSONJSON：JavaScript 对象表示法（JavaScript Object Notation）。JSON 是存储和交换文本信息的语法。类似 XML。JSON 是轻量级的文本数据交换格式JSON 语法规则JSON 语法是 JavaScript 对象表示语法的子集。数据在名称/值对中数据由逗号分隔大括号 {} 保存对象中括号 [] 保存数组，数组可以包含多个对象//在js模拟获取数据// ``模板字符串var json = `{ "stude
2020-12-09 16:39:26
98
原创 JS函数定义，调用，递归函数，arguments对象
JS函数定义的方式普通的函数定义方式：function f1(x1,x2){return x1+x2;}var x=f1(10,20);字面量定义函数：var f2 = function(x1,x2){return x1-x2;}var x = f2(200,100);利用构造函数的方式：var f3=new Function("x1","x2","return x1+x2;");var x = f3(10,20);JS函数的调用匿名自调函数（立即执行函数），在函数定义过
2020-12-08 11:55:42
141
原创 JS 事件委托，登录切换例子
利用事件冒泡的原理，把事件委托给父级去做 <body> <ul id="ul"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> <script type="text/javascript"> va
2020-12-08 11:37:43
239
原创 JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件
addEventListener() 方法，监听事件，向一个元素添加多个事件处理程序。第一个参数是事件的类型（比如 “click” 或 “mousedown”）。第二个参数是当事件发生时我们需要调用的函数。第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。事件冒泡多个元素嵌套并调用同一个事件时，由内部子元素先触发事件，再触发父元素的事件。<body> <div id="box"> <button type="button" id="bt.
2020-12-02 16:57:26
518
原创 HTML DOM对象事件、监听事件
onblur元素失去焦点。onchange域的内容被改变。onchange 事件会在域的内容改变时发生。onchange 事件也可用于单选框与复选框改变后触发的事件。例如：可用于获取下拉框内容onclick
2020-12-01 23:32:18
306
原创 下拉框练习，使用onchange事件
onchange 事件会在域的内容改变时发生。<body> <select name="" id="s1"> <option value="">请选择省份/直辖市</option> <option value="河北">河北省</option> <option value="山东">山东省</option> <option value="天津">天津市</option>
2020-12-01 21:11:30
1353
原创 JS字符串及String 对象，对象方法
JavaScript字符串用于存储和操作文本。JavaScript String 对象String对象创建方法：new String(s);var txt = new String("string");或者更简单方式：var txt = "string";String(s);//强制类型转换var s = true;var str=String(s);//输出：true//将布尔类型s,强制转换为字符串类型String 对象属性返回字符串的长度(字符数)。va
2020-11-27 11:11:04
202
原创 JS定时器，距离XX天还有XX的倒计时
举例，距离元旦放假还有多久： <body> <div>距离元旦放假还有</div> <div id="box"></div> <script type="text/javascript"> // 获取元素 var box = document.getElementById("box"); // 调用函数 timemove(); // 定义函数 function timemove
2020-11-25 14:28:43
2253
原创 JS定时器，获取当前时间显示在页面并每秒刷新
setInterval()setInterval(code,millisec,lang)code：必需。要调用的函数或要执行的代码串。millisec：必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。lang：可选。 JScript | VBScript | JavaScript
2020-11-25 14:01:43
5756
原创 JS数组方法，另indexOf()方法、includes()方法
toString方法，把数组转换为数组值（逗号分隔）的字符串。 var fruits = [1, 2, "Apple", "Mango"]; document.write(fruits.toString()); //结果1,2,Apple,Mangojoin方法，将所有数组元素结合为一个字符串。它的行为类似 toString()，但是您还可以规定分隔符. var fruits = [1, 2, "Apple", "Mango"]; document.write(fruits.jo
2020-11-19 23:17:21
454
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人