js基础day04

一.自定义属性

可以给任何元素自定义一个属性使用, 用来保存数据, 方便使用
自定义属性生命周期和元素生命周期一样长
自定义属性属性名不能乱起, 要有规范, 见名知意


<div id="box">
    <button id="btn1" >点我啊</button>
    <button>点我啊2</button>
    <button>点我啊3</button>
    <button>点我啊4</button>
</div>

<script>
    //1.获取元素
    var box = document.getElementById('box');
    var list = box.getElementsByTagName('button');

    //2.设置背景颜色
    list[0].style.backgroundColor = 'red';
    list[1].className = 'current';

    //3.获取系统提供给我们的属性
    console.log(list[0].id);
    console.log(list[1].className);

    //4.自定义属性
    //可以给任何元素自定义一个属性使用, 用来保存一定数据, 方便使用
    //自定义属性生命周期 和元素生命周期一样长
    //自定义属性属性名不能乱起, 要有规范, 见名知意
    list[2].index = 2;
    list[2].name = '张三';

    //获取自定义属性的值
    console.log(list[2].index);
    console.log(list[2].name);
    
</script>

二.tab切换


<div id="box">
    <div id="head">
        <button class="current">第1个按钮</button>
        <button >第2个按钮</button>
        <button >第3个按钮</button>
        <button >第4个按钮</button>
        <button >第5个按钮</button>
    </div>
    <div id="bottom">
        <div>第1个盒子</div>
        <div>第2个盒子</div>
        <div>第3个盒子</div>
        <div>第4个盒子</div>
        <div>第5个盒子</div>
    </div>
</div>

<script>
    //1.获取所有按钮
    var head = document.getElementById('head');
    var btnList = head.getElementsByTagName('button');
    console.log(btnList);

    //2.获取bottom中所有div
    var bottom = document.getElementById('bottom');
    var divList = bottom.getElementsByTagName('div');

    //3.显示第一个div
    divList[0].style.display = 'block';

    //提前自定义属性保存索引
/*    btnList[0].index = 0;
    btnList[1].index = 1;
    btnList[2].index = 2;
    btnList[3].index = 3;
    btnList[4].index = 4;*/
    //4.遍历数组，按钮添加点击事件
    for(var i = 0;i < btnList.length; i++){
        //4.1 获取每个按钮
        var btn = btnList[i];
        //4.2 自定义属性, 保存索引
        btn.index = i;

        //4.3 给按钮添加事件, 排他思想
        btn.onclick = function () {
            //先清空所有按钮
            for(var j = 0; j < btnList.length;j++){
                btnList[j].className = ''
            }
            //再对当前被点击按钮单独设置
//            btn.className = 'current';
            this.className = 'current';

            //------------------
            //点击第i个按钮，显示第i个盒子，其他盒子隐藏
            //排他思想：先清空所有盒子display
            for(var a = 0; a < divList.length; a++ ){
                divList[a].style.display = 'none';
            }

            //console.log(i);
            //取出当前对应i个按钮的盒子
            //this.index 获取的是相应当前事件按钮的索引
            console.log(this.index);
            var div = divList[this.index];
            //单独设置对应当前第i个按钮，第i个盒子
            div.style.display = 'block'
        }
    }
</script>

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, 判断的就是文件路径
如果路径一样就不响应, 如果不一样才会响应事件

<input id="inputFile" type="file">
<script>
    //1.获取标签
    var inputFile = document.getElementById('inputFile');
    //2.添加事件
    inputFile.onchange = function () {
        //2.1 获取路径
        var path = inputFile.value;
        console.log(path, typeof path);
        //C:\fakepath\GameofThrones.jpg

        //2.2 获取索引
        var index = path.lastIndexOf('.');
        
        //2.3 截取后缀
        var str = path.slice(index + 1).toLowerCase();   
        //2.4 判断类型是不是图片， jpg png gif jpeg
        if(str === 'jpg' || str ==='png'|| str ==='gif' || str ==='jpeg'){
            alert('上传的是图片文件')
        }else{
            alert('上传的不是图片，请再次上传');
            return;
        }
    }
</script>

六.定时器

定时器: 以时间的事件来执行代码
定时器分为两种: 一次定时器(延时定时器), 间隔定时器(循环定时器)
开启定时器方法属于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';

八.长图展示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 640px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;

            position: relative;
            overflow: hidden;
        }
        #box span{
            width: 100%;
            height: 50%;
            position: absolute;
        }
        
        #box span:nth-of-type(1){
            top:0;
            /*background-color: red;*/
        }

        #box span:nth-of-type(2){
            top:50%;
            /*background-color: blue;*/
        }

        #box img{
            position: absolute;
        }
    </style>
</head>
<body>

<div id="box">
    <img id="pic" src="images/girl.jpg" alt="">
    <span></span>
    <span></span>
</div>

<script>
    //1.获取图片
    var pic = document.getElementById('pic')
    //2.获取span
    var list = document.getElementById('box').getElementsByTagName('span')

    //偏移量
    var offsetY = 0;
    //定时器
    var timer = null;

    //3.添加事件
    //上边span, 鼠标再上边， 图片往下走
    list[0].onmouseover = function () {
        //清空上次定时器
        clearInterval(timer);

            //开启定时器
        timer = setInterval(function () {
            //累加偏移量
            offsetY += 5;
            //判断是否走到了图片最上边
            if(offsetY >=0 ){
                //重新设置偏移量
                offsetY = 0
                //清空计时器
                clearInterval(timer);
            }
            // 根据偏移量, 重新设置top
            pic.style.top = offsetY + 'px'
        },10);
    }

    //下边span, 鼠标再下边， 图片往上走
    list[1].onmouseover = function () {
        //清空上次定时器
        clearInterval(timer);

        //开启定时器
        timer = setInterval(function () {
            //累减偏移量
            offsetY -= 5;
            //判断是否走到了图片最下边
            if(offsetY <=-505 ){
                //重新设置偏移量
                offsetY = -505
                //清空定时器
                clearInterval(timer);
            }
            // 根据偏移量, 重新设置top
            pic.style.top = offsetY + 'px'
        },10);

    }
</script>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,236评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,867评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,715评论 0赞 340
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,899评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,895评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,733评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,085评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,722评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,025评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,696评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,816评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,447评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,057评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,009评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,254评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,204评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,561评论 2赞 343

js基础day04

js基础day04

一.自定义属性

二.tab切换

三.数组常用方法

四.字符串常用方法

五.判断上传文件类型

六.定时器

七.匀速动画

八.长图展示

推荐阅读更多精彩内容