wxk_前端开发-CSDN博客

原创 bootstrap使用动画

boorstrap使用动画一般需要两个配合( wow.js 库 aimate.css库)1.下载wow.js( 网址：https://github.com/matthieua/WOW/blob/master/dist/wow.min.js) 下载过后把wow.js文件放在自己建立的wow文件夹下，并引用2.在body里面加上下面的js代码<script> var wow...

2018-06-25 19:48:05 7967 2

原创 css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是 flex-basis ，basis英文意思是<主要成分>，所以他和...

2018-06-21 21:34:26 83474 32

1.建立图标库首先小编我先从阿里巴巴矢量库中选取几张图片，注册过的可以直接进行登录，然后点击需要的图片放入库中，建立一个文件进行下载，下载的文件是个压缩包，进入正确的路径中解压会看到文件中有多个子文件，我们只选择.eot、.svg、.ttf、.woff这四个文件，保存到自己需要开发的字体文件夹下，我的是fonts文件夹。这里先在css样式中建立图标库@font-face{ font-fami...

2018-06-19 21:10:38 3180

原创 CSS3地图热点区域动画的两种方法

第一种方法：在某个热点的外围添加一定宽度的阴影，利用动画使每个热点放大一定量的倍数(倍数不能太大，要紧凑)，这时在热点外围用伪元素作用的阴影就会随着热点的放大而进行放大，从而达成一定的效果。①建立动画 @keyframes mydot{ 0%{ transform: scale(1); } 10%{ transform: s...

2018-06-14 20:40:13 3632

原创 canvas实现不规则波浪

1.html中用canvas标签 <canvas id="canvas" width="1920" height="200"></canvas>宽高根据自己需要自己定义适用于PC和H52.js部分 <script> var canvas = document.getElementById('canvas'); ...

2019-05-22 16:57:42 1051 1

原创雪花特效

1.不仅适用于pc ，而且适用于H52.下面是 js 部分，用的时候直接新建js文件，把下面的代码直接复制过去。(function (window, document, undefined) { // 存储所有的雪花 var snows = []; // 下落的加速度 var G = 0.01; var fps = 60; // 速...

2018-12-20 18:06:23 569

原创 jQuery入门、jQuery选择器、jQuery操作

# 一、什么是jQuery及如何使用## 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。)，核心理念是write less,do more(写得更少,做得更多) ## 1.2 jQuery 和 Js 的区别**Javascript是一门编程语言，我们用它来编写客户端...

2018-08-01 21:52:46 436

原创 JS原型链

一. JS原型的简单理解 1..1 prototype prototype:是一个函数的属性，每个函数中都会有一个prototype属性，这个属性是一个指针，指向一个对象。在JavaScript中原型是一个prototype对象，用于表示类型之间的关系。 1.1.1 prototype定义每个函数都有一个prototype属性，这个属性是指...

2018-07-25 20:38:29 265

原创 JS面向对象

一. JavaScript面向对象前言 1.1 什么是对象？Everything is object （万物皆对象）。对象到底是什么，我们可以从两次层次来理解。 1. 对象是单个事物的抽象一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针...

2018-07-24 20:50:32 260

原创 String对象和数组的异同

1.创建字符串和数组的方法 1.1 创建字符串的方法 A.直接量：var str = " ";　　 B.字符串对象创建： new String(""); 1.2 创建数组的方法 A. var arr = [ element.....]; B. var arr = ne...

2018-07-23 17:54:23 3577

原创 JS数组

摘要最近学习了JS数组的基础知识，在这里呢总结一下，包括js数组的属性与方法，js数组常常遇到的一些问题，小编通过查阅一些网上的知识，把关于数组的东西进行了罗列，希望各位大神多多指点！数组属性lengthlength属性表示数组的长度，即其中元素的个数。JavaScript数组的length属性是可变的，当length属性被设置得更大时，整个数组的状态事实上不会发生变化，仅仅是le...

2018-07-20 10:43:49 240

原创 Javascript事件流

阅读目录 DOM事件流事件冒泡阻止冒泡事件捕获 DOM事件流1.什么是事件流？事件流所描述的是从页面中接受事件的顺序2.DOM事件流的三个阶段？事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段3.DOM事件流三个阶段的执行顺序？首先发生的事件捕获，为截取事件提供机会，然后是目标接受事件，最后是事件冒泡阶段...

2018-07-18 19:10:51 493

原创 JS鼠标跟随效果

效果实现分析：第一步：这是一个鼠标点击事件，当鼠标点击屏幕的任何位置时，图片会跟随着移动，此时要获取鼠标点击某个位置的坐标，用 event 对象来获取，首先获取X轴方向的某个值：var eX=event.clientX;再获取Y轴方向的某个值，var eY=event.clientY;第二步：获取图片随之移动的位置第三步：代码实现<body> ...

2018-07-17 17:41:39 877

原创 JS导航跟随效果

如何实现上面的效果，请看下面的步骤第一步：用 css 调整样式，这里小编用的是弹性盒子实现导航的平均分配。（聪明的你可以尝试用其他的方式看看能不能实现）css代码如下：<style type="text/css"> *{padding:0;margin:0;} a...

2018-07-17 14:02:41 2144

原创光速掌握JS闭包

1.什么是闭包先看下面的小例子： function a(){ var n = 0; function inc(){ n++; console.log(n); } return inc; } var c =...

2018-07-16 16:42:25 228

原创 JS图片切换效果实现

<body> <button id="btn1">ON</button><button id="btn2">OFF</button><br> <img src="images/0.jpg" alt="" id="pic&qu

2018-07-13 14:07:29 493

原创 JS实现倒计时图文效果

<body><img src="images/0.png" alt="" id="h1"><img src="images/0.png" alt="" id="h2"><img src="images/second1.png" alt=""&amp

2018-07-12 13:08:26 1217

原创 JS实现图文时钟效果

<body><img src="images/0.png" alt="" id="h1" /><img src="images/0.png" alt="" id="h2"/><img src="images/second1.png" alt=""

2018-07-12 13:06:39 1059

原创 DOM--dom生成表格

实现以下三点：1.通过DOM生成表格2.点击“添加”按钮，在表格中插入数据（备注：若页面中无表格，创建表格）3.点击“删除”按钮，删除该人员js代码和html代码:<div id='box'> <label for="">姓名：</label><input type="text" name="" id='txt-name'>

2018-07-11 12:59:20 513

原创 Javascript 的DOM部分（一）

1.DOMDOM(Document Object Model)即文档对象模型，针对HTML和XML文档的API(应用程序接口)，DOM描绘的是一个层次化的节点树，允许开发人员进行增、删、改页面的某一部分。2.节点加载HTML页面时，Web生成一个树形结构，用来表示页面内部结构节点之间的关系：父子关系父节点子节点 eg：<html>和<head>他们为父子...

2018-07-10 20:42:24 145

原创 CSS3形状制作

1.阴阳八卦 <style type="text/css"> #yin-yang{ position:relative; width:96px; height:48px; background:white; border-color:black;...

2018-07-09 21:01:13 424

原创 Javascript垃圾回收机制

JavaScript 最常用的垃圾收集方式是标记清除。垃圾收集器会在运行的时候给存储在内存中的变量加上标记。然后，它会去掉环境中正在使用变量的标记，而没有被去掉标记的变量将被视为准备删除的变量。最后，垃圾收集器完成内存清理工作，销毁那些带标记的值并回收他们所占用的内存空间。见下图：...

2018-07-06 21:11:09 127

原创 Javascript变量作用域

1.变量作用域是什么鬼？2.全局变量全局变量拥有全局作用域(作用范围在整个页面中)，在代码的任何地方都有定义。拥有全局作用域的情形：(1) 声明在函数外部的变量。eg： var a;//全局变量function b(){};(2) 声明变量时，缺少关键字var。 eg: function b(){ a=20;//全局变量 }(3)windo...

2018-07-05 19:43:21 138

原创 Javascript匿名函数

1.什么是匿名函数？JS中定义函数的三种方式：A. function getName(x){alert(x);};B. var getName=function (x){alert(x);};C.var getName=new function('x','alert(x)');上面定义了同一个函数getName，以第一种最为常见，后两种都是把一个函数赋值给变量getName，而这个函数...

2018-07-05 19:12:20 269

原创 Javascript函数

1.什么是函数？比如：你去银行取钱，第一步先找一个ATM机，然后插卡，输入密码，选择业务，最后取钱，退卡，当你回到寝室的时候你室友问你你去干什么去了，你肯定会说，我取钱去了，你不可能把取钱的步骤全部说一遍，如果你要是把取钱的步骤都说出来的话，那要是好多人问你干甚去了，难道你要全部向那么多人一个一个的说一遍吗。答案是否，所以呢我们把取钱的步骤装起来，用取钱去了一句话代替，这是封装，封装起来的东西是函...

2018-07-04 19:07:56 125

原创 HTML块级元素与行内元素的嵌套规则

1.什么是html嵌套规则？我们在编写代码时，如果不按照html规则，浏览器是不会正确解析代码的，浏览器会将不符合嵌套规则的节点放到目标节点的下面，或者变成纯文本。HTML存在许多种类型的标签，有的标签下面只允许特定的标签存在，这就是规则。2.块级元素一般是其他元素的容器，可容纳行内元素和其他块级元素，块级元素排斥其他元素与其位于同一行(因为块级元素独占一行)，宽度(width)高度(height...

2018-07-03 20:39:36 2631

原创 CSS居中

1.水平居中css代码：.box{ width:200px; height:100px; margin:0 auto; background:red; }html代码:<div class="box"></div>效果见下图：2.让绝对定位的div居中css代码：.box{ position: absolute; width:200px; hei...

2018-07-03 17:13:17 167

原创 Javascript 循环结构

1.for 循环语法：for(循环变量初始化;循环条件判断;循环迭代){ 循环体; } 注意：循环体：重复执行的代码块循环执行过程：（1）执行循环条件的初始化 var i=0; （2）循环条件的判断 i<5 若循环条件成立，执行循环体若不成立，结束循环（3）循环条件的迭代 i++ （4）执行第二步...

2018-07-02 19:30:13 155

原创 Javascript-----剪刀石头布小游戏

分析：剪刀、石头、布算法：穷举法(无论是用户还是电脑，都需要有三种情况，剪刀，石头，布，所以用穷举法是最能体现出这个游戏的所有的情况) 共分为三种情况：1.电脑赢 2.用户赢 3.平局玩家：电脑和用户必须让电脑随机产生数据（Math.random();）伪代码：if(电脑==石头&&用户==剪刀||电脑==...

2018-07-02 19:10:40 2309

原创 Javascript简单计算器

1.html代码 <input type="text" name="" id="txt-num1">//输入第一个数 <select id="dropdown"> <option value="+">+</option> <option valu

2018-07-02 18:58:32 237

原创 Javascript分支语句中条件判断扩展

1.判断语句中判断条件0,undefined,null和""(空字符串)为假，其它数字、字符串均为真①判断条件为0var a=0;if (a) { console.log("真"); }else{ console.log('假'); }控制台输出结果为：0；②判断条件为undefinedvar a; console.log(typeof a);//控制台测试a的类型undefine...

2018-07-02 13:10:40 152

原创 Javascript动态时钟

1.css代码<style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; ...

2018-06-29 20:16:13 1494

原创 HTML语义化

1.什么是HTML语义化？根据内容的结构化(内容语义化)选择合适的标签(代码语义化)，比如：标题就用<H1~H6>,列表用<li>.....这样便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2.why要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、...

2018-06-29 19:36:20 96

原创 Javascript分支语句switch

switch结构语法(就是怎么用)：swicth(表达式){ case 值1: 代码块; break; case 值2: break; ... case 值n: break; deault: break;}执行规则：将表达式分别与case后面的值作比较，若相等则会执行对应的代码若表达式的值与case后面的值均不相等，则执行default后的代码注意：该结构判断为全等判断 ...

2018-06-29 19:19:49 210

原创 HTML5的新特性

1.H5有哪些新的特性？HTML5现在已经不是SGML(标准通用置标语言)的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘画canvas用于媒介回放的video和audio元素本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失sessionStorage的数据在浏览器关闭后自动删除语义化更好的内容元素，比如article、footer、header、nav、sect...

2018-06-28 19:43:37 2374

原创 Javascript数据类型转换

1.基本数据类型 (原始数据类型) 数值类型(number)、布尔类型(boolean)、字符串类型(string)、undefined 、null 数据类型之间是可以相互转换的，下面就教大家怎么相互转化。2.数值类型转化为字符串类型 (number----->string)有两种方法可以转化第一种：拼接法；eg：var a=5;var b=a+'';console.l...

2018-06-28 19:33:00 99

原创 Javascript一元运算符

1.什么是一元运算符呢？符合两边只有一个操作数的符号就是一元运算符；主要有两种：“++”“--”2.“++”运算符他是一种自增运算符，eg：var a=2; a++; console.log(a); 结果为：3、、a++相当于a=a+1;3.“--”运算符他是一种自减运算符，eg：var a=2; a--; console.log(a); ...

2018-06-28 13:27:46 4922

原创 Javascript数据类型与运算符

JS原始数据类型string number boolean null undefined数据类型与运算符之间的关系1.算术运算符①number就不说了，肯定能进行算术运算，也就是“+”“-”“*”“/”②string也是可以运算的代码如下 var a='hello';var b='h';console.log(a+b);输出结果为：helloh。他实现的是拼接操作注意：如果“...

2018-06-28 13:00:31 134

原创浏览器内核

常见的浏览器内核有哪些？Trident内核(IE内核)：IE，MaxThon，TT，The World，360，搜狗浏览器等[MSHTML]Gecko内核(Firefox内核)：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等Presto内核(opera前内核)：Opera7及以上[Opera内核原为：Presto，现为：Blink]Webkit内核(safari...

2018-06-27 19:46:39 434

原创 Javascript数据类型

1.数值类型(number)指数字1,2，3,4，..........（数学上的数字）2.字符串类型(string)被单双引号所包裹的内容3.布尔类型(boolean)共有两个值：true和false4.其他数据类型undefined(未定义) ull(空) object(对象类型、引用类型)5.基本数据类型(原始数据类型)number boolean string undefine...

2018-06-27 19:20:45 120

JS动态时钟

空空如也