- 博客(36)
- 收藏
- 关注
RSS订阅原创 vue-element快速开发（vs-code）
简单表单el-form[:model=''][label-width='']>(el-form-item[label=''][prop='']*17)*1单选框el-radio-group[v-model='']>(el-radio[:label=''])*1复选框el-checkbox-group[v-model=''][@change='']>(el-checkbox[v-for='(item,index) in options'][:label='item.label'][
2021-01-27 10:54:37
169
原创 element input限制只能输入数字
onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
2020-08-24 17:27:06
754
原创 适配pc和移动的官网项目(解决同一元素touch事件穿透影响mouse事件和元素不能滚动==横向滚动)
看了网上非常多的解决方案，都是通过js来解决，我根据这些方案尝试解决，但是啥也不是滚动条隐藏的css::-webkit-scrollbar{/*隐藏滚轮*/display:none;}使用媒体查询判断当前是适合移动还是pcpc端css touch-action:none;移动端csspointer-events:none;可以绑定touch事件 addEventListener动态设置...
2020-07-12 22:50:32
172
原创 微信小程序中函数括号中的参数返回的是什么？
function(e){}e代表的是整个事件对象事件对象如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。BaseEvent 基础事件对象属性列表：属性 类型 说明 基础库版本 type String 事件类型 timeStamp Integer 事件生成时的时间戳 targe...
2019-06-13 15:42:02
3125
转载 懒加载和预加载的区别
预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源 预加载增加了服务器压力，换来的是用户体验的提升，典型例子是在一个图片较多的网页中，如果使用了预加载就可以避免网页加载出来是时，图片的位置一片空白（图片可能还没加载出来），造成不好的用户体验；懒加载的作用减少不要的请求，缓解了服务器压...
2019-05-08 21:05:19
672
原创 var和let和const的区别
一、var声明的变量会挂载在window上，而let和const声明的变量不会：这里的挂载指的是用户通过系统自定义对象可以访问此变量var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console....
2019-05-08 17:59:26
196
原创 canvas画布带时间的钟表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title></head><body> <canvas id="sb" width="1000px" h...
2019-05-08 14:43:34
383
原创 自定义画板中如何改变绘制线条颜色，保持之前的颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0p...
2019-05-07 22:03:37
655
原创 旋转太极图
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>太极</title> <script src="script.js" type="text/javascript"></scrip...
2019-05-07 21:59:19
569
原创 使用css3制作照片墙
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin:0p...
2019-05-05 18:26:24
652
原创 论CSS3中的各种样式的花式应用
一、border-radius 的设置顺序是一个顺时针方向 1.左上角 右上角 右下角 左下角四个值2.左上角、右上角和左下角 、右下角 三个值 3. 两个值是 左上角和右下角 右上角和左下角4.一个值时，四个值相同二、border-image:路径(url) 裁剪位置(border-image-slice) 重复性(border-image-repeat)裁剪位置 是上右下左顺序 一...
2019-05-03 01:59:33
192
原创 如何使用div创建三角形
border-left: 50px solid black;border-right: 50px solid transparent;border-top: 50px solid transparent;border-bottom: 50px solid transparent;实现原理使用边框实现，使想要的一个三角形出来就设置一个背景颜色，其他边框的背景颜色设置为透明然后使用tran...
2019-04-30 12:31:38
1374
原创 使用定位使一个图片上下左右居中
margin：auto;position:absolute;top:0px;right:0px;bottom:0px;left:0px
2019-04-30 12:27:43
1015
原创 使用事件冒泡处理事件委托(可修改的留言板)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul id="one"> </ul> <textar...
2019-04-29 14:40:04
126
原创 如何动态动态插入图片再获取图片高度
//.tp获取所有图片 使用load方法加载DOM节点，再返回该节点的一个属性值$(".tp").load(function(){ var sjk = $(".tp").eq(0).width(); var sjg = $(".tp").eq(0).height(); })...
2019-04-26 11:18:11
481
原创 jQuery瀑布流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding:...
2019-04-25 21:27:54
153
原创 jQuery放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding: 0px } ....
2019-04-25 11:31:32
240
原创 封装的多张轮播图片滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding: 0px; } ...
2019-04-24 15:01:30
525
原创 jsonp原生与jsonp的ajax封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body id="body"> </body> <script type="tex...
2019-04-23 12:13:23
154
原创 mouseenter mouseleave 和 mouseover mouseout的区别
当仅仅想要出发当前元素的悬浮效果和去悬浮效果时使用mouseenter和mouseleave而想要出发当前元素包括其子元素时使用mouseover和mouseout
2019-04-21 16:07:20
80
原创 index()传参和不传参两种方法的比较(应用于选项卡)
var index = $("li").index(this);返回的是当前元素在li集合中的索引位置，具有明确的目的性查找var index = $(this).index()返回的是当前元素在同辈元素中的索引位置，是同辈元素中查找，没有明确的目的性所以个人比较喜欢使用第一中方法做选项啊...
2019-04-21 16:03:04
272
原创 购物车实现勾选框选中再传递值(超简单版)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="checkbox" value="0" name="test...
2019-04-21 15:41:05
2629
原创 使用each函数显示当前下列表的值
<select name="" id="dsb"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option...
2019-04-19 10:14:39
104
原创 如何保持留言板添加的元素最优先显示
function boxScroll(o){ o.scrollTop = o.scrollHeight;}o是当前元素scrollTop当前元素滚动条距离当前元素顶部的位置scrollHeight当前元素内容的总高度使两者相等保持添加元素的最优先显示...
2019-04-18 17:16:56
108
原创 jQuery的做法(凡客商城左侧导航栏做法)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin:0px; padding:0px; } u...
2019-04-17 21:02:47
560
原创 Jquery获取下拉列表的值与原生js获取下拉列表的值
//jQuery获取//获取选中当前下拉列表的文本内容#sec 下拉列表设置的id名var xlihtml = $("#sec option:selected").text();//获取选中当前下拉列表的值var xlihtml = $("#sec option:selected").valt();//js获取//获取当前下拉列表的文本(第一种)var text = "";fo...
2019-04-16 19:14:09
1395
原创 论使用Ajax和JSON混合使用做出随机图片的例子
1.首先调用封装好的ajax.js文件2.使用ajax.js中的ajax方法3.方法中使用键值对的形式写出来4.url文件路径 method获取方式post/get success成功后的回调方法5."success":function(e){}e相当于JSON文件中的数据，但是的得到后是一个string类型的数据，所以需要强制转化伟JSON数据类型var a = ...
2019-04-15 17:15:35
160
原创 10秒倒计时
10秒倒计时，第一想到的是setInterval和一个数字累减的方法声明一个全局变量，用以保存倒计时的初始数值关键点在于每次点击时判断用于储存定时器是否清空，不清空则会出现影响清空定时器时，使用保存定时器的变量为null...
2019-04-08 17:42:31
930
原创 闭包的用法
闭包的关键在于一个returnvar i = 0;function ooo(){ function ppp(){ i++;return i;}return ppp();}调用时其实关键看的是最内层的函数的一个返回值效果，return ppp()是返回给ooo()方法的一个值，把整个ppp()方法看作是一个整体，最后调用时看的是最内层的一个方法的...
2019-04-05 17:58:08
210
原创 论字符串对象中substring、substr、slice的区别
substring(参数1，参数2)substring是左闭又开区间，即获得包含参数1，小于参数2之间的子串，参数不可以是负值。只写参数1，不写参数2,可以获得包含参数1在内参数1之后的所有字符slice(参数1，参数2)同样是左闭右开区间，和substring用法相同(只是substring不可以写负值)，参数可以是负值，当参数是正值时，也同样可以只写一个参数(包含正负值)，获得...
2019-04-05 17:48:36
404
原创 弹性盒子的初步认识
给父级盒子设置display:flex属性，然后再子级盒子中设置flex：1(想要划分的几等份)，这样父级盒子就会自动平分盒子宽度，使每个盒子宽度相同，想要合并几个盒子，子级盒子设置另外的类名，然后使用后代选择器，.父级选择器名字 .想要合并的子级选择器名字，使用flex：2（想合并几个就合并几个）属性对其进行盒子合并...
2019-03-22 11:20:18
93
原创 行标签、快标签、行内块标签有哪些
行标签：<a> <i> <span> <em> <u> <br> <strong>块标签：<div> <ul> <li> <ol> <dl> <dt> <dd> <h1>~&...
2019-03-21 17:49:58
4369
原创 使用兄弟相邻选择器做出纯css和html的静态拟态动态轮播图
使用一个大的div包含一个图片和一个无序列表，图片是一直存在的，除非点击这个div里的其他元素，这个元素才会消失，使用.父类选择器的名字:hover空格.想要子类选择器名字(实现某项功能){css样式}无序列表使用定位，最优先级显示，每个li后面加一个图片，然后使用相邻兄弟选择器，.子类选择器:hover+.图片的选择器名字{css样式}图片使用定位使所有的图片进行重叠...
2019-03-21 16:59:42
393
原创 前端中i++和++i的区别
i++是先进行输出后进行计算，而++i是先计算后进行输出。例子var a = 1;a++;alert(a);输出结果为2var a = 1;++a;alert(a);输出结果为2var a = 1;alert(a++);输出结果为1var a = 1;alert(++a);输出结果为2...
2019-03-21 11:30:31
523
原创 论行标签、块标签、行内块标签的区别
首先我之前一直认为行内标签设置padding属性的上下左右仅左右有效，而实验过后知道行内元素的padding的四个属性都能设置，但是对于外边距margin仅设置左右有效。其特点1.不能设置宽高2.设置padding属性都有效3.设置margin，仅对左右有效而对上下无效块标签不做过多的解释，其特点1.能设置宽高2.设置padding的四个属性均有效3.设置margi...
2019-03-18 21:03:11
740
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人