js基础day04
一.自定义属性
- 可以给任何元素自定义一个属性使用, 用来保存数据, 方便使用
- 自定义属性生命周期 和元素生命周期一样长
- 自定义属性属性名不能乱起, 要有规范, 见名知意
二.tab切换
第1个盒子
第2个盒子
第3个盒子
第4个盒子
第5个盒子
2.1.png
三.数组常用方法
1.concat() 连接两个或更多的数组，并返回结果。
- concat(arrayX,arrayX,......,arrayX)
- 函数功能 合并数组, 在原来数组基础上添加新数组的内容
- 参数: 必需, 该参数可以是具体的值，也可以是数组对象。可以是任意多个。
- 返回值: 合并后的新数组
- 不修改原来数组
var arr2 = ['香蕉', '苹果', '橘子'];
var arr3 = ['茄子', '黄瓜', '胡萝卜'];
var item = arr.concat(arr2, '科长');
console.log(item);
console.log(arr); //原来数组
2.join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- 函数功能: 将数组中的字符串取出, 拼接成一个大的字符串
- 参数:separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
- 返回值: 返回一个字符串
- 不修改原来数组
var item = arr.join("*");
console.log(item, typeof item);
console.log(arr);
3.pop() 删除并返回数组的最后一个元素
- 参数: 没有
- 返回值: 返回删除的最后元素
- 会修改原数组
- pop() 方法将删除 数组 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
var item = arr.pop();
console.log(item);
console.log(arr);
4.push() 向数组的末尾添加一个或更多元素，并返回新的长度。
- push(newelement1,newelement2,....,newelementX)
- 参数: 至少有一个元素, 参数可以是多个
- 返回值: 返回添加元素后数组的长度
- 会修改原数组
var arr2 = ['香蕉', '苹果', '橘子'];
var item = arr.push(arr2);
console.log(item);
console.log(arr);
5.reverse() 颠倒数组中元素的顺序。
- 参数:没有
- 返回值: 返回修改后的数组
- 会修改原数组
var item = arr.reverse();
console.log(item);
console.log(arr);
6.shift() 删除并返回数组的第一个元素
- 参数:没有
- 返回值: 返回删除的第一个元素
- 会修改原数组
var item = arr.shift();
console.log(item);
console.log(arr);
7.unshift() 向数组的开头添加一个或更多元素，并返回新的长度
- unshift(newelement1,newelement2,....,newelementX)
- 参数: 必需, 至少有一个元素, 参数可以有多个
- 返回值: 返回数组长度
- 会修改原数组
var arr2 = ['香蕉', '苹果', '橘子'];
var item= arr.unshift(arr2);
console.log(item);
console.log(arr);
8.slice() 从某个已有的数组返回选定的元素
- slice(start,end)
- 函数功能:从数组中获取某一段连续的元素, 并保存到一个新数组中返回
- 参数:start 必需 从哪开始取, 包括该索引
- 参数: end 可选, 取到哪个索引为止 , 不包括该索引
- 返回值: 一个新数组
- 不修改原数组
//var item = arr.slice(1, 3);
var item = arr.slice(1);
console.log(item);
console.log(arr);
9.splice() 删除元素，并向数组添加新元素。
- splice(index,howmany,item1,.....,itemX)
- 参数: index 必需。整数 , 从哪个索引开始删
- 参数:howmany 必需, 删除多少个元素
- 参数: items. 可选, 原来删除位置上,添加的元素 (替换方法)
- 返回值: 返回一个保存删除元素的新数组
- 会修改原数组
var item = arr.splice(1, 2);
var arr2 = ['香蕉', '苹果', '橘子'];
var item = arr.splice(1, 2, arr2);
console.log(item);
console.log(arr);
10.toString() 把数组转换为字符串，并返回结果
- 参数：没有
- 返回值: 返回的是拼接后的字符串
- 不修改原数组
- 注意：返回值与没有参数的 join() 方法返回的字符串相同。
var item = arr.toString();
console.log(item, typeof item);
console.log(arr);
11.sort() 对数组的元素进行排序(了解)
- 参数:必须是函数
var tempArr = [10, 2, 5, 8, 3, 9];
//升序
tempArr.sort(function (a , b) {
return a - b;
});
console.log(tempArr);
//降序
tempArr.sort(function (a , b) {
return b - a;
});
console.log(tempArr);
3.png
四.字符串常用方法
h e l l o w o r l d
0 1 2 3 4 5 6 7 8 9 10
var str = 'hello world'; // 'he*ll*o *world'
1.length 获取字符串长度
console.log(str.length);
2.charAt() 返回在指定位置的字符
- charAt(index)
- 参数:index 某个字符位置
- 返回值: 找到的字符
console.log(str.charAt(6));
3.charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
- 参数:index 某个字符位置
- 返回值: 找到的字符的Unicode 编码。
console.log(str.charCodeAt(10));
4.concat() 连接字符串。
- concat(stringX,stringX,...,stringX)
- 参数: 必需.需要合并的字符串, 至少有一个
- 返回合并后字符串
- 不修改原来字符串
var item = str.concat('科长');
console.log(item);
console.log(str);
5.indexOf() 检索字符串。
- indexOf(searchvalue,fromindex)
- 参数: searchvalue 必需. 检索的字符
- 参数: fromindex 可选. 从哪里开始检索, 从哪个索引开始检索, 如果省略,会从头开始搜索
- 返回值: 返回检索字符的索引值
- 注意: 默认从前往后检索字符, 找到一个匹配的字符就停止继续往下检索, 如果没有找到匹配字符就返回-1
- 不修改原来字符串
// var item = str.indexOf('o', 5);
var item = str.indexOf('a'); //检索不存在字符
console.log(item);
console.log(str);*/
6.lastIndexOf() 从后向前搜索字符串。
- 参数: searchvalue 必需. 检索的字符
- 参数: fromindex 可选. 从哪里开始检索, 从哪个索引开始检索, 如果省略,会从尾部开始搜索
- 返回值: 返回检索字符的索引值
- 注意: 默认从后往前检索字符, 找到一个匹配的字符就停止继续往下检索, 如果没有找到匹配字符就返回-1
- 不修改原来字符串
// var item = str.lastIndexOf('o');
var item = str.lastIndexOf('a');
console.log(item);
console.log(str);
7.slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
- slice(start,end)
- 参数:end 必需. 截取的哪个索引为止, 不包含该字符
- 返回值:一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符
- 不修改原来字符串
- start 值为-2, 代表从最后一个开始截取字符
var item = str.slice(4, 7);
console.log(item);
console.log(str);
8.substr() 从起始索引号提取字符串中指定数目的字符。
- substr(start,length)
- 参数:start 必需. 从哪个索引开始提取字符, 包含该索引字符
- 参数:length 可选.获取多少个字符
- 返回值: 一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符
- 注意:如果没有指定 length，那么返回的字符串包含从 start 到 stringObject 的结尾的字符。
- 不修改原来字符串
var item = str.substr(2, 4);
console.log(item);
console.log(str);
9.substring() 提取字符串中两个指定的索引号之间的字符。
- substring(start,stop)
- 参数:start , 必需, 一个非负的整数, 从哪个索引开始提取字符, 包含该索引字符
- 参数:stop , 可选 ,一个非负的整数, 提取到哪个索引为止, 不包含该索引字符
- 返回值: 提取字符串
- 不修改原来字符串
var item = str.substring(2, 4);
console.log(item);
console.log(str);
10.split() 把字符串分割为字符串数组。
- split(separator,howmany)
- 参数: separator 必需. 分隔符
- 参数: howmany 可选. 指定返回的数组的最大长度
- 返回值: 保存分隔后字符的数组
- 如果是空字符串 ("") 用作 separator，那么字符串中的每个字符都会被分割,保存到数组中
// var item = str.split('');
var item = str.split(' ');
console.log(item);
console.log(str);
11.toLowerCase() 把字符串转换为小写
- 返回值: 返回转换后的一个新的字符串
- 不会修改原来字符串
var str10 = 'NIKE';
var item = str10.toLowerCase();
console.log(item);
console.log(str10);
12.toUpperCase() 把字符串转换为大写
- 返回值: 返回转换后的一个新的字符串
- 不会修改原来字符串
var str11 = 'nike';
var item = str11.toUpperCase();
console.log(item);
console.log(str11);
4.png
五.判断上传文件类型
- onchange 用户改变域内容，触发该事件
- 点击input获取文件, 只有获取的文件不是同一文件, 就会触发这个onchange, 判断的就是文件路径
- 如果路径一样就不响应, 如果不一样才会响应事件
六.定时器
- 定时器: 以时间的事件来执行代码
- 定时器分为两种: 一次定时器(延时定时器), 间隔定时器(循环定时器)
- 开启定时器方法属于window对象的对象方法
1.延时定时器
setTimeout(code,millisec) 在指定的毫秒数后调用函数或计算表达式。
-
参数:
- code 必需， 定时器一段时间后，调用的函数
- millisec 必需， 延时时间， 单位：毫秒
- 返回值： 返回一个标识id
clearTimeout() 清除由setTimeout() 创建的定时器
参数：接收setTimeout()返回的标识id, 根据标识id清除对应定时器
function fn() {
alert('执行了定时器')
}
//开启定时器
var timer = setTimeout(fn, 2000);
console.log(timer);
//注意：使用完定时器后，一定要清除定时器
//清除延时定时器
clearTimeout(timer);
2.循环定时器
- setInterval(code, millisec) 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- 以一定时间间隔反复执行一段代码
- 参数：code: 定时器一段时间后执行调用的函数
- millisec: 间隔时间， 单位：毫秒
- 返回值： 返回一个标识id
var num = 0;
//定时器使用最终格式
var timer2 = setInterval(function () {
num++;
console.log(num);
}, 1000);
//clearInterval() 取消由 setInterval() 设置的 timeout。
//1.获取按钮
var btn = document.getElementById('btn');
//2.给按钮添加点击事件
btn.onclick = function () {
//清空循环定时器
clearInterval(timer2);
}
七.匀速动画
- 问题: 连续点击触发事件, 发现box 速度越来越快
- 原因: 每次点击,触发事件执行代码, 都会开启一个新的定时器, 所有定时器都在对偏移量累加
- 解决: 每次点击, 清空上一次的定时器
//1.获取按钮
var btn = document.getElementById('btn');
//2.获取box
var box = document.getElementById('box');
//定义一个偏移量，记录偏移距离
var offsetX = 0;
//定义一个全局变量，保存定时器标识
var timer = null;
//目标距离
var targer = 800;
//3.按钮添加时间
btn.onclick = function () {
//3.1 清空上次定时器
clearInterval(timer);
//开启定时器
timer = setInterval(function () {
//累加偏移量
offsetX += 10;
//判断是否到达目标距离
if(offsetX >= targer){
//偏移量等于目标距离
offsetX = targer;
//清空定时器
//clearInterval(timer);
}
//设置box的left
box.style.left = offsetX + 'px';
}, 30);
}
- 减速公式 = 累加量 + (目标值- 累加量) / 系数
offsetX = offsetX + (targerX - offsetX) /10;
box.style.left = offsetX + 'px';
八.长图展示
Title
