js基础第四天

01.设置字符翻转以及移动到不同行上显示不同的颜色

!important 提升优先级

02.九宫格算法的分析

03.九宫格算法的分析以及实现

    // 遍历
    // 总列数
    var count = 3;
    // 当前列号
    var col = 0;
    // 当前行号
    var row = 0;
    // 间距
    var margin = 10;
    for(var i = 0; i<list.length; i++){
        // 计算当前的行号
        col = i % count;
        // 计算当前的列号
        row = parseInt(i / count);
        list[i].style.left = col * (100 + margin) + 'px';
        list[i].style.top = row * (100 + margin) + 'px';
        list[i].style.position = 'absolute';
    }

04.tab切换的实现

  • 通过这个案例主要讲解标签的属性可以自定义

      // 1.获取标签
  var btns = document.getElementById('top').getElementsByTagName('button');
  var divs = document.getElementById('bottom').getElementsByTagName('div');

  // 2.添加事件
  for(var i = 0; i < btns.length; i++){

      // 标签的属性可以自定义, 可以自己增加一个属性,在需要的时候取出来使用
      btns[i].index = i;

      btns[i].onclick = function () {
          // 2.1排他思想
          for(var i = 0; i < btns.length; i++){
              btns[i].className = '';
          }
          this.className = 'curr';

          // 2.2 切换div
          // 设置所有的盒子为 none
          for (var i = 0; i < divs.length; i++){
              divs[i].style.display = 'none';
          }
          // 设置当前点击对应的盒子为 block
          divs[this.index].style.display = 'block';
      }
  }

05.数组的常用方法

  • 1.concat() 连接两个或更多的数组，并返回结果。

  • 2.push() 向数组的末尾添加一个或更多元素，并返回新的长度。

  • 3.pop() 删除并返回数组的最后一个元素

  • 4.unshift()向数组的开头添加一个或更多元素，并返回新的长度。

  • 5.shift() 删除并返回数组的第一个元素

  • 6.slice() 第一个参数代表从数组的那个索引开始截取, 第二个参数代表截取到那个索引停止 会返回一个截取后新的数组,而原始数组不会发生改变

  • 7.splice() 删除元素，并向数组添加新元素。

    • 第一个参数 index 代表要从数组的那个位置开始删除

    • 第二个参数 howmany 代表要删除元素的个数

    • item1, ..., itemX 可选。向数组添加的新项目。 在删除的位置添加新的选项可以添加多个

        console.log(arr.splice(1, 2,'隔壁老王'));
  console.log(arr);

  • 8.join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

    • 用来切割数组,将其转换为字符串, 默认用逗号隔开 原数组不变

        console.log(arr.join('*'));
  张三*李四*王五*3*刘二麻子

  • 9.sort() 对数组的元素进行排序 会改变元数组

      a>b 为升序 
  a<b 为降序
  var arr1= [0, 3, 2, 5,7];
  arr1.sort(function (a,b) {
      return a>b;
  });
  console.log(arr1);

06.字符串的常用方法

  • 1.字符串截取保留2为小数

  • 2.indexOf() 检索字符串。返回指定的索引 从前面查找

  • 3.lastIndexOf() 从后向前搜索字符串。

  • 4.charAt() 返回在指定位置的字符。

  • 5.charCodeAt()返回在指定的位置的字符的 Unicode 编码。

  • 6.slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。

      如果传入一个参数会从这个位置截取到最后

  • 7.split() 把字符串分割为字符串数组。

  • 8.toLowerCase() 把字符串转换为小写。

  • 9.toUpperCase() 把字符串转换为大写。

07.判断文件的格式是否正确

// 1.获取标签
var oinput = document.getElementById('oinput');
// 2.添加事件
oinput.onchange = function () {
//        alert(oinput.value);
    // 2.1截取
    var text = oinput.value;
    var index = text.lastIndexOf('.');
    // 转换为小写
    var lastName = text.slice(index+1).toLowerCase();
    if(lastName == 'png' || lastName == 'jpg'){
        alert('格式正确');
    }else {
        alert('格式不正确,请上传格式为png或者jpg的图片');
    }
}

08.定时器

  • 1.多次定时器

  • 定时器注意点: 如果定时器不用的话一定要清空,否则会造成内存泄漏

    • setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

    • setInterval() 方法会不停地调用函数，直到 clearInterva() 被调用或窗口被关闭

        /*
  * setInterval()
  * 多次定时器 可以间隔固定的时间执行某段代码
  * 第一个参数 要执行的代码块, 函数名
  * 第二个参数 间隔时间  单位ms 毫秒
  * */
  var timer = null;
  timer = setInterval(fn,1000);
  function fn() {
      alert('我是多次定时器');
  }
  // 清空多次定时器
  clearInterval(timer);
    1. 一次定时器

    • setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

        /*一次定时器 延迟多少秒执行
   setTimeout(fn,1000);
   第一个参数 要执行的代码块, 函数名
   第二个参数 间隔时间  单位ms 毫秒
  * */
  var timer = null;
  timer = setTimeout(fn,1000);
  function fn() {
      alert('我是一次定时器');
  }
  // 清空一次定时器
  clearTimeout(timer);

09.定时器匀速动画

// 1.获取标签
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');

    // 2.添加事件
    btn.onclick = function () {
        linear(box,0,4,800);
    };

    // 抽取函数
    /**
     * 匀速动画
     * @param begin 初始值
     * @param speed 速度
     * @param target 目标值
     */
    function linear(dom,begin,speed,target) {
        // 1.清空上次定时器
        clearInterval(dom.timer);
        // 2.开启定时器
        dom.timer = setInterval(function () {
            begin += speed;
            // 判断终止条件
            if (begin >= target) {
                clearInterval(dom.timer);
                begin = target;
            }
            dom.style.left = begin + 'px';
        }, 10);
    }

10.定时器缓动动画

// 1.获取标签
var btn = document.getElementById('btn');
var box = document.getElementById('box');
// 定时器
var timer = null;
// 目标值
var target = 800;
// 初始值
var begin = 0;
// 速度
var speed = 0;

// 2.添加事件
btn.onclick = function () {
    // 2.1 清除定时器
    clearInterval(timer);

    timer = setInterval(function () {
        speed = (target - begin) / 10;
        begin += speed;
        // 四舍五入函数 round()
        if (Math.round(begin) >= target) {
            clearInterval(timer);
//                alert('定时器清空');
            begin = target;
        }
        console.log(begin);
        box.style.left = begin + 'px';
    }, 50)
}
4256-106.jpg

01.点名册案例

// 1.获取标签
var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
// 2.添加事件
// 开始
var timer = null;
var arr = ['张三','李四','王五','刘二麻子','二狗','小明','隔壁老王'];
btns[0].onclick = function () {
    // 清空定时器
    clearInterval(timer);
    timer = setInterval(function () {
        // 1.生成随机数 生成 0-1的随机数,但是不能取到1
        var randomNum = parseInt(Math.random() * arr.length);

        // 2.从数组中取出值
        oh1.innerHTML = arr[randomNum];
    },10);
};
// 停止
btns[1].onclick = function () {
    clearInterval(timer);
}

02.长图展示

// 1.获取标签
var spans = document.getElementById('box').getElementsByTagName('span');
var pic = document.getElementById('pic');

// 2.添加事件
var timer = null;
var begin = 0;
var speed = 4;
spans[0].onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        begin -= speed;
        if (begin <= -505){
            clearInterval(timer);
            begin = -505;
        }
        pic.style.top = begin + 'px';
    },10)
};
spans[1].onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        begin += speed;
        if (begin >= 0){
            clearInterval(timer);
            begin = 0;
        }
        pic.style.top = begin + 'px';
    },10)
}

03.展示阴影

<div id="box">
    <span id="cover"></span>
</div>

// 1.获取标签
var box = document.getElementById('box');
var cover = document.getElementById('cover');
// 2.添加点击事件
var timer = null;
var begin = 150;
box.onmouseover = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        begin -= 3;
        if (begin <= 0){
            clearInterval(timer);
            begin = 0;
        }
        cover.style.top = begin + 'px';
    },10);
}

04.js定时器原理

  • 一次定时器 在指定时间内, 将任务放入事件队列,等待js引擎空闲后被执行.
  • setInterval(fn, 100)容易产生误区：并不是上一次fn执行完了之后再过100ms才开始执行下一次fn。 事实上，setInterval并不管上一次fn的执行结果，而是每隔100ms就将fn放入主线程队列，而两次fn之间具体间隔多久就不一定了。
  • 定时器的用处, 如果有很多节点渲染,可以将多个节点放入定时器中来执行,这样就不会阻塞线程,提高用户体验

05.一次定时器执行多次操作以及递归的认识

var box = document.getElementById('box');
    var timer = setTimeout(jump,1000);
    var count = 5;
    function jump() {
        // 每次进来先清空上一个定时器
        clearTimeout(timer);
        count--;
        box.innerHTML = '要在' + count + '秒后跳转';
        if (count <= 0){
            window.location.href = 'http://www.baidu.com';
        }else {
//            timer = setTimeout(jump,1000);
            timer = setTimeout(arguments.callee,1000);
            // 递归:自己搞自己, 自己调用自己
            // arguments.callee 在函数内部指的是函数本身
        }
    }

06.简单轮播图的认识

// 1.获取标签
var oul = document.getElementById('oul');

// 2.图片轮播
// 初始值
var begin = 0;
setInterval(function () {
    begin -= 4;
    if (begin <= -1200){
        begin = 0;
    }
    oul.style.left = begin + 'px';
},20)

07.左右轮播图

// 1.获取标签
var spans = document.getElementById('box').getElementsByTagName('span');
var oul = document.getElementById('oul');

// 2.添加点击事件
// 点击右侧
var timer = null;
// 偏移量
var begin = 0;
// 索引
var loop = 0;
// 速度
var speed = 4;

// 记录标志
var flag = true;

spans[1].onclick = function () {
    if (flag == false) return;
    flag = false;
    // 页码自增1
    loop++;
    if (loop > 5){
        // 重置页码为1
        loop = 1;
        // 重置偏移量
        begin = 0;
    }
    timer = setInterval(function () {
        begin -= speed;
        if (begin <= loop * -640){
            clearInterval(timer);
            begin = -640 * loop;
            flag = true;
        }
        oul.style.left = begin + 'px';
    },10)
};
// 左边
spans[0].onclick = function () {
    if (flag == false) return;
    flag = false;
    loop--;
    if (loop < 0){
        loop = 4;
        begin = 5 * -640;
    }
    timer = setInterval(function () {
        begin += speed;
        if (begin >= loop * -640){
            clearInterval(timer);
            begin = -640 *loop;
            flag = true;
        }
        oul.style.left = begin + 'px';
    },10);
}

08.发送验证码

// 1.获取标签
var btn = document.getElementById('btn');
// 2.添加事件
var timer = null;
// 剩余的秒数
var count = 5;
btn.onclick = function () {
    // 2.1 禁止按钮点击
    this.disabled = true;

    // this 在定时器中指向窗口,因为开启定时期的时候本身就是window.setInterval()
    // 备份指针
    var that = this;

    // 2.2 倒计时
    timer = window.setInterval(function () {
        count--;
        if(count < 0){
            clearInterval(timer);
            count = 5;
            that.disabled = false;
            that.innerHTML = '重新发送验证码';
        }else {
            that.innerHTML = '剩余' + count + '秒';
        }
    },1000)
}

09.节点操作

// 1.创建节点
var h1 = document.createElement('h1');
h1.innerHTML = '我是标题'; 
// 2.添加节点
// appendChild 在节点后面添加
// document.body.appendChild(h1);
var box = document.getElementById('box');
// insertBefore 第一个参数是要插入的节点, 第二个参数是要插入到那个节点前面 如果为null则插入到最后面
document.body.insertBefore(h1,box);

// 创建节点
var div = document.createElement('div');
div.style.width = '200px';
div.style.height = '200px';
div.style.background = 'red';
document.body.appendChild(div);

// 3.删除节点 要删除的节点
document.body.removeChild(box);
// 4.克隆节点
// cloneNode 如果为true就会复制节点里面的所有孩子节点,包括样式
// 如果为false 就只是赋值自己
var ele = box.cloneNode(false);
console.log(ele);
ele.style.marginTop = '10px';

// 添加节点
document.body.appendChild(ele);

// 替换节点
var box = document.getElementById('box');
var h1 = document.createElement('h1');
h1.innerHTML = '我是标题';
document.body.replaceChild(h1,box);

[图片上传中...(198750-106.jpg-4eef16-1511534081422-0)]

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • js基础第五天
    01-获取孩子节点 childNodes 获取的包括文本 nodeType 为1是标签 为2是属性 为3是文本 ...
    LIT乐言阅读 184评论 0赞 1
  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 8,120评论 2赞 17
  • 彩铅练习合集 | 遇见你是如此美好的事
    无意间在简书遇见了心蓝老师，被她的作品惊艳从此开启了彩铅之旅，21天的课程收获的不仅仅是彩铅，对我来说简直开启了新...
    阿九家的企鹅阅读 349评论 2赞 6
  • 电影中的＂空间＂是如何被看见的？
    电影本身就是一门时空艺术。 电影空间具有其自身的特征:即二重性。二重性一指银幕本身所占有的空间（即二维空间)，二指...
    十漱阅读 1,964评论 0赞 0
  • 只想有人记得我
    本文参加＃川理情·我的大学故事＃活动。本人承诺文章内容均为原创、且未在其他平台上发布过 其实我很久...
    莱克生阅读 432评论 0赞 1

友情链接更多精彩内容