- 博客(100)
- 收藏
- 关注
RSS订阅原创 JavaScript 面向对象
1. 面向过程与面向对象1.1 面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个依次调用就可以了。1.2 面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。1.3 面向过程与面向对象对比面向过程面向对象优点性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
2020-10-31 12:05:05
760
2
原创 CSS 简易3D旋转相册
实现效果：实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body
2020-10-28 20:24:37
967
2
原创 JavaScript 正则表达式
1. 正则表达式的创建在 JavaScript 中，可以通过两种方式创建一个正则表达式。（1）通过调用 RegExp 对象的构造函数创建var regexp = new RegExp(/123/);（2）利用字面量创建正则表达式var rg = /123/;2. 正则表达式的字符2.1 正则表达式的组成一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$
2020-10-28 19:38:08
216
原创 JavaScript 闭包的3个小应用
1. 点击li输出索引号代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2020-10-28 12:30:40
280
1
原创 基于jQuery的待办事项ToDoList
实现效果：关闭浏览器重新打开或者刷新页面，数据并不会消失！代码实现：ToDoList.html（复制并保存为html文件，打开即可见效果）：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-w
2020-10-28 12:17:37
485
1
原创 JavaScript 面向对象 TAB栏切换效果
功能要求：点击 tab 栏，可以切换效果。点击 + 号，可以添加 tab 项和内容项。点击 x 号，可以删除当前的 tab 项和内容项。双击tab项文字或者内容项文字，可以修改里面的文字内容。实现效果：切换效果：添加效果：删除效果：修改效果：代码实现：Obj_TAB.html（复制并保存为html文件，打开即可见效果）：<!DOCTYPE html><html lang="en"><head> <meta chars
2020-10-28 12:09:02
541
4
原创 JavaScript 常见移动端网页特效
1. 触屏事件1.1 触屏事件概述移动端浏览器兼容性较好，不需要考虑 JS 的兼容性问题。但是移动端也有自己独特的地方，比如触屏事件touch（触摸事件），Android 和 IOS 都有touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作常见的触屏事件：1.2 触摸事件对象（TouchEvent）TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发
2020-10-28 07:19:20
374
2
原创 JavaScript 深拷贝和浅拷贝
1. 浅拷贝浅拷贝只拷贝了最外简单数据类型的一层，更深层次对象级别的只拷贝了地址。地址指向同一个内存空间。若改变拷贝后对象深层对象的值，由于地址一直，拷贝前对象深层对象的值也会随之改变。下面是一个浅拷贝的例子：var oldObj = { id: 1, name: 'Jack', msg: { age: 18 }};var newObj = {};// 遍历旧对象，依次拷贝for (var k in oldObj) { newObj[k]
2020-10-28 07:06:05
156
原创 JavaScript 闭包应用-打印所有li元素的内容
代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
2020-10-27 19:50:00
26
原创 JavaScript 闭包应用-计算打车价格
场景：打车起步价13(3公里内),之后每多一公里增加5块钱。用户输入公里数就可以计算打车价格。如果有拥堵情况,总价格多收取10块钱拥堵费。代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...
2020-10-27 19:43:00
32
原创 JavaScript 闭包应用-点击li输出索引号
代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
2020-10-27 19:07:00
26
原创 JavaScript 移动端轮播图效果
代码实现：注意：在Chrome浏览器中切换到移动端页面查看。mobileAutoPlay.html（复制并保存为html文件，打开并切换为移动端显示，即可见效果）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
2020-10-27 18:42:26
450
3
原创 JavaScript 返回顶部效果
实现效果：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
2020-10-27 18:36:16
343
原创 JavaScript 常见PC端网页特效
1. 元素偏移量 offset1.1 offset 概述offset翻译过来就是偏移量，使用offset系列相关属性可以动态得到该元素的位置（偏移）、大小等获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）返回的数值都不带单位1.2 offset 系列常用属性1.3 offset 与 style 区别2. 元素可视区 client2.1 client 概述client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息通过client系
2020-10-27 18:33:11
381
原创 JavaScript DOM初学笔记
1. DOM简介1. 1 什么是DOM文档对象模型（Document Object Model，简称 DOM），是 W3C组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。1.2 DOM树**文档：**一个页面就是一个文档，DOM中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示DOM 把以上内容都看做是对象2. 获取元素2.1 根据
2020-10-27 18:26:28
243
原创 jQuery 简明教程 快速上手
1. jQuery概述1.1 JavaScript 库即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show、获取元素等。简单理解： 就是一个JS 文件，里面对原生JS代码进行了封装，存放到里面。这样可以快速高效使用这些封装好的功能了。jQuery，就是为了快速方便操作DOM，里面基本都是函数（方法）。1.2 jQuery 的概念jQuery 是一个快速、简洁的 Jav
2020-10-27 18:11:04
316
原创 JavaScript 猜数字小游戏
实现效果：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //
2020-10-27 18:04:13
2706
原创 jQuery 图片高亮显示效果
实现效果：代码实现：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; }
2020-10-27 18:01:09
1137
原创 jQuery TAB栏切换效果
实现效果：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
2020-10-27 17:58:05
505
原创 Linux 常用命令
1. ls（英文全拼：list files）命令用于显示指定工作目录下之内容（列出目前工作目录所含之文件及子目录)。语法：ls [-alrtAFR] [name...]-a 显示所有文件及目录 (. 开头的文件不会列出)-l 除文件名称外，亦将文件型态、权限、拥有者、文件大小等资讯详细列出-r 将文件以相反次序显示(原定依英文字母次序)-t 将文件依建立时间之先后次序列出-A 同 -a ，但不列出 “.” (目前目录) 及 “…” (父目录)-F 在列出的文件名称后加一符号；例如可执行
2020-10-27 17:55:45
192
原创 JavaScript BOM初学笔记
1. BOM概述1.1 什么是BOMBOM**（Browser Object Model）即浏览器对象模型**，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 windowBOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分DOM与BOM比较：1.2 BOM的构成BOM 比 DOM 更大，它包含 DOMwi
2020-10-27 17:43:56
209
原创 JavaScript 移动端拖动元素
实现效果：请切换到移动端页面查看！代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
2020-10-26 09:00:15
3171
13
原创 JavaScript手撕代码 —— 实现轮播图效果
要求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理图片播放的同时，下面小圆圈模块跟随一起变化点击小圆圈，可以播放相应图片鼠标不经过轮播图，轮播图也会自动播放图片鼠标经过，轮播图模块，自动播放停止实现效果：代码实现：autoPlay.html（复制并保存为html文件，打开即可见效果）：<!DOCTYPE html><html lang="en"><head> <m
2020-10-26 08:38:04
596
2
原创 JavaScript 简单缓动动画函数封装
简单缓动动画函数：animate(obj, target, time, callback);注意：obj：目标对象，需要加绝对定位target：目标位置time：动画间隔时间callback：回调函数代码实现：function animate(obj, target, time, callback) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(funct
2020-10-26 08:33:31
434
1
原创 JavaScript mouseenter和mouseover的区别
当鼠标移动到元素上时就会触发mouseenter事件，类似mouseover，它们两者之间的差别是：mouseover：鼠标经过自身盒子会触发，经过子盒子还会触发（因为存在冒泡）mouseenter：只会经过自身盒子触发（不会冒泡）跟mouseenter对应的，鼠标离开事件mouseleave同样不会冒泡...
2020-10-26 08:31:03
157
1
原创 JavaScript 页面被卷去的头部兼容性解决方案
代码实现：function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 };
2020-10-26 08:28:26
415
1
原创 JavaScript 图片放大预览效果
实现效果：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .pre
2020-10-26 08:26:36
630
原创 JavaScript 拖动对话框效果
实现效果：点击点击按钮，弹出对话框。按住对话框顶部并移动，实现拖动效果。点击对话框右上角×，关闭对话框。代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2020-10-26 08:22:14
311
4
原创 JavaScript 获取鼠标在盒子里的坐标
实现思路：在盒子内点击，想要得到鼠标距离盒子左右的距离首先得到鼠标在页面中的坐标e.pageX,e.page其次得到盒子在页面中的距离box.offsetLeft,box.offsetTop用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动mousemove效果：代码实现<!DOCTYPE html><html lang="en"><head> <meta ch
2020-10-26 08:18:23
705
原创 JavaScript 动态显示当前时间
效果：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
2020-10-26 08:16:40
231
原创 JavaScript 登录跳转页面效果
要求：有两个页面：index.html和login.html。在login.html页面中点击登录，会跳转到index.html，并将输入的用户名传递到index.html。实现思路：第一个登录页面，里面有提交表单，action提交到index.html页面第二个页面，利用了URL里面的location.search参数,使用第一个页面的参数，实了数据不同页面之间的传递效果第二个页面中，提取参数去掉?利用substr利用=分割键和值split('=')数组中第一个元素是键，第二个元素是值
2020-10-26 08:08:46
16446
3
原创 JavaScript 自动秒跳转页面
代码实现：<body></body>内容：<body> <div></div> <script> var div = document.querySelector('div'); var timer = 5; fn(); setInterval(fn, 1000); function fn() { if (tim
2020-10-25 10:33:58
765
原创 JavaScript 执行机制浅谈
JS是单线程JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。同步和异步为了解决这个
2020-10-25 10:22:50
1047
原创 关于 URL
统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL的一般语法格式为：protocol://host[:port]/path/[?query]#fragment...
2020-10-25 10:21:49
164
1
原创 JavaScript 获取验证码倒计时效果
要求：点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信实现思路：按钮点击之后，禁用disabled为true同时按钮里面的内容会变化，button里面的内容通过innerHTML修改里面秒数是有变化的，因此需要用到定时器定义一个变量，在定时器里面，不断递减如果变量为0说明时间到了，需要停止定时器，重新恢复变量，并且复原按钮初始状态代码实现：<body></body>内容：手机号码： <input type="text"> <but
2020-10-25 10:20:27
1097
原创 JavaScript 定时器 setTimeout和setInterval的区别
区别：setTimeout延时时间到了，就去调用这个回调函数。调用一次后，就结束了这个定时器。setInterval每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。案例：setTimeout：// 过1秒后输出'只输出一次'setTimeout(function() { console.log('只输出一次');}, 1000);setInterval：// 每秒输出'继续输出'setInterval(function() { console
2020-10-25 09:54:25
142
原创 JavaScript 输入框放大显示效果
要求：用户在输入框输入内容时，上面的大号字体盒子con显示（这里面的字号更大）实现思路：表单检测用户输入：给表单添加键盘事件同时把快递单号里面的值value获取过来赋值给con盒子innerText做为内容如果快递单号里面内容为空，则隐藏大号字体盒子con盒子代码实现：HTML：<div class="search"> <div class="con">123</div> <input type="text" placeholde
2020-10-25 09:53:10
705
原创 JavaScript 按键定位输入框
要求：有一输入框，当用户按下s键，光标自动定位到输入框中。实现思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面使用键盘事件对象里面的keyCode判断用户按下的是否是s键搜索框获得焦点：使用focus()方法代码实现：内容：<input type="text"><script> var search = document.querySelector('input'); // 若使用keydown，按下s后，“s”也会添加到输入
2020-10-25 09:51:47
1221
原创 JavaScript 图片跟随鼠标效果
要求：在浏览器页面中，图片实时跟随鼠标鼠标在图片的中心位置实现思路：鼠标不断移动，使用鼠标移动事件：mousemove在页面中移动，给document注册事件图片要移动距离，而且不占位置，使用绝对定位即可每次鼠标移动，获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-10-25 09:50:38
533
原创 JavaScript 事件对象属性e.target和this的区别
前言：Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。比如：谁绑定了这个事件。鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。其中事件对象属性e.target，它和this的指向有所不同。案例：HTML:<div>div <span&g
2020-10-25 09:47:50
1268
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人