- 博客(27)
- 收藏
- 关注
RSS订阅原创 JavaScript一些判断写法
例1：if else if elseconst fn =(status)=>{ if(status === 1.1){ console.log(1); }else if(status === 2){ console.log(2.2); }else if(status === 3){ console.lo...
2018-11-13 18:32:51
338
1
原创 短信验证功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单注册</title> <style> body { margin: 0; paddin
2018-11-05 11:56:09
269
原创 react
React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React是 MVC 中的 V（视图）。MVC:model view controllerReact的概念：组件 ，JSX ，virtual(虚拟) DOM ，Data FlowReact的使用：1.直接下载三个库： react.min.js 、react-dom.min.j...
2018-10-26 18:01:04
233
原创 export、export default、import区别:
1.export与export default均可用于导出常量、函数、文件、模块等，2.然后在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名 from '' 的方式，将其导入，以便能够对其进行使用，3.但在一个文件或模块中，export、import可以有多个，export default仅有一个4.通过export方式导出，在导入时要加{ }，export...
2018-10-25 17:15:02
179
原创 CSS实现水平垂直居中
如何用CSS实现盒子的水平垂直居中在实际工作和面试中都常有出现，在此做一次总结：1.定位，父相对，子绝对，返回自身宽高的一般。需要知道子元素的宽高<style>*{ padding: 0; margin: 0;}.box{ width: 600px; height: 600px; background-color: #000; ...
2018-10-24 12:00:50
131
原创 flex布局
最近做支付宝小程序项目，用到了flex布局，为此，做一些总结记录;## flex布局：弹性盒子布局。 display: flex;- 注意：使用Flex布局之后，里面的float、clear、vertical-align属性将失效- Flex容器有以下6个属性. ①flex-direction. ②flex-wrap. ③flex-flow. ④justify-cont...
2018-09-13 18:03:21
190
原创 做一些整理
position1)relative 相对定位相对自身,不脱离标准流 2)absolute 绝对定位相对非静态定位的父级元素，脱离标准流 3) fixed固定定位相对浏览器，脱离标准流 怎样清除浮动？1)额外标签法 给父元素最后添加一个 块级子元素, 给这个子元素, 设置 clear: both; 2)overflow:hidden 给父元素设置overflow:hidde...
2018-08-30 17:38:04
132
原创 数组和字符串内置对象的总结
Array 数组 创建一个新的数组 var arr=new Array();push() 从数组最后面增加一个或多个元素，原数组改变，返回值是这个数组的长度pop() 从数组最后删除一个元素，原数组改变,返回值是被删除的元素\unshift() 从数组的最前面增加一个或多个元素，原数组改变，返回值是这个数组的长度shift() 从数组最前面删除一个元素，原数组改变,返回值是被删除的...
2018-08-30 17:20:19
222
原创 分别用css,js,jquery实现一个持续动画效果
1.使用css实现一个持续的动画效果div{ width: 200px; height: 200px; /* 动画的元素一定要是定位的 */ position: absolute; background-color: green; /* 使用一个动画 */ animation: dong 1s infinite linear; }...
2018-08-30 16:43:28
2190
原创 前端面试题整理
1工作中用到的前端优化：用js的图片懒加载解决网站图片过多，一次性加载慢的问题 CSS、JavaScript代码压缩合并 使用CSS Sprint，雪碧图 精灵图 使用CND 使用打包工具,例如webpack2原型链和继承：原型 构造函数 实例 prototype constructor _proto_ 3怎么样实现继承：call(...
2018-08-30 14:35:59
757
原创 Vue路由的使用
路由即：浏览器URL中的哈希值（# hash）与展示视图内容（template）之间的对应规则路由就是一套映射规则（一对一的对应规则），由开发人员制定规则。当URL中的哈希值（# hash）发生改变后，路由会根据制定好的规则，展示对应的视图内容<style> /* 路由高亮，自动添加样式在此页面的链接导航上 */ .router-link-exact-active,...
2018-08-01 10:00:28
178
原创 组件通讯
组件是一个独立封闭的个体，不能直接使用外部的数据，组件可以为自己提供数据，通过 data（）{return{msg：'...'} }父组件到子组件 通过子组件 props: ['属性']<body> <div id="app"> <father class="father"></father> </div>
2018-07-31 18:05:58
474
原创 Vue全局组件和局部组件
Vue实例中的配置项： data、computed、watch、methods 以及生命周期钩子函数(created,mounted)等Vue 全局组件<body> <div id="app"> <home></home> </div> <script src='./vue.js'><
2018-07-30 17:26:37
1074
原创 Vue基础总结
Vue是什么？是一套构建用户界面(UI)的渐进式JavaScript框架1.安装：`npm i -S vue`2.引入：<script src="vue.js"></script>3.HTML：<div id="app">{{ msg }}</div>4：script： var vm = new Vue({el:'#app',data:{ms...
2018-07-30 16:54:49
190
原创 左侧固定，右侧自适应
方法一： <style> .box1{ width: 100px; height: 500px; float: left; background-color: red; } .box2{ margin-left: 100px; height: 500px; background-color: blue; } </style> <body> <div cl...
2018-07-30 09:38:30
166
原创 数组去重
用一行代码去重[...new Set([1,2,3,1,'a',1,'a'])]var arr = [1, 2, 3, 5, 6, 7, 2, 3, 54, 2, 645, 1, 2, 64, 23, 42, 1, 342, 4, 24, 23, 1, 42, 42, 42];//方法一:var newArr = [];for (var i = 0; i < arr.le...
2018-07-29 22:01:34
164
原创 算出字符串中出现次数最多的字符是什么，出现了多少次
<script>//算出字符串中出现次数最多的字符是什么，出现了多少次var str = "adadfdfseffserfefsefseeffffftsdg";var arr = str.split('') //1 . 将字符串切割成数组var obj = {}; // 2. 创建一个空对象// 3. 遍历数组，判断对象中是否存在数组中的值，如果存在值+1，不存在赋...
2018-07-29 21:39:50
1173
原创 字体图标的使用
阿里巴巴矢量图标库官网1，首先百度iconfont,找到阿里巴巴矢量图标库官网(http://www.iconfont.cn/), 然后注册登录,或者用github登录也行。2，查找自己需要的字体图标，加入购物车，下载代码到本地文件夹。3，把下载的文件添加到项目中 <link rel="stylesheet" href="font_aqil4ao5abgldi/iconfont...
2018-07-29 10:53:25
216
原创 AJAX判断用户名是否存在
html:<body> <input type="text"><span></span> <script> //思路：当input框失去焦点的时候 //1. 使用ajax发送一个get请求，把输入的用户名传递到后台 //2. 应该获取到后端给我们的响应（yes/no），根据yes还是no显示对应的信息即可 va...
2018-06-08 20:13:53
3131
原创 C3新增的一些属性总结
C3的选择器：1.关系选择器：ul>li子代选择器 ul li后代选择器 .now+li后一个兄弟为li的元素 .now~li后面所有为li的兄弟元素2.属性选择器：li[属性||自定义属性 ='值'] li里面属性或者自定义属性=值的元素 li[属性] 所有有此属性的元素 ...
2018-06-06 10:07:29
3685
原创 BFC的一点总结
BFC:块级格式化上下文，它是一个独立的渲染区域，父盒子触发BFC，不允许子元素去影响外界元素；触发BFC的情况： 1.overflow：hidden /auto / scroll 2.float:left float:right 3. display: inline-block /flex/table 4. position: absolute / fixedBFC作用： ...
2018-05-28 19:51:07
244
原创 表单验证
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0;
2018-05-28 14:25:04
343
原创 自定义播放器
HTML：<div class="bgBox"> <div class="left"> <div class="video-box"> <video src="movies/movie01.mp4"></video> </div>
2018-05-27 21:27:29
1026
原创 简单拖拽案例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0;
2018-05-27 20:05:10
440
原创 轮播盒子
HTML：<div class='nav'> <ul> <li class='color'>渡梵尘</li> <li>渡梵尘</li> <li>渡梵尘</li> <li>渡梵尘</li> &a
2018-05-27 11:22:39
678
原创 立方体
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0;
2018-05-26 15:34:09
232
原创 案例1
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--1.编写一个程
2018-05-26 15:23:40
254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人