- 博客(66)
- 收藏
- 关注
RSS订阅原创 本地存储
删除数据</button><button class="del">清空所有数据</button><button class="set">存储数据
2024-07-14 19:55:20
216
原创 classList属性
/ (1) 如果移动距离大于50像素我们就播放上一张或者下一张。// 移动手指 touchmove： 计算手指的滑动距离， 并且移动盒子。// (2) 如果移动距离小于50像素我们就回弹。// 移动盒子： 盒子原来的位置 + 手指移动的距离。移除类：element.classList.remove('类名');切换类：element.classList.toggle('类名');// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张。添加类：element.claaList.add('类名');
2024-07-14 19:54:29
372
原创 移动端触屏事件
/ targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等。然后用盒子原来的位置+手指移动的距离（手指滑动中的位置 减去 手指刚开始位置）// touches、targetTouches 如果侦听的是一个DOM元素，他们两个是一样的。// （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子。// 计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标。// 移动我们的盒子 盒子原来的位置 + 手指移动的距离。
2024-07-14 19:53:56
276
原创 轮播图
/ 6.无缝滚动： 克隆第一张图片(li)放到ul 最后面，当图片滚动到克隆的最后一张图片时，让ul快速的，不做动画的跳到最前面left为0，同时num为0。//克隆第一张图片在生成小圆圈下面，使小圆圈个数不包含最后一张克隆图片，使小圆圈个数不会多且实现自动化生成小圆圈。// 7. 点击右侧按钮， 图片滚动一张，但是图片有5张，小圆圈只有4个，必须加if判断circle==4就复原为0。// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0。
2024-07-14 19:53:14
391
原创 缓动动画
/ 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10。// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10。// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器。// 先清除以前的定时器，只保留当前的一个定时器执行。// 先清除以前的定时器，只保留当前的一个定时器执行。// 先清除以前的定时器，只保留当前的一个定时器执行。// 停止动画 本质是停止定时器。// // 调用函数。
2024-07-14 19:52:22
349
原创 offset、client、scroll
input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"><input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"><div class="login-header"><a id="link" href="javascript:;
2024-07-14 19:50:50
793
原创 location对象
form action="index.html">//action属性规定当提交表单时，向何处发送表单数据。window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。例：http://www.itcast.cn/index.html?substr('起始的位置'，截取几个字符);location.replace()替换当前页面，因为不记录历史，所以不能后退页面。
2024-07-14 19:48:03
269
原创 JS执行机制
点击结果123click//虽然主线程执行栈已经执行完了，但是还会到异步任务看任务队列，点击后空任务队列添加console.log('click');，主线程执行，任务队列重新为空。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）
2024-06-28 16:52:45
277
原创 this指向问题
/ this指向的是btn这个按钮对象。1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）console.log(this);// this指向的是 o 这个对象。// this 指向的是fun 实例对象。3. 构造函数中this指向构造函数的实例。2. 方法调用中谁调用this指向谁。
2024-06-28 16:52:10
201
原创 定时器
定时器1.setTimeout()window.setTimeout(调用函数,延迟的毫秒数)window可省略，在定时器到期后执行调用函数延时时间单位是毫秒，可以省略延时时间，省略默认为0//直接写函数setTimeout(function() { console.log('时间到了'); }, 2000);//也可以写函数名function callback() { console.log('爆炸了'); }
2024-06-28 16:51:13
378
原创 BOM和DOM
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。BOM即浏览器对象模型，提供独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。2.是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。BOM由一系列相关的对象构成，并且某个对象都提供了很多方法与属性。window对象是浏览器的顶级对象，具有双重角色。BOM学习的是浏览器窗口交互的一些对象。BOM的顶级对象是window。
2024-06-28 16:50:32
98
原创 键盘事件对象
/ 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容。// 2. 我们的keypress 事件 区分字母大小写 a 97 和 A 得到的是65。// 1. 我们的keyup 和keydown事件不区分字母大小写 a 和 A 得到的都是65。// 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）// 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子。alert('您按下的a键');键盘事件对象KeyboardEvent。
2024-06-28 16:49:22
361
原创 常用鼠标事件
/ 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片。console.log('x坐标是' + x, 'y坐标是' + y);// 3. screen 鼠标在电脑屏幕的x和y坐标。// 1. client 鼠标在可视区的x和y坐标。e.pageX 返回鼠标相对于文档页面的X坐标IE9+支持。e.pageY 返回鼠标相对于文档页面的Y坐标IE9+支持。// 2. page 鼠标在页面文档的x和y坐标。
2024-06-28 16:48:48
387
原创 事件对象、属性和方法
3.事件对象是我们事件的一系列相关数据的集合跟事件相关的，比如点击事件里面就包含了鼠标的相关信息，鼠标坐标等，键盘事件里包含键盘事件的信息，用户按下的键等。// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li。// 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁。// 1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
2024-06-28 16:45:56
344
原创 DOM事件流
我们向水里扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；因为事件由一个冒泡过程，虽然只点了son也会按照一定的顺序往上传播，如果只点击father，son不会弹窗，因为往上传播。// 2. false冒泡阶段 son -> father ->body -> html -> document。事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。事件流描述的是从页面中接收事件的顺序。
2024-06-28 16:45:00
351
原创 删除事件（解绑事件）
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号。// 2. removeEventListener 删除事件。// 1. 传统方式删除事件。//不能用匿名函数来做，因为移除要把具体函数名写出来。删除事件（解绑事件）2.方法监听注册方式。
2024-06-28 16:44:27
130
原创 节点层级
我是li4</li>//<li>我是li1</li>//<li>1111</li>（在空白行后加1111行）//<li>我是li4</li>//在123前面加li。//<li>我是li1</li>//<li>
2024-06-28 16:43:06
323
原创 获取自定义属性值
/ 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式。element.getAttribute('属性')：主要获取自定义的属性（标准）我们程序员自定义的属性。element.setAttribute('属性','值');主要设置自定义的属性（标准）// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法。element.属性：只能获取内置属性值（元素本身自带的属性）element.setAttribute('属性','值');
2024-06-28 16:42:14
349
原创 排他思想
按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5
2024-06-28 16:41:35
345
原创 JavaScript操作元素
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];// input.innerHTML = '点击了';//我是文字 123。
2024-06-28 16:40:55
481
原创 JS--字符串
*因为每次调用 str1.replace('o', '*') 方法时，它只会替换第一个匹配到的 'o' 字符，而不是替换所有的 'o' 字符。因此，循环会一直执行直到字符串中不再包含 'o' 字符为止。indexOf('要查找的字符',开始的位置) 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号（索引号从0开始）// 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数。
2024-05-18 15:30:37
891
原创 基本包装类型
基本包装类型就是把简单数据类型包装成为了复杂数据类型,这样基本数据类型就有了属性和方法。对象才会有属性和方法 复杂数据类型才有属性和方法。// (1) 把简单数据类型包装为复杂数据类型。简单数据类型为什么会有lenght属性？// (2) 把临时变量的值 给 str。// (3) 销毁这个临时变量。
2024-05-18 15:28:07
232
原创 JS--数组
/[1,13,4,7,77]sort函数对于有十位数的数是这么排序的1和13最左边都是1放一起，7和77最左边都是7放一起。// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面。1.push()在外面数组的末尾添加一个或者多个数组元素。2.unshift在数组的开头添加一个或多个数组元素。2.shift()可以删除数组的第一个元素。1.pop()可以删除数组最后一个元素。pop完毕后返回的结果是删除的那个元素。
2024-05-18 15:26:27
363
原创 倒计时效果
/ s = parseInt(总秒数%60);// d = parseInt(总秒数/ 60/60 /24);// m = parseInt(总秒数 /60 %60 );// h = parseInt(总秒数/ 60/60 %24) // 计算小时。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
2024-05-18 15:24:32
233
原创 JS--日期
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];周一返回的是1 周六返回的是6 周日返回的是0。
2024-05-18 15:24:01
809
原创 随机数random()
1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1。var arr = ['张', '李', '唐'];3. 我们想要得到两个数之间的随机整数 并且 包含这2个整数。2. 这个方法里面不跟参数。
2024-05-18 15:22:27
277
原创 Math对象
/ 隐式转换 会把字符串型 -1 转换为数字型。// 这个结果是 -1。Math.round() 四舍五入 就近原则 注意-3.5结果是-3。Math.floor() 向下取整 往最小了取值。Math.max()/Math.min() 求最大最小值。Math.ceil() 向上取整 往最大了取值。Math.abs() 绝对值。
2024-05-17 23:53:03
301
原创 JS--对象
/ 调用函数返回的是一个对象。内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法。3.调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号。// 1. new 构造函数可以在内存中创建了一个空的对象。// 创建了一个空的对象。JavaScript中的对象分为3种：自定义对象、内置对象、浏览器对象。属性：在对象里面的不需要声明的 使用的时候必须是 对象.属性。
2024-05-17 23:52:27
367
原创 JS--预解析
/ // 集体声明 var a = 9, b = 9, c = 9;// // 相当于 var a = 9;1.变量提升 就是把所有的变量声明提升到当前作用域的最前面，但是不提升变量赋值。//只声明了变量fun没有赋值函数，不能调用。// undefined 坑 1。// 函数表达式 调用必须写在函数表达式的下面。2.预解析分为变量预解析(变量提升)和函数预解析(函数提升)// 相当于执行了以下代码。// // 相当于执行了以下操作。// 相当于执行了以下代码。
2024-05-17 23:49:52
278
原创 JS--作用域
内部函数可以访问外部函数中的变量，用链式查找决定哪些数据能被内部函数访问(作用域链)就近原则。局部作用域(函数作用域)：在函数内部就是局部作用域，只在函数内部起效果和作用。在同一个作用域变量名冲突会覆盖，不同作用域变量名相同不会影响。注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量。如果函数中还有函数，那么在这个作用域中又可以诞生一个作用域。全局变量：在全局作用域下的变量，函数可调用。局部变量：在局部作用域下的变量。只要是代码，就至少有一个作用域。写在函数内部的局部作用域。
2024-05-17 23:49:01
153
原创 函数声明的两种方式
函数表达式声明方式跟变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数。1.利用函数关键字自定义函数(函数声明)fun是变量名不是函数名。函数要先声明才能调用。
2024-05-17 23:48:16
103
原创 arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中，arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。只有函数才有arguments，而且是每个函数都内置好了arguments。伪数组本质是一个 Object，而真实的数组是一个 Array。arguments展示形式是一个伪数组，并不是真正意义上的数组。按索引方式存储数据，可以按照数组的方式遍历arguments。
2024-05-17 23:47:32
117
原创 return语句
只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果。函数如果有return则返回return后面的值，如果函数没有return则返回undefined。return：不仅可以退出循环，还能返回return语句中的值，同时还可以结束当前的函数体内的代码。我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return 实现的。return之后的代码不会执行。return 只能返回一个值。
2024-05-17 23:46:45
214
原创 JS--函数
/ 3. 如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN。function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参。// 在函数调用的小括号里面是实参（实际的参数）// 2. 如果实参的个数多于形参的个数 会取到形参的个数。// 1. 如果实参的个数和形参的个数一致 则正常输出结果。// 建议 我们尽量让实参的个数和形参相匹配。// function 函数名() {// // 函数体。函数形参和实参个数不匹配问题。
2024-05-17 23:45:37
190
原创 JS--数组
/ 把我们数组的长度修改为了 5 里面应该有5个元素 ['red', 'green', 'blue', empty*2]j++) { // 里面的循环管 每一趟的交换次数。// 将数组 ['red', 'green', 'blue', 'pink'] 转换为字符串，并且用 | 或其他符号分割。// 创建了一个空的数组 等于var arr = new Array();// 内部交换2个变量的值 前一个和后面一个数组元素相比较。var arr1 = [1, 2, 'pink老师', true];
2024-05-17 23:44:17
411
原创 switch、for、while、do while
i=3时直接退出循环到上面i++，不执行下面console.log('我正在吃第' + i + '个包子');var score = prompt('请您输入第' + i + '个学生成绩');再执行条件表达式，如果结果为true，则继续执行循环体代码，如果为false，则退出循环，继续执行后面的代码。console.log('我正在吃第' + i + '个包子');console.log('这是1');console.log('这是3');alert('班级总的成绩是' + sum);
2024-05-17 23:42:58
267
原创 JS--运算符
/ 后置自增 先表达式返回原值 后面变量再自加1。开发时，大多使用后置递增/减，并且代码独占一行。前置，后置单独使用时运行结果相同。与其他代码联用时，执行结果会不同。前置递增a和++a是同步的。++p是先自加然后返回值。p++是先返回值后再自加。
2024-05-17 23:38:41
97
原创 数据类型转换
/ 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数。// 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数。
2024-05-17 23:37:45
279
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人