风或许自媒体-优快云博客

原创从前端模块化编程切入想聊聊前端的未来（文末有我想问的问题）

1. JavaScript模块化简述1.1 为什么需要模块化没有模块化前的项目，常常在一个JS文件中会有很多功能的代码，这使得文件很大，分类性不强，自然而然不易维护；那么我们将一个大的JS文件根据一定的规范拆分成几个小的文件的话将会便于管理，可以提高复用性。一个复杂的项目肯定有很多相似的功能模块，如果每次都需要重新编写模块肯定既费时又耗力。同样，某个功能别人已经造好了轮子，我们就调来用用...

2019-03-08 20:26:54 636 1

原创事件对象与事件机制

本系列将从以下专题去总结：JS基础知识深入总结对象高级函数高级事件对象与事件机制暂时会对以上四个专题去总结，现在开始Part4: 事件对象与事件机制。下图是我这篇的大纲。4.1 同步与异步同步(Synchronous)：你在做一件事情，不能同时去做另外一件事。异步(Asynchronous)：你在做一件事情，这件事可能会耗时很久，而此时你可以在等待的过程中，去做另外一件事...

2019-02-21 15:36:09 654

原创函数高级

本系列将从以下专题去总结：JS基础知识深入总结对象高级函数高级事件对象与事件机制暂时会对以上四个专题去总结，现在开始Part3：函数高级。下图是我这篇的大纲。3.1 this的使用总结this是在函数执行的过程中自动创建的一个指向一个对象的内部指针。确切的说，this并不是一个对象，而是指向一个已经存在的对象的指针，也可以认为是this就是存储了某个对象的地址。this的指向...

2019-02-21 11:38:43 648

原创对象高级

本系列将从以下专题去总结：JS基础知识深入总结对象高级函数高级事件对象与事件机制暂时会对以上四个专题去总结，现在开始Part2：对象高级。下图是我这篇的大纲。2.1 对象的创建模式方式一：Object构造函数模式套路: 先创建空Object对象, 再动态添加属性/方法适用场景: 起始时不确定对象内部数据问题: 语句太多 // 先创建空Object对象 ...

2019-02-19 16:05:46 291

原创 JS基础知识深入总结

本系列将从以下专题去总结：JS基础知识深入总结对象高级函数高级事件对象与事件机制暂时会对以上四个专题去总结，现在开始JS之旅的第一部分：JS基础知识深入总结。话在前面：我一直都认为，在互联网学习的大环境下，网路学习资源很多，但这些博客等仅仅是一个向导，一个跳板，真正学习知识还是需要线下，需要书籍。1.1 数据类型的分类和判断1.1.1 数据类型的分类基本（值）类型 [p...

2019-02-18 14:51:58 802 1

原创移动端适配怎么写？

1. 适配函数怎么写？移动端的适配JS代码适配函数，放在main.js或主入口文件中：function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', r...

2018-10-17 16:59:35 884

学习、生活和工作难免要在网上找资料：找论文找电子书找电影找我们想要的一切然而在工作中，大部分人并不能正确使用搜索引擎。无论是实习生还是一些职场老鸟，资料的搜索能力可以说都是很重要的一个核心竞争力。可以这么说，能否在最短的时间内搜索到自己最需要的资料，决定了你的学习速度、工作效率、进步情况。虽然网络上充斥了大量的搜索引擎技巧，但大部分都是和搜索指令相关的。实际上，在搜索引擎的使用中，指令可能并不能起...

2018-05-29 21:01:42 3475

原创 JavaScript数据结构——栈

栈栈是一种遵循后入先出（LIFO，全称Last In First Out）的数据结构，是一种运算受限的线性表，其限制是仅允许在表的一端进行操作，这一端被称之为栈顶。由于栈具有后入先出的特点，所以任何不在栈顶的元素都无法访问，如果要访问栈底的元素，必须先移除上面的元素。栈的实现在JavaScript中，采用数组座位存储数据的底层数据结构。定义Stack构造函数function Stack(){ ...

2018-05-24 17:50:37 644

翻译 CSS3中steps()动画的详解

原文作者：Joni Trythall增修作者：Fegmaybe一个是雪碧图的实现动画的steps效果。steps（）阶跃函数，是transition-timing-function和animation-timing-function两个属性的属性值，他是表示两个关键帧之间的动画效果，默认是ease。steps（）有两个参数：参数一是把这次过渡分成几段，这几段其实是在时间上分为几段去显示执行。参数二...

2018-05-05 21:41:33 18507 3

原创 jQuery实现小米购物车功能案例

效果图：修改：在购物车显示数量一栏没有文本居中（只需添加两步）：step1：在新增的div中的input增加一个类"<input type='text' size='3' readonly value='1' class='inputTextCenter'/> "+step2：在CSS样式为类添加样式.inputTextCenter{ text-align: center;}...

2018-04-26 19:14:48 4049

原创 jQuery实现左右完美滑动的轮播图效果

要实现左右完美无缝对接，最后一张的处理至关重要。效果预览（只展示几秒，文件gif太大）：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>淘宝滑动轮播案例</title> &l

2018-04-25 23:20:27 13887

原创 jQuery实现淡入淡出的轮播图

你可以换一下图片测试一次：width: 780px;height: 519px;我的图片尺寸。你只需要修改一下：<div id="imgs"> <img src="Img_JD/1.jpg" alt=""> <img src="Img_JD/7.jpg" alt=""> <img src

2018-04-25 23:18:21 1018

原创 AJAX实现图灵机器人聊天

首先，搜索图灵机器人，在图灵机器人注册一个账号，然后新建一个机器人，获得一个key就可以了，这样就可以聊天了。关键是你在图灵机器人新建生成的key：key=9257afd24a374c69b91eeb687d463763这段代码是复制的，从你新建那里得到。另外我用的是版本一：（post的第一个参数url）http://www.tuling123.com/openapi/api当然你可以用图灵的...

2018-04-25 23:15:18 3073 1

原创 jQuery实现“电子书自动滑动的效果”

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js">&a

2018-04-25 23:05:19 884

原创 jQuery实现“多Tab切换效果"

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多Tab切换案例</title> <style> * { margin:

2018-04-25 23:03:33 3054

原创用JavaScript实现打地鼠游戏

源代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* { padding: 0; margin: 0;}.wra

2018-04-18 18:35:58 1876

原创如何用JavaScript一次性抓取网站图片、种子等资源（正则表达式的应用）

其实就是一个html和一个js文件便可以轻松抓取。以抓取图片为例子。html文件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script

2018-04-18 18:33:03 1538

原创 JavaScript实现狂欢舞动的小球

狂欢舞动的小球效果（也就一个html代码）：代码（html）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滚动的小球</title> <style>

2018-04-18 18:26:40 396

原创原生JavaScript面向对象封装动画效果原理详解

一、JavaScript中动画原理所谓的动画，就是通过一些列的运动形成的动的画面。在网页中，我们可以通过不断的改变元素的css值，来达到动的效果。 JavaScript的动画用的最多的3个api就是setInterval()、setTimeout()和requestAnimationFrame() 据说，普通人眼能看到1/24秒，就是说1秒至少24帧，每次移位间隔需要小于1000/...

2018-04-18 18:19:55 531 1

原创纯CSS3炫酷3D星空动画特效

效果：源码：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &a

2018-04-17 18:53:46 14402 2

原创实现恶意网站弹窗

用原生JavaScript实现恶意网站弹窗：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&amp

2018-04-17 18:46:28 1249 1

原创原生JavaScript实现贪吃蛇的游戏

贪吃蛇游戏的思考步骤：1.默认初始值（3个）默认向右走2.封装函数move，去移动蛇3.去监听键盘的事件，看用户的怎么移动蛇4.去判断碰到墙就死亡，结束游戏5.去完成投放食物的封装函数6.去实现蛇的吃食物的函数其实我们触发键盘事件，我们是这么处理的，这是一种比较简单的想法。一个div是40px，当横着三个div数组，往右。数组0是蛇头，那么当移动时是最后一个div 的left和top值...

2018-04-17 18:36:10 1191

原创原生JavaScript实现小球按原轨迹进行返回的案例

实现效果：滑动小球，按住鼠标拉着小球，一直按着一直拉着，当松开鼠标时，让小球按原来的轨迹返回。要实现这个效果要明白以下的步骤：1.为元素设置鼠标点击的事件，只有鼠标往下点，小球才会移动，从而跟着鼠标移动mousedown2.为元素设置移动鼠标事件。mousemove3.相应的mousedown就要有mouseup4.原轨迹用数组去存，就是存他的left值和top值。源码：<!DOCTYPE ...

2018-04-17 18:16:00 951

原创原生JS实现缓动的小球案例

缓动的小球：就是当鼠标移动到小球内，小球随着鼠标的移动，小球跟着移动，而且小球会有很多，跟随者第一个小球接着运动。要实现这样的效果也就是要有以下的操作：1.小球的缓存移动其实就是有很多小球（div）,他们每个小球的出发点和目的点都是一样的，只是控制间隔时间再运动。2.再用for循环分别获取到每个小球，使每次读取到的i（数组下标）和间隔的一个关系：50*i.要移动div形成美丽的变化，其实每个div...

2018-04-17 18:09:43 4171

原创 JavaScript字符串的练习

所有都定义函数==1. 传入任意字符串，统计字符串中的大写字母个数、小写字母个数、数字个数、其他字符个数。------2. 反转字符串. 传入："iOS Android HTML5 Java" 返回："avaJ 5LMTH diordnA SOi"------3. 去除字符串首尾空格.(写一个自定义的 trim 函数)------4. 创建一个长度为5-10, 内容为数字字母下滑线的随机字...

2018-04-09 23:42:23 2764 1

原创 JavaScript的数组练习

1. 读取学生的10门课的成绩, 然后输出10门课成绩的最高分, 最低分, 总分, 平均分. 提示:把10门课的成绩保存如一个数组中.2. 创建100个随机的10到60的随机整数, 然后分别统计每个数字出现的次数3. 定义一个函数, 判断数组中是否所有的数字都大于0 提示: 传入一个数组, 返回布尔值4. 封装函数: 把两个数组共同的元素放入一个新的数组, 并返回新的数组提示: ...

2018-04-07 18:47:48 9781

原创 JS内存模型

首先编写一段求长方形的面积周长程式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Rectangle</title></head><body&amp

2018-04-03 20:51:07 584

原创 JavaScript对象字面量和构造函数详解

对象中只有两种属性:（一种比较细的分法）属性(数据属性)比如：名字，年龄，性别，出版社，地址等信息；方法(封装代码的属性：函数，在这也是一种属性)。在JS中对象的字面量和构造函数是非常的重点，其实在其他的语言中，是没有对象字面量的。一.对象的字面量的语法: { 属性名: 属性值, 属性名: 属性值, 方法名: 你们

2018-04-03 20:46:08 881

原创 JavaScript六种比较常见的原型创建对象的方法

1.传统原型法：a. 当完成一个函数声明之后, js引擎会自动的创建一个对象, 这个对象表示函数对象.函数对象会有一个属性 prototype, 他指向一个对象, 这个对象也是自动创建出来的, 这个对象就是函数的原型对象.原型对象也有一个属性: constructor , 表示构造器,他会指向函数对象.b. 任何的函数都会有原型对象. 只是, 我们只关注和研究构造函数的原型对象, 普通函数的原型对...

2018-04-03 20:42:11 988

原创 JavaScript对象字面量的诸多细节问题以及属性名易错集锦

JavaScript变量的命名规则　标识符只能由字母、数字、下划线和‘$’组成　数字不可以作为标识符的首字符(纯数字除外：JS会自动将数字转化为字符串类型) 　 JSON 语法：是 JavaScript 对象表示法语法的子集 1、非数字型键值必须双引号 2、JSON 值 : 　数字（整数或浮点数）字符串（在双引号中）　逻辑值（true 或 false） ...

2018-04-02 20:29:46 350

原创 JavaScript对象字面量和构造函数的练习

1. 使用字面量的形式封装一个表示对象的学生, 提供如下属性和方法: 属性: 姓名, 年龄, 性别, 语文成绩, 数学成绩, 计算机成绩方法: 计算自己的成绩的方法平均成绩的方法最高分的方法最低分的方法2. 再使用构造函数的方式完成上面的题目.3. 使用构造函数方法的方式来表示一个圆柱体属性: 底面圆, 高方法: 计算底面积...

2018-04-02 19:22:19 729

原创念大学，为了什么？

作者：吕涯 2015年11月编写念大学，为了什么？相信这个问题也让“曾经是”或“现在仍是”的学子思索了几个年头了吧。法国有句俗语：满满的酒杯，是无法再装入葡萄酒的。所以，不管你现在酒杯里装的是葡萄酒也好，还是啤酒也罢，请你放空它们！专心品位“下面的葡萄酒”。当然，下面很多观点可能是会错误或不足，尽...

2018-03-31 23:01:30 352

原创一些利用递归思想的简单编程题（JS实现）

1. 使用递归函数计算1+2+...100的值。2. 定义函数，宰相的麦子：相传古印度宰相达依尔，是国际象棋的发明者。有一次，国王因为他的贡献要奖励他，问他想要什么。达依尔说：“只要在国际象棋棋盘上（共64格）摆上这么些麦子就行了：第一格一粒，第二格两粒，……，后面一格的麦子总是前一格麦子数的两倍，摆满整个棋盘，我就感恩不尽了。”国王一想，这还不容易，刚想答应，如果你...

2018-03-31 22:44:15 2579

翻译刚开始学习编程，这几款工具可以让你事半功倍

　　科技行业里，可供人们使用的工具成百上千，你要怎么知道用哪一种上手最合适呢？　　拿最近刚进入编程这行的人来说吧，大量的工具信息堆砌过来其实毫无益处，反而会无从下手。我发现在自己的开发过程中，很多安装的扩展工具不仅没有真正起到助益作用，反而常常妨碍了正常的开发工作。　　我不是专家，不过随着时间的推移，我还是编制了一份工具清单，这些工具已经证明对我非常有用。如果你刚刚开始学习怎么编程的话，这...

2018-03-30 21:12:50 623

原创一些简单的编程题（函数应用练习）

1. 定义函数，输入3个参数，求和。-----2. 定义函数，输入年份，判断年份是否是闰年------3. 定义函数，打印1999--2050年中间所有的闰年。------4. 定义函数，输入一个日期，判断该日期是否合法；例如：输入 2015-2-29不合法。------5. 定义函数，用最好的排序法进行排序数列。------1.<!DOCTYPE html><html lan...

2018-03-30 20:49:57 1886

原创一个简单的猜数字游戏（练习循环结构中的“while”）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>猜数字</title><!--计算机随机出一个[0,100]的数字让用户去猜，猜对就BINGO，猜大猜小再提示出来，--&g

2018-03-30 12:27:09 3359

原创一些入门的编程题（JS实现）

1. 在页面上输出100到1000之间既是3的倍数又是5的倍数的数字。2. 鸡兔同笼：鸡和兔子一共35只，笼子里一共有94只脚，用程序计算出鸡和兔子分别多少只3. 计算两个数的最大公约数和最小公倍数。4. 求1!+2!+3!+...+10!的和。5. 对一个整数分解质因数。例如： 90 = 2 * 3 * 3 * 56. 在页面中显示出所有的"水仙花数"，所谓"水仙花数"是指一个三位数，其各位数...

2018-03-29 13:10:32 4045

webstrom不伤眼的颜色主题（朱古绿色HBuilder里的）

手机联系人的小程序

空空如也