lelewang123-CSDN博客

原创 javascript的函数作用域和块级作用域（笔记）

函数作用域在javascript中定义一个函数，函数内部的变量只能在函数内部访问，javascript具有函数作用域。块级作用域一对花括号包裹的代码被称为一个代码块，比如for循环，if条件判断等。在javascript的代码块中定义一个变量，在该代码块外面仍可使用该变量，所以javascript不具有块级作用域。在ES6中规定了两种定义变量的方式，分别为let和const，这两种定义...

2018-07-19 17:04:50 1899 1

1.思路：等腰梯形实质上是顶点在同一点的两个相似三角形叠加在一起的的非公共部分。我们知道，用CSS很容易地能做出一个三角形，所以同理，做出一个等腰梯形也不是很困难。我们只需要将内部的div水平垂直定位在外部div的内部，然后通过border大法绘出一个三角形，内部div其实并不一定要是一个三角形，因为内部div的主要用途在于覆盖外部三角形的一部分，使之成为一个等腰梯形，所以对外部div来说只需设置

2017-11-09 10:08:14 5417

原创用JavaScript实现九九乘法表

1.思路：双层循环嵌套，外层循环控制层数，内层循环控制每一层的内容。每一次进入新的一行，生成一个ul，在这个ul中不断生成新的li标签，并设置li标签的节点内容为i*j(写成公式的形式)。通过css3的一些特殊]选择器来处理边框。通过flex的justify-content属性来达到每一列ul的居中。2.CSS代码<style> *{

2017-10-24 17:06:50 1401

原创用JavaScript写一个简单的二级联动菜单

二级联动菜单指的是当后一个下拉菜单的下拉列表随着前一个下拉菜单的下拉列表选中的内容的变化而变化，这被应用在很多地方，比如填写表单时的省份和城市。现在我们做一个简单的实现。1.用JavaScript实现思路：给前一个下拉菜单绑定一个onchange事件，当事件发生时，在省份数组里寻找当前的val，根据val的索引值来确定在后一个下拉菜单中要渲染的下拉菜单列表。然后在删除下一个下拉菜单列表的子元

2017-10-15 15:56:49 2566

原创 CSS3动画

现如今，CSS3动画在页面中的应用越来越广泛，它能使页面呈现出更加炫酷的效果。下面，总结一下CSS3动画的一些属性和特点。CSS3的动画属性主要包含两部分，transition和animation。transitiontransition根据其含义，为：过渡。即由一种表现的状态变为另一种表现的状态，其中状态包括尺寸大小，颜色，字体，位置等属性的改变。transition是个复合属性，和backg

2017-10-08 16:25:27 330

原创 JavaScript事件

JavaScript事件监听document.getElementsByTagName('body')[0].addEventListener('click',callbacker(),true);给页面中的body绑定一个事件监听器，当检测到事件发生时，执行回调函数。element.addEventListener(eventType,callbackFunction,use-capture);

2017-09-30 13:11:57 225

原创 JavaScript数组的随机排序

JavaScript数组排序有两种基本方法，分别是sort（）和reverse（），但这样的排序太过单一，有些比较复杂的情况不太适合。比如我们要做随机洗牌，做拼图游戏时把每个小图随机排列，这些都要用到JavaScript的随机排列。下面是我总结的几种方法:1.利用sort（function（）{}）方法传入的参数。var arr = [1,2,3,4,5,6,7,8,9];

2017-09-27 10:17:26 303

原创 css清除浮动

给一个元素结点设置float属性，会让它脱离文档流，包裹它的父元素也会高度塌陷，进而会对它后面的元素产生影响，所以清除浮动很重要。清除浮动的方法有：给浮动元素之后增加一个div，并给这个新增的div设置class=“clear”，并且设置.clear{clear：both；}.clear{ clear: both; }优点：随用随清，无兼容性问题缺

2017-09-23 11:03:39 185

原创 flex布局（笔记）

flex布局以前的布局：float+position缺点：兼容性，麻烦flex box：弹性布局任何元素都可以指定为弹性布局 display：flex；webkit内核的浏览器，必须加上-webkit前缀。设置flex布局后，子元素的float，clear，vertical-align属性会失效。基本概念：采用flex布局的元素称为flex容器(flex container)，它的所有子元素会自动成

2017-09-09 19:39:25 356

原创 JavaScript基本概念（笔记）

1.变量和数据类型JavaScript的变量类型是松散类型的，所谓的松散类型，指的就是它不像C语言那样，在给变量赋值之前要先声明它的变量类型，比如：int x=2;而是用一个关键字var就可以声明所有类型的变量。JavaScript的变量类型分为基本数据类型和复杂数据类型。基本数据类型包括：number，string，boolean，undefined和null；复杂数据类型就比如对象。1.undi

2017-09-09 19:36:42 197

原创 JavaScript变量，作用域，内存问题（笔记）

JavaScript变量，作用域，内存在问题JavaScript变量分为基本类型和引用类型。基本类型有五种，分别是：number，string，boolean，undefined，null，引用类型包括数组，对象，函数等。基本类型的种类可以用typeOf（）方法来确定，引用类型的种类要靠instanceOf来确定。JavaScript规定不能直接访问操作对象的内存空间。引用类型的值其实是一个地址，我

2017-09-09 19:36:09 188

原创 JavaScript中常用的数组方法

1.arr.push(new element) 描述：在数组末尾处添加一个元素。返回值：新数组元素的个数。是否改变原数组：是。2.arr.pop() 描述：在数组末尾处删除一个元素。返回值：被删除的元素。是否改变原数组：是。3.arr.unshift(new element) 描述：在数组开头处添加一个值。返回值：新数组元素的个数。是否改变原数组：是。4.arr.shi

2017-08-23 14:32:26 249

原创 CSS包含块（the containing block）和与之相关的百分比属性

一个元素的大小和位置的设置与它的包含块有关。CSS包含块是个很重要的概念，通常人们认为一个元素的包含块就是它的父元素的内容区域，这是不对的。一个元素的包含块取决于该元素的position属性的值。 - position：static/relative 元素的包含块为离它最近的块状祖先元素的content-box的大小。 - position：absolute 元素的包含块为离它最近的设置定位属

2017-08-23 13:21:59 340

原创初次使用git遇到的问题

步骤： 1.在桌面上建立一个文件夹git-test，在该文件夹下建立一个.txt文件，名为readme。2.选中该文件，右键点击git bush，用命令行操作。3.git init 用git控制该文件，这时候，该文件夹里便会出现一个隐藏的.git文件夹。4.git add readme.txt5.git commit -m "add files" 若出现 please tell me who a

2017-07-25 20:19:07 265

原创下拉菜单的手风琴效果

html代码<div class="site-nav"> <ul class="site-accordion"> <li> <div class="tab-head">学科领域</div> <ul class="tabs-list"> <li>机械电子</li> <

2017-07-23 14:07:46 862

原创用伪类制作小三角形的位置问题

问题描述：在下拉菜单中会常常用到用伪类（：after）制作小三角形。然而小三角形的位置通过padding和margin却很难控制。采用position：relative可以很好地控制其位置。代码： html代码<div class="tab-head">学科领域</div>css代码.site-accordion>li .tab-head:after{ content: '';

2017-07-23 13:42:45 1377

原创用jQuery实现倒计时

用jQuery实现倒计时思路：动态获取当前的时间和截止时间，将二者的时间差转换成相应的格式显示到页面上。代码：<script type="text/javascript"> var deadline=new Date(2017,6,18,0,0,0); setInterval(function(){ var curren

2017-07-17 11:11:34 825

原创移动下划线导航（magicline navigation）

移动下划线导航(magicline navigation)效果：当鼠标移到相对应的导航上时，导航栏下面的下划线也会移到相应的位置；当点击相应的导航时，会展现出不同的内容。实现：html+css+jQuery思路：写好布局，下划线的内容的展示区域为绝对定位。下划线默认位置为导航的第一项，当鼠标移到相应的导航上时，改变下划线的定位值，当鼠标点击相应的导航项时，通过改变每个导航项对应内容区域的z-inde

2017-07-15 18:50:30 918

原创常用的水平垂直居中方法

1.单行文字的居中（1）水平居中：text-align：center；（2）垂直居中：设置height = line-height；（3）水平垂直居中：（1）+（2） 2.普通容器的居中（1）已知容器的宽高负margin配合绝对定位.main{ width:500px; height:500px; background: lightgreen;

2017-07-15 18:25:17 251

原创 css三栏式布局

css的三栏式布局所谓的三栏式布局，指的就是在一个容器里三个div，呈左中右并列排布。其中左右两栏宽度固定，中间一栏根据浏览器窗口宽度自适应。这是一种很常见的布局方式。根据自己的总结和查阅资料，现对三栏布局的方法作以总结。 1.普通方法 html代码： <div class="box"> <div class="left"></div>

2017-06-06 11:40:51 410

原创 css中的定位（position）

w3c中对position各个属性值定义： static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文

2017-03-20 20:30:33 309

lelewang123的博客