- 博客(66)
- 收藏
- 关注
原创 本地存储
删除数据</button><button class="del">清空所有数据</button><button class="set">存储数据
2024-07-14 19:55:20
235
原创 classList属性
/ (1) 如果移动距离大于50像素我们就播放上一张或者下一张。// 移动手指 touchmove: 计算手指的滑动距离, 并且移动盒子。// (2) 如果移动距离小于50像素我们就回弹。// 移动盒子: 盒子原来的位置 + 手指移动的距离。移除类:element.classList.remove('类名');切换类:element.classList.toggle('类名');// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张。添加类:element.claaList.add('类名');
2024-07-14 19:54:29
393
原创 移动端触屏事件
/ targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等。然后用盒子原来的位置+手指移动的距离(手指滑动中的位置 减去 手指刚开始位置)// touches、targetTouches 如果侦听的是一个DOM元素,他们两个是一样的。// (2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子。// 计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标。// 移动我们的盒子 盒子原来的位置 + 手指移动的距离。
2024-07-14 19:53:56
314
原创 轮播图
/ 6.无缝滚动: 克隆第一张图片(li)放到ul 最后面,当图片滚动到克隆的最后一张图片时,让ul快速的,不做动画的跳到最前面left为0,同时num为0。//克隆第一张图片在生成小圆圈下面,使小圆圈个数不包含最后一张克隆图片,使小圆圈个数不会多且实现自动化生成小圆圈。// 7. 点击右侧按钮, 图片滚动一张,但是图片有5张,小圆圈只有4个,必须加if判断circle==4就复原为0。// 如果走到了最后复制的一张图片,此时 我们的ul 要快速复原 left 改为 0。
2024-07-14 19:53:14
406
原创 缓动动画
/ 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10。// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10。// 当我们不断的点击按钮,这个元素的速度会越来越快,因为开启了太多的定时器。// 先清除以前的定时器,只保留当前的一个定时器执行。// 先清除以前的定时器,只保留当前的一个定时器执行。// 先清除以前的定时器,只保留当前的一个定时器执行。// 停止动画 本质是停止定时器。// // 调用函数。
2024-07-14 19:52:22
360
原创 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
812
原创 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
284
原创 JS执行机制
点击结果123click//虽然主线程执行栈已经执行完了,但是还会到异步任务看任务队列,点击后空任务队列添加console.log('click');,主线程执行,任务队列重新为空。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)
2024-06-28 16:52:45
284
原创 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
209
原创 定时器
定时器1.setTimeout()window.setTimeout(调用函数,延迟的毫秒数)window可省略,在定时器到期后执行调用函数延时时间单位是毫秒,可以省略延时时间,省略默认为0//直接写函数setTimeout(function() { console.log('时间到了'); }, 2000);//也可以写函数名function callback() { console.log('爆炸了'); }
2024-06-28 16:51:13
387
原创 BOM和DOM
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。BOM即浏览器对象模型,提供独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。2.是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。BOM由一系列相关的对象构成,并且某个对象都提供了很多方法与属性。window对象是浏览器的顶级对象,具有双重角色。BOM学习的是浏览器窗口交互的一些对象。BOM的顶级对象是window。
2024-06-28 16:50:32
108
原创 键盘事件对象
/ 同时把快递单号里面的值(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
370
原创 常用鼠标事件
/ 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
401
原创 事件对象、属性和方法
3.事件对象是我们事件的一系列相关数据的集合跟事件相关的,比如点击事件里面就包含了鼠标的相关信息,鼠标坐标等,键盘事件里包含键盘事件的信息,用户按下的键等。// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li。// 区别 : e.target 点击了那个元素,就返回那个元素 this 那个元素绑定了这个点击事件,那么就返回谁。// 1. e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
2024-06-28 16:45:56
361
原创 DOM事件流
我们向水里扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;因为事件由一个冒泡过程,虽然只点了son也会按照一定的顺序往上传播,如果只点击father,son不会弹窗,因为往上传播。// 2. false冒泡阶段 son -> father ->body -> html -> document。事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程。事件流描述的是从页面中接收事件的顺序。
2024-06-28 16:45:00
363
原创 删除事件(解绑事件)
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号。// 2. removeEventListener 删除事件。// 1. 传统方式删除事件。//不能用匿名函数来做,因为移除要把具体函数名写出来。删除事件(解绑事件)2.方法监听注册方式。
2024-06-28 16:44:27
141
原创 节点层级
我是li4</li>//<li>我是li1</li>//<li>1111</li>(在空白行后加1111行)//<li>我是li4</li>//在123前面加li。//<li>我是li1</li>//<li>
2024-06-28 16:43:06
334
原创 获取自定义属性值
/ 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式。element.getAttribute('属性'):主要获取自定义的属性(标准)我们程序员自定义的属性。element.setAttribute('属性','值');主要设置自定义的属性(标准)// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法。element.属性:只能获取内置属性值(元素本身自带的属性)element.setAttribute('属性','值');
2024-06-28 16:42:14
385
原创 排他思想
按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5
2024-06-28 16:41:35
353
原创 JavaScript操作元素
return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];// input.innerHTML = '点击了';//我是文字 123。
2024-06-28 16:40:55
522
原创 JS--字符串
*因为每次调用 str1.replace('o', '*') 方法时,它只会替换第一个匹配到的 'o' 字符,而不是替换所有的 'o' 字符。因此,循环会一直执行直到字符串中不再包含 'o' 字符为止。indexOf('要查找的字符',开始的位置) 返回指定内容在原字符串中的位置,如果找不到就返回-1,开始的位置是index索引号(索引号从0开始)// 课后作业 ['red', 'blue', 'red', 'green', 'pink','red'], 求 red 出现的位置和次数。
2024-05-18 15:30:37
903
原创 基本包装类型
基本包装类型就是把简单数据类型包装成为了复杂数据类型,这样基本数据类型就有了属性和方法。对象才会有属性和方法 复杂数据类型才有属性和方法。// (1) 把简单数据类型包装为复杂数据类型。简单数据类型为什么会有lenght属性?// (2) 把临时变量的值 给 str。// (3) 销毁这个临时变量。
2024-05-18 15:28:07
239
原创 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
370
原创 倒计时效果
/ s = parseInt(总秒数%60);// d = parseInt(总秒数/ 60/60 /24);// m = parseInt(总秒数 /60 %60 );// h = parseInt(总秒数/ 60/60 %24) // 计算小时。用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
2024-05-18 15:24:32
241
原创 JS--日期
console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];周一返回的是1 周六返回的是6 周日返回的是0。
2024-05-18 15:24:01
822
原创 随机数random()
1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1。var arr = ['张', '李', '唐'];3. 我们想要得到两个数之间的随机整数 并且 包含这2个整数。2. 这个方法里面不跟参数。
2024-05-18 15:22:27
285
原创 Math对象
/ 隐式转换 会把字符串型 -1 转换为数字型。// 这个结果是 -1。Math.round() 四舍五入 就近原则 注意-3.5结果是-3。Math.floor() 向下取整 往最小了取值。Math.max()/Math.min() 求最大最小值。Math.ceil() 向上取整 往最大了取值。Math.abs() 绝对值。
2024-05-17 23:53:03
308
原创 JS--对象
/ 调用函数返回的是一个对象。内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)// 3. 执行构造函数里面的代码 给这个空对象添加属性和方法。3.调用对象的方法 sayHi 对象名.方法名() 千万别忘记添加小括号。// 1. new 构造函数可以在内存中创建了一个空的对象。// 创建了一个空的对象。JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象。属性:在对象里面的不需要声明的 使用的时候必须是 对象.属性。
2024-05-17 23:52:27
374
原创 JS--预解析
/ // 集体声明 var a = 9, b = 9, c = 9;// // 相当于 var a = 9;1.变量提升 就是把所有的变量声明提升到当前作用域的最前面,但是不提升变量赋值。//只声明了变量fun没有赋值函数,不能调用。// undefined 坑 1。// 函数表达式 调用必须写在函数表达式的下面。2.预解析分为变量预解析(变量提升)和函数预解析(函数提升)// 相当于执行了以下代码。// // 相当于执行了以下操作。// 相当于执行了以下代码。
2024-05-17 23:49:52
290
原创 JS--作用域
内部函数可以访问外部函数中的变量,用链式查找决定哪些数据能被内部函数访问(作用域链)就近原则。局部作用域(函数作用域):在函数内部就是局部作用域,只在函数内部起效果和作用。在同一个作用域变量名冲突会覆盖,不同作用域变量名相同不会影响。注意:如果在函数内部,没有声明直接赋值的变量也属于全局变量。如果函数中还有函数,那么在这个作用域中又可以诞生一个作用域。全局变量:在全局作用域下的变量,函数可调用。局部变量:在局部作用域下的变量。只要是代码,就至少有一个作用域。写在函数内部的局部作用域。
2024-05-17 23:49:01
157
原创 函数声明的两种方式
函数表达式声明方式跟变量差不多,只不过变量里面存的是值而函数表达式里面存的是函数。1.利用函数关键字自定义函数(函数声明)fun是变量名不是函数名。函数要先声明才能调用。
2024-05-17 23:48:16
110
原创 arguments的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。只有函数才有arguments,而且是每个函数都内置好了arguments。伪数组本质是一个 Object,而真实的数组是一个 Array。arguments展示形式是一个伪数组,并不是真正意义上的数组。按索引方式存储数据,可以按照数组的方式遍历arguments。
2024-05-17 23:47:32
124
原创 return语句
只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果。函数如果有return则返回return后面的值,如果函数没有return则返回undefined。return:不仅可以退出循环,还能返回return语句中的值,同时还可以结束当前的函数体内的代码。我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return 实现的。return之后的代码不会执行。return 只能返回一个值。
2024-05-17 23:46:45
219
原创 JS--函数
/ 3. 如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN。function 函数名(形参1,形参2...) { // 在声明函数的小括号里面是 形参。// 在函数调用的小括号里面是实参(实际的参数)// 2. 如果实参的个数多于形参的个数 会取到形参的个数。// 1. 如果实参的个数和形参的个数一致 则正常输出结果。// 建议 我们尽量让实参的个数和形参相匹配。// function 函数名() {// // 函数体。函数形参和实参个数不匹配问题。
2024-05-17 23:45:37
196
原创 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
418
原创 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
283
原创 JS--运算符
/ 后置自增 先表达式返回原值 后面变量再自加1。开发时,大多使用后置递增/减,并且代码独占一行。前置,后置单独使用时运行结果相同。与其他代码联用时,执行结果会不同。前置递增a和++a是同步的。++p是先自加然后返回值。p++是先返回值后再自加。
2024-05-17 23:38:41
103
原创 数据类型转换
/ 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数。// 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数。
2024-05-17 23:37:45
284
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人