前端
关注
分享
扫一扫
Start-ZJ
苦逼大学生，技术菜如狗，码力百分五。
展开
-
多级下拉框的实现
var DataList = [];/* 后端传回的下拉框数据放在这里 */var isopen = [];/* 用来存放下拉框的展开或者是收缩状态 *//* lessSonImg方法是在初始化的时候调用，目的是把所有的子数据收起 */lessSonImg = function () { for (var i = 0; i < DataList.length; i++) {...原创 2020-05-05 10:07:55 · 776 阅读 · 0 评论 -
文字走马灯效果的实现
核心思路是通过用margin-left这个属性来控制div的定位，通过不断提高margin-left的值来实现走马灯的效果。下面是JS的代码 var marginleft = $('#demo').css('marginLeft'); marginleft = marginleft.toString(); marginleft = marginleft.substring(0, ...原创 2020-04-15 10:15:04 · 1111 阅读 · 0 评论 -
antd的异步加载树组件使用
import { TreeSelect } from 'antd';class Demo extends React.Component { state = { value: undefined, treeData: [ { id: 1, pId: 0, value: '1', title: 'Expand to load' }, { id: 2, ...原创 2020-03-14 10:37:50 · 6130 阅读 · 0 评论 -
利用github和hexo搭建个人的博客
一.下载git1.git的网址https://git-scm.com/2.我的是windows版，打开页面点击红框中的Download XXX for Windows，点开后会自动跳转页面并弹出下载框，没有弹出的可以等一会或者是刷新重试。3.下载完成后开始准备安装git基本上安装步骤就这几个，有可能随着安装版本的不同会多...原创 2020-02-06 10:59:17 · 161 阅读 · 0 评论 -
JS导出文件的方式
### 第一种是新开一个网页下载window.open(filepath);### 第二种是在当前网页下载window.location.href = filepath;原创 2020-01-19 14:53:19 · 820 阅读 · 0 评论 -
CSS的一些小总结
CSS的一些小总结在实现当删除某个div块后，后续的div块能自动补位时，可以不用JS的效果，直接把div设置成float属性，利用浮动的特性来完成这样效果。在设置浮动时，如果div里还需要一个通过弹性布局完成的效果，那就再加一个，反而能节省很多代码量，效果也更好。...原创 2019-12-28 11:47:03 · 115 阅读 · 0 评论 -
jQuery实现判断文本行数
现在有一个项目，需要我去判断一个div中的文本有几行。如果超过两行则省略并显示省略号，同时会弹出一个显示全部按钮，点击按钮加载全部文本。多行省略的话用CSS就可以实现了。以下是超过两行省略的CSS代码，即：.webkit2 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; ...原创 2019-11-26 11:40:15 · 2433 阅读 · 1 评论 -
React中的this为什么需要bind()来绑定(初步认识)
为什么要用bind等方法来绑定this？- 这是因为在实际使用的过程中，我们肯定是希望this指向的是触发dom事件的对象，但是由于组件本身是有一个渲染的过程的，实例函数都是由构造函数不断重新构造渲染的，所以就算一开始this指向的是触发时间的实例函数，但是在重新渲染的时候由于需要重新走一下构造函数，所以this所指的对象就会改变(应该是变为构造函数，或者是windows(也就是全局))所以我...原创 2019-11-19 09:29:14 · 947 阅读 · 0 评论 -
React组件的生命周期(粗略)
Mountingconstructor()componentWillMount()render()componentDidMount()UpdatingcomponentWillReceiveProps()shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()Unmounting...原创 2019-11-15 09:40:37 · 129 阅读 · 0 评论 -
ES6中的箭头函数部分总结(This)
箭头函数箭头函数中的This箭头函数中的this是确定好目标的(ES5中的this是谁调用，指向谁)，即ES6中的this是定义的时候就已经确定好的。箭头函数中的This总是指向其父级上下文环境(也就是父级的环境)。箭头函数是不可以用new的，也就是不能作为构造函数(因为箭头函数里根本就没有this)。同时也是无法使arguments参数(想使用可以用rest参数来代替)。个人理解：普...原创 2019-11-08 17:30:50 · 272 阅读 · 0 评论 -
React的一些理解(部分)
React-CSDN在元素集合中要用一个标签把所有的标签都包裹起来(通常用< div >…< /div >)。如果要给一个标签元素添加一个自定义属性的话用data-(XX)前缀,前缀可以自己起，data-是一定要的。jsx中可以使用js在React中使用css样式的话不要写class，用className，因为在es6中class是一个保留字，还有一个就是for要...原创 2019-11-04 19:47:08 · 202 阅读 · 0 评论 -
jquery实现类似微信输入框的输入聊天框
最近在切一张聊天页面的时候需要实现一个类似于像微信一样的聊天输入框，即输入框的高度会随着内容的增加不断增高。综合了一下网上的思路目前有依靠keyup来判断的，但是这种方法在遇到一次性输入大量文本的时候好像有点问题，而且在遇到删除文字时好像也有点问题。还有一种是依靠定时器来解决。当用户的焦点在输入框的时候隔一段时间就检查输入框里文本的实际高度，一旦实际高度大于输入框的高度，即把输入框的高度调成与...原创 2019-10-22 17:26:56 · 1260 阅读 · 0 评论 -
用juqery实现的简单轮播图
这几天一直有需要用到轮播图的需求。之前也没写过，索性自己写一个自己的轮播图轮子。目前是实现了自动轮播，按左右箭头和序列点可以左右跳转和固定跳转图片。感觉目前也没什么很缺的功能了，轮播图的要求大部分也就以上三点。我的轮播图的实现思路是通过图片的显示隐藏配合图片的变换动画，我还有看到是通过调整图片条的显示范围来达到轮播图的效果和通过层级显示来达到相同效果的。以下是代码：<!...原创 2019-10-22 10:40:33 · 177 阅读 · 0 评论 -
frame和iframe
frame和iframe的区别frame的作用是设置一个框架页面，即在打开的页面里都是frame的内容。而iframe的作用是设置一个行内框架，即打开的页面里部分是iframe。这个部分的具体大小由自己决定。frame和iframe的使用差别frame需要放在frameSet中配套私用，而iframe不需要。frame不能放在body中，iframe可以如果iframe嵌套在...原创 2019-09-28 17:51:23 · 311 阅读 · 0 评论 -
用JS实现的猜数字游戏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script defer type="text/javascript" src="JS/jquery-3.4.1.min.js...原创 2019-09-25 14:02:01 · 952 阅读 · 1 评论 -
JavaScript标签中的sync和defer
JavaScript中的sync和defer都是异步加载的属性，使得加载JS时不会阻碍H5元素的加载，那么两者的区别在哪呢？defer的加载是按顺序顺序的，即一个JS2号文件异步加载好后，只要你前面的JS1号文件没有加载好，那么JS2号也会等一号JS文件加载好后在开始加载。而sync的异步加载是谁先好了谁先上。所以在实际运用中，当各个JS包互相依赖时，不要使用sync，毕竟你没法确定当你的一...原创 2019-09-25 10:03:30 · 1003 阅读 · 0 评论 -
HTTP的三次握手和四次挥手
三次握手和四次挥手我尝试用简单的话来解释三次握手和四次挥手，因为我也刚刚开始学，如有错误欢迎指正。通俗版的解释1.1三次握手客服端向服务器发送请求服务端收到请求，同意发送客户端收到了服务端的答复，并表示知道了。1.2四次挥手客户端表示我想要关闭连接了服务器表示知道了(但是这时候还没有关闭，因为可能服务端的信息还没传完)。服务器表示我已经关闭了(这时候确认信息传完了)。客...原创 2019-09-24 09:40:12 · 196 阅读 · 0 评论 -
AJAX的使用
AJAX1.AJAX是什么Ajax的全称是Asynchronous JavaScript and XML,中文定义为”异步JavaScript和XML”，Web2.0技术的核心。由多种技术组合而成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。个人的感觉AJAX就是一个用来的交换获取/传输数据的JS方法...原创 2019-09-18 14:52:36 · 133 阅读 · 0 评论 -
CSS中的:first-child、nth-child()与nth-of-type()
今天运用到了first-child与nth-child()，发现怎么也用不对，重新查了下发现自己对这两个伪类的理解有错误，就重新开个帖子。first-child先来段代码:H5:<div> <h2>2</h2> <p>XX</p> <p>XXX</p> <p>XXXX</p>...原创 2019-09-15 11:00:15 · 394 阅读 · 0 评论 -
Jquery
之前一直在想着要怎么才能使用Jquery，似懂非懂。昨天临时需要做一个div滑出的效果，尝试用Js写了一下，真的是要累死人。后来想起来Jquery也有类似的效果，只要七八行就完成了，瞬间秒懂了为啥都在说Jquery好用。具体是用是先去Jquery官网(https://jquery.com/download/)下一个文件，文件很小，放心下。下完放到自己前端的文件里，然后就可以舒舒服服的用Jq...原创 2019-08-06 16:45:00 · 185 阅读 · 0 评论 -
Flex布局
之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。现在总结下大概的用法。flex是把一个div分成主轴和交叉轴，其中主轴方向的定位有三个。1.flex-direction：这个是决定主轴的方向。row(从左到右)|row-revers(从右到左)|column(从上到下)|column-revers(从下到上)...原创 2019-08-07 15:02:31 · 4144 阅读 · 0 评论 -
inline-block布局
最近在看一个H5网页怎么用inline-block来调整布局。因为在工作中公司不提倡使用position来定位。所以最近看了flex的弹性布局，float浮动和今天的inline-block内联块元素。一般来说用到inline-block都会想到inline和block。所以就说说这两的特点。inline的特点:1.能使元素变成行内元素。让元素可以在一行里并排，不会换行。2.不能更...原创 2019-08-10 14:40:29 · 415 阅读 · 0 评论 -
position布局
position也是flex的其中一种。position的属性有absolute，relative,fixed,static,sticky,inherit,initial。其中主要用到的就是前四个。1.static就是默认值，没有采取定位。2.absolute会将元素脱离文本流，同时相对于父元素进行定位。3.relative会保留其文本位置，同时相对于原本的位置进行定位。4...原创 2019-08-10 15:26:49 · 316 阅读 · 0 评论 -
inline-block的上下排列对齐问题
今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。如图：具体的H5代码：<div class="modify-rank-install"> <ul> <li class="modify-rank-install-big"><div><p>KKKKKK</p...原创 2019-08-10 18:09:06 · 2131 阅读 · 0 评论 -
JS的延迟加载
今天写一个很简单的JS代码的时候遇到一个问题，就是第一次获取H5里的class数目永远都是为0，找了很久后来发现的JS的加载顺序问题。因为很多时候都是把JS文件放在head里，这时JS的加载就会先于H5的内容，所以在加载时JS查找class的数目当然就为0。知道了问题出在哪就好解决了，只要把JS的链接放在H5的</bady>前就可以，这样网页就是先加载H5内容在加载JS代码。...原创 2019-08-16 15:32:29 · 151 阅读 · 0 评论 -
在输入框加入搜索图标的问题
最近遇到了一个需要在搜索框内加入一个放大镜图标的需求，就像是这样。这个本来是挺好解决的一个问题，只要在搜索框内加两句background-image: url('../Imgry/fangdajing.png');background-repeat:no-repeat;/*图标是否重复*/就可以了。都是现在的问题是图标并不是在边缘(网上搜索了下大部分都是在最左或者最右)，所以必...原创 2019-08-13 09:50:50 · 3290 阅读 · 0 评论 -
用Jquey实现双击图片放大和触摸放大的功能。
最近有个新的需求，就是双击图片会显示原图。个人的思路是先让图片按百分比显示，在通过jquery 的dblcliock()方法来实现双击触发的思路。这个是H5的代码：<div class="body-div1"> <img id="dbutton" class="photo" src="shuangjifangda.jpg" alt=""> ...原创 2019-08-27 12:03:29 · 2311 阅读 · 0 评论 -
3. JS中常用的数据类型
基本数据类型数字Number 常规数字和NaN字符串String 所有用单引号，双引号，反引号(反引字符串)包起来的布尔Boolean True/False空对象指针Null未定义undefined引用数据类型对象数据类型 object{} 普通对象[] 数组对象/1?[1-9]$/ 正则表达式Math 数学函数对象Data...原创 2019-09-05 21:59:26 · 217 阅读 · 0 评论 -
4.内存存储
内存存储第一种是普通的简单类型。分为三步。第一步是先创建变量存储空间第二部是创建值储存空间第三部是将两个关联。leta = 12;letb = a;b = 13;console.log(a); =>12第二种是复杂的类型。这时候会先创建一个堆内存，然后将堆内存的地址放到值存储空间里。letn = {name: '南宁'};let m = n;m.na...原创 2019-09-05 22:02:33 · 152 阅读 · 0 评论 -
5.数据类型的检测
数据类型的检测检测数据类型的方式有四种：typeof [val]: 用来检测数据类型的运算符instanceof :用来检测当前实例是否率属于某个类constructor :基于构造函数检测数据类型(也是基于类的方式)object.prototype.toString.call(): 检测数据类型最好的办法其中最完美的是object.prototype.toString.call...原创 2019-09-05 22:03:11 · 223 阅读 · 0 评论 -
1.创建变量的几种方式
创建变量的几种方式ES3中创建变量是用1.var a =10;而在ES6中是用2.let a=10;3.const c =10;用const创建的变量是不可修改的，一般是用来声明π这样不变的。即可以理解成是常量。 创建函数也相当于是一个变量。4.function fn（）{ xxx}ES6中创建类也相当于是一个变量5.class a{ xxx}ES6...原创 2019-09-05 22:03:48 · 1430 阅读 · 0 评论 -
CSS实现超出一定行数后省略文字并显示点点点
单行省略： width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行后省略的情况： width:100% overflow : hidden;//超出的部分隐藏 text-overflow: ellipsis;//...原创 2019-09-07 09:43:40 · 673 阅读 · 0 评论 -
变量提升和函数声明提升
变量提升和函数声明提升之前一直在看变量提升和函数声明提升的讲解。看了很多但是实际操作中感觉掌握的还是不太好，索性整理一下1.变量提升变量提升的作用域是整个函数，var声明的函数会被提升到所在作用域的最顶端。意思就是说函数中的所有地方都是变量提升的范围，但是只会提升到所在作用域的顶端。function f (){ console.log(y)//undefined var y =...原创 2019-09-07 10:37:06 · 461 阅读 · 1 评论 -
jQuer的一些方法
jQuery这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。$(document).ready(function(){ 代码内容...});简写版本:$(function(){ 代码内容...});事件方法语句(以点击为例)$('.button').click(function(){ 代码内容......原创 2019-09-10 14:52:53 · 250 阅读 · 0 评论 -
JS中For循环中嵌套setTimeout()方法的执行顺序
今天突然想到了之前看过一个在For循环中执行setTimeOut()方法的代码，那时候对输出的结果不是很理解。今天就来详细的记录下。先贴一段简单的代码：function time() { for(var i= 0;i<5;i++){ setTimeout(function () { console.log(i...原创 2019-09-12 11:27:37 · 3636 阅读 · 0 评论 -
自适应状态下图片的缩放问题
今天遇到了一个问题，就是在制作自适应网页时DIV中的图片无法做到同div一同缩放。后来发现以下代码可以解决。这个是H5的代码<div class="badyOneBlock1Photo"> <img src="Imagry/photo.png" alt="" class="badyOneBlock1Photo1"></div>CSS代码：...原创 2019-08-08 15:40:06 · 1033 阅读 · 0 评论