温故而知新

js复习

Home
2023

Scroll down

03/19

15:34

wangcai

JavaScript

常用方法及属性

math

数组

窗口

history

document

DOM

鼠标

键盘

表单

编辑

内置对象

1
2
3

math
Math.random();  // 返回随机数
Date() // 日期对象，是构造函数，必须用new来创建

倒计时案例

function cutDown ( time ) {
  var nowTime = +new Date();  // 返回当前总毫秒数
  var intTime = +new Date(time); // 返回输入的总毫秒数
  var Times = (intTime - nowTime) / 1000; // 返回剩余总时间
  var d = parseInt(Times / 60 / 60 /24); //返回剩余总天数
  d = d <= 10 ? '0' + d : d;
  var h = parseInt(Times /60 /60 %24); // 返回剩余总小时
  h = h <= 10 ? '0' + h : h;
  var m = parseInt(Times /60 %60);返回剩余分钟
  m = m <= 10 ? '0' + m : m;
  var s = parseInt(Times %60);返回剩余秒数
  s = s <= 10 ? '0' + s : s;

console.log(cutDown('2023-3-21 11:00:00'))
}

数组

添加与删除

push(参数1) // 在数组末尾添加一个或多个元素，会返回新的长度
unshift(参数1) // 向数组开头添加一个或多个元素，返回新的长度
shift() // 删除数组开头的第一个元素，数组长度-1，无参数，返回第一个元素的值
pop() // 删除数组末尾的一个元素，无参数 返回它删除的元素的值

排序

1
2

reverse() // 颠倒数组中元素的顺序
sort() // 对元素进行排序 默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的 默认升序排列

数组索引

1
2

indexOf() // 数组中查找给定元素的第一个索引，存在则返回索引号，不存在则返回-1
lastIndexOf() // 在数组的最后一个索引 存在则返回索引号，不存在返回-1

数组去重

function unique (arr) {
  var newArr = [];
  for (i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}
var demo = unique ([1,1,3,2,5])
console.log (demo);

字符出现的位置及次数

var str = 'ahsgdyfwdysdvwagda';
var index = str.indeOf('w');
var num = 0;
while (index != -1) {
  console.log(index);
  num ++;
  index = str.indexOf('w',index + 1)
}
console.log('w出现的次数是：' +num);

根据位置返回字符串

统计出现次数最多的字符和次数

var str = 'aooaooaaabcdo';
    var n = {}; // n为对象
    for (var i = 0; i <= str.length; i++){
      var char = str.charAt(i);
      if (n [char]){  // n[char]表示n这个对象里有没有这个属性
        n[char]++;
      }
    else{
      n[char] = 1; // 相当于先执行了n[char] = 1，创建了对象，然后再判断是否已经存在对象
      }
    }
    console.log(n);
    //遍历对象
    var max = 0;
    var ch = '';
      for (var k in n){ // 遍历对象需要使用 for in
        //k 得到的是属性名,n[k]得到的是属性值
      if (n[k] > max){
        max = n[k];
        ch = k; // 此处的属性名k 是for in中的局部变量 只有在循环中才有用 , 所以我们需要创建一个 ch 来存储 k
      }
}
    console.log(max);
    console.log('出现次数最多的是' + ch);

字符串操作

获取元素

	//getElementById
//var timer = document.getElementById('id');
//返回的是一个元素对象
// console.dir(timer);打印返回的元素对象，能查看里面的属性和方法

	//getElementsByTagName
//var dv = document.getElementsByTagName('div');
//返回的是获取的元素对象集合，以伪数组形式存储。
//如果页面中没有这个元素，返回空的伪数组

	//H5新增
// getElementByClassName('类名'); 根据类名返回元素对象集合
// var name1 = document.getElementsByClassName('classname');
//querySelector（'选择器'） 返回指定选择器的第一个元素
// var firstele = document.querySelector('.box');
// var firstele2 = document.querySelector('#id');
//querySelectorAll（'选择器'） 返回指定选择器的所有元素对象集合 伪数组
   //获取body元素
//var bodyele = document.body;
	//获取html元素
//var htmlele = document.documentElement;

鼠标事件

显示当前系统时间

var btn = document.querySelector('button');
  var div = document.querySelector('div');
  btn.onclick = function (){
    // div.innerText = '2022-3-22';
    div.innerText = getDate();
  }
  function getDate(){
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr =['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
    var day = date.getDay();
    return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
  }

改变元素内容

显示与隐藏密码

var img1 = document.querySelector('img');
   var input = document.querySelector('input');
   var flag = 0;
   img1.onclick = function (){
       if (flag == 0){
       img1.src = "../../jpgs/open.png"
       input.type = "text";
       flag = 1;
       }else{
           img1.src = "../../jpgs/nosee.png";
           input.type = "password";
           flag = 0;
       }
   }

修改样式属性

var div = document.querySelector('div');
var flag = 0;
div.onclick = function (){
  if (flag ==0){
    this.style.backgroundColor = 'blue';
    this.style.width = '100px';
    flag = 1;
  }else{
    this.style.backgroundColor = 'pink';
    this.style.width = '200px';
    flag = 0;
  }
}

精灵图

  var lis = document.querySelectorAll('li');
for (var i = 0;i < lis.length; i++) {
  var index = i * 44;
  lis[i].style.backgroundPosition = '0 -'+ index +'px';
}

显示隐藏文本框

var content = document.querySelector('input');
  content.onfocus = function (){
      if (this.value === '手机'){
          this.value = '';
      }
      this.style.color = '#333';
  }
  content.onblur = function (){
      if (this.value === ''){
          this.value = '手机'
      }
      this.style.color = '#999';
  }

操作元素

排他思想

var btns = document.getElementsByTagName('button');
  for (var i = 0; i < btns.length; i++){ // 循环遍历所有btn
    btns[i].onclick = function (){
      for (var i = 0; i < btns.length; i++){
        btns[i].style.backgroundColor = '';  // 清除所有btn样式
      }
      this.style.backgroundColor = 'pink'; // 保留当前样式
    }
  }
   // 排他思想：如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法
   //   所有元素全部清除样式
   //   给当前元素设置样式
   //   注意顺序不能颠倒

全选反选

    var allc = document.getElementById('allcheck');
    var jbody = document.querySelector('#jbody').getElementsByTagName('input');
    allc.onclick = function (){
      // this.checked;
      for (var i = 0; i < jbody.length; i++){
        jbody[i].checked = this.checked;
      }
    }
//下面复选按钮影响全选按钮
    for (var i = 0; i < jbody.length; i++){
      jbody[i].onclick = function (){
        //flag控制全选按钮是否选中
        var flag = true;
        for (var i = 0;i < jbody.length; i++){
          if (!jbody[i].checked){
            flag = false;
              break;
          }
        }
        allc.checked = flag;
      }
    }

自定义属性操作

获取元素属性值

  //获取元素属性值
  element.属性;
  div.id;
  --
  element.getAttribute('属性');
  div.getAttribute('id');
  --
  //自定义属性为 index
  div.getAttribute('index');
  --
  //设置元素属性值
  element.属性 = '值'
  div.id= 'newid'
  --
  element.setAttribute('属性','值')
  element.setAttribute('index','1');
  --
  //移除属性 removeAttribute
div.removeAttribute('index');

tab栏切换布局

<div class = 'table'>
    <div class="table-list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格</li>
            <li>商品评价</li>
        </ul>
    </div>
    <div class="contents" >
        <div class="ite" style="display: block">商品内容</div>
        <div class="ite">规格详情</div>
        <div class="ite">评价</div>
    </div>
</div>
<script>
 var tableli = document.querySelector('.table-list');
 var lis = tableli.querySelectorAll('li');
 var divs = document.querySelectorAll('.ite');
 for (var i = 0; i < lis.length; i++){
     //设置索引号
     lis[i].setAttribute('index',i);
     lis[i].onclick = function (){
         for (var i = 0; i < lis.length; i++){
             lis[i].className = '';
         }
        this.className = 'current';
         var index = this.getAttribute('index');
         for (var i = 0;i < divs.length;i++){
             divs[i].style.display = 'none';
         }
         divs[index].style.display = 'block';
     }
 }
</script>

H5属性

规定自定义属性由 data- 开头作为属性名并赋值
如

H5新增获取自定义属性 element.dataset.index 或者 element.dataset[index]
div.dataset.index;
div.dataset[index];

节点操作

下拉菜单

<div>
  <ul class="nav">
    <li>
        <a href="">微博</a>
    <ul>
      <li><a href="">私信</a></li>
      <li><a href="">评论</a></li>
      <li><a href="">关于我</a></li>
    </ul>
    </li>
      <li><a href="">微笑</a>
      <ul class="lis2">
          <li><a href="">私信</a></li>
          <li><a href="">网站</a></li>
          <li><a href="">ppp</a></li>
      </ul>
      </li>
  </ul>
</div>
<script>
    var nav = document.querySelector(".nav");
    var lis = nav.children;
    for (var i = 0;i < lis.length; i++) {
        lis[i].onmouseover = function (){
            this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function (){
            this.children[1].style.display = 'none';
        }
    }
</script>

父子节点

i.parentNode

i.childNodes

兄弟节点

<script>
  //下一个子元素节点
  div.nextElementSibling
  //上一个子元素节点
  div.previousElementSibling
</script>

发布与删除留言

var btn = document.querySelector('button');
var cont = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function (){
 if (cont.value == ''){
     alert('你倒是打字啊');
     return false;
 }else {
     var li = document.createElement('li');
     li.innerHTML = cont.value + " <a href='javascript:;'>删除</a>";
     // ul.appendChild(li);
     ul.insertBefore(li,ul.children[0]);
     var as = document.querySelectorAll('a')
         for (var i = 0;i < as.length;i++){
             as[i].onclick = function (){
                 //node.removeChild(child);
                 ul.removeChild(this.parentNode);
             }
         }
     }
}

复制节点

//复制节点 node.cloneNode();括号为空或者里面是false 浅拷贝 只复制标签，不复制里面的内容
ul.children[0].cloneNode();
//复制节点 node.cloneNode(true);括号为true 深拷贝 复制标签和里面的内容
ul.children[0].cloneNode(true);

遍历对象

var obj = {
  name: '遍历',
  age: '22',
  sex: '男'
}
for (var k in obj){
  console.log(k);// k 变量 输出 得到的是 属性名：name age sex
  console.log(obj[k]);//obj[k] 得到的是 属性值
}

动态创建与删除表格

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>科目</th>
      <th>成绩</th>
      <th>操作</th>
   </tr>
  </thead>
  <tbody>

  </tbody>
</table>
    <script>
        //准备数据
        var datas = [
            {
                name: '张麻子',
                subjct: '手',
                score:  66
            },{
                name: '小六子',
                subjct: '手',
                score:  99
            },{
                name: '王五',
                subjct: '手',
                score:  88
            }
        ];
        //在tbody里创建行
        var tbody = document.querySelector('tbody');
        for (var i = 0;i < datas.length;i++){
            //创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //创建tr内单元格td
            for (var k in datas[i]){
              var td = document.createElement('td');
              td.innerHTML = datas[i][k];
              tr.appendChild(td);
            }
            //创建删除单元格
          var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td);
        }
        //删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0;i < as.length; i++){
          as[i].onclick = function (){
            //点击a 删除当前所在行 node.removeChild(child)
            tbody.removeChild(this.parentNode.parentNode);
          }
        }
    </script>

三种动态创建元素区别

<button>点击</button>
    <p>abc</p>
  <script>
// 三种动态创建元素区别
//document.write()创建元素
//document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，再调用这句话它会导致页面全部重绘
var btn = document.querySelector('button');
btn.onclick = function (){
  document.write('<div>123</div>');
}


  //innerHTML创建元素 将内容写入某个DOM节点，不会导致页面全部重绘
  //innerHTML拼接元素效率
  function fn(){
    var d1 = +new Date();
    for (var i = 0;i < 1000;i++){
      document.body.innerHTML += '<div style="width:100px;height:2px;border:1px solid blue;"></div>'
    }
    var d2 = +new Date();
    console.log(d2 - d1);
  }
  fn();

//innerHTML数组效率 innerHTML创建多个元素效率更高（不要采用拼接字符串，采取数组形式拼接），结构稍微复杂
  function fn(){
      var d1 = +new Date();
      var arr = [];
      for (var i = 0;i < 1000;i++){
          arr.push('<div style="width:100px;height:2px;border:1px solid blue;"></div>');
      }
      document.body.innerHTML = arr.join('');
      var d2 = +new Date();
      console.log(d2 - d1);
  }
  fn();


  //document.createElement() 创建元素  document.createElement()创建多个元素效率稍低，但结构更清晰
  //document.createElement()效率
  function fn(){
    var d1 = +new Date();
    for (var i = 0;i < 1000;i++){
        var div = document.createElement('div');
        div.style.width = '100px';
        div.style.height = '2px';
        div.style.border = '1px solid red'
      document.body.appendChild(div);
    }
    var d2 = +new Date();
    console.log(d2-d1);
  }
  fn();
  </script>

dom树

DOM重点核心

  //关于DOM操作，主要针对元素的操作。主要有 增、删、改、查、属性操作、事件操作

/*
   //创建
  document.write();
  innerHTML;
  createElement;

  //增
  appendChild
  insertBefore

  //删
  removeChild

  //改
  主要修改DOM的元素属性、dom元素的内容、属性，表单的值
  修改元素属性：src href title
  修改普通元素内容：innerHTML innerText
  修改表单元素：value、type、disabled
  修改元素样式：style className

  //查
  主要获取查询dom的元素
  dom提供的API方法：getElementById getElementByTagName 古老用法不太推荐
  H5提供的新方法：querySelector querySelectorAll
  利用节点操作获取元素：父(parentNode) 子（children） 兄（previousElementSibling、nextElementSibling）

  //属性操作
  setAttribute：设置dom的属性值
  getAttribute：得到dom的属性值
  removeAttribute移除属性

  //事件操作
  给元素注册事件，采取事件源.事件类型 = 事件处理程序
 */

注册事件

<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<!--传统注册方式：-->
<!--  利用on开头的事件 onclick-->
<!--  <button onclick="alert('hi~')"></button>;-->
<!--  btn.onclick = function (){};-->
特点：注册事件的唯一性——同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

<!--方法监听注册方式-->
<!--addEventListener()-->
<!--IE9之前的IE不支持，用attachEvent()代替-->
<!--特点：同一个元素同一个事件可以注册多个监听器-->
<script>
 // eventTarget.addEventListener(type,listener[,useCapture]);
 // 该方法接收三个参数
 // type：事件类型字符串，比如click、mouseover，注意这里不需要带on
 // listener：事件处理函数，事件发生时，会调用该监听函数
 // useCapture:可选参数，是一个布尔值，默认是false。
 // eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定事件时，就会执行事件处理程序
var btns = document.querySelectorAll('button');
btns[1].addEventListener('click',function (){
  alert(11);
})
 btns[1].addEventListener('click',function (){
  alert(22);
})
</script>
</body>

ie9之前的版本支持 attachEvent

注册事件兼容性解决方案

注册事件兼容性解决方案：做一个兼容性封装函数
兼容性处理原则：先照顾大多数浏览器，再处理特殊浏览器
<script>
  function addEventListener(element,eventName,fn){
    //判断当前浏览器是否支持 addEventListener方法
    if (element.addEventListener){
      element.addEventListener(eventName,fn);//第三个参数 默认是false
    }else if (element.attachEvent){
      element.attachEvent('on' + eventName,fn);
    }else {
      //相当于 element.onclick = fn;
      element['on' + eventName] = fn;
    }
  }
</script>

删除事件

<script>
    //传统方式删除事件
    //eventTarget.onclick = null;
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function (){
      alert('11');
      divs[0].onclick = null;
    }

    //方法监听注册方式
    //eventTarget.removeEventListener(type,listener[,useCapture]);
    divs[1].addEventListener('click',fn)
    function fn(){
      alert(22);
      divs[1].removeEventListener('click',fn);
    }

    //
    divs[2].attachEvent('onclick',fn1);
    function fn1(){
      alert(33);
      divs[2].detachEvent('onclick',fn1);
    }
  </script>

DOM事件流

事件冒泡： IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播直到DOM顶层节点的过程。
事件捕获： 网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体元素接收的过程。
useCapture: true-事件句柄在捕获阶段执行
false-默认，事件句柄在冒泡阶段执行

<script>
  //js代码中只能执行捕获或者冒泡其中一个阶段
  //onclick和attachEvent只能得到冒泡阶段
  //捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段
var son = document.querySelector('.son');
    son.addEventListener('click',function (){
        alert('son');
    },true);
    var father = document.querySelector('.father');
    father.addEventListener('click',function (){
        alert('father');
    },true);

    //冒泡阶段 如果addEventListener 第三个参数是 false 或者省略 那么则处于冒泡阶段
  var son = document.querySelector('.son');
  son.addEventListener('click',function (){
      alert('son');
  },false);
  var father = document.querySelector('.father');
  father.addEventListener('click',function (){
      alert('father');
  },);
</script>

有些事件没有冒泡比如 onblur onfoucs onmouseenter onmouseleave

事件对象常见的属性和方法

返回触发事件的对象

<script>
  //常见对象的属性和方法
  1.e.target 返回触发事件的对象
  var div = document.querySelector('div');
  div.addEventListener('click',function (e){
    console.log(e.target);
    console.log(this);
  })
  //e.target 返回的是触发事件的对象（元素)    this返回的是绑定事件的对象（元素）
  var ul = document.querySelector('ul');
  ul.addEventListener('click',function (e){
    //e.target指向点击的对象 谁触发了事件
    console.log(e.target);
    //ul绑定了事件 this 指向ul
    console.log(this);
    //e.currentTarget 跟this有个相似属性
    console.log(e.currentTarget);
  })

  //兼容性
  div.onclick = function (e){
    e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(target);
  }
</script>

阻止默认行为

<script>
    //常见对象的属性和方法
    //返回事件类型
    var div = document.querySelector('div');
    div.addEventListener('click',fn);
    div.addEventListener('mouseout',fn);
    div.addEventListener('mouseover',fn);
    function fn(e){
      console.log(e.type);
    }

    //阻止默认行为（事件） 比如让链接不跳转 按钮不提交
    var a = document.querySelector('a');
    a.addEventListener('click',function (e){
      e.preventDefault();//dom标准写法
    })
    //传统注册方式
    a.onclick = function (e){
      //普通浏览器  e.preventDefault();方法
      e.preventDefault();
      //低版本浏览器 ie678 e.returnValue属性
      e.returnValue;
      //利用 return false 也能阻止默认行为 无兼容性问题 特点：return后面的代码不执行 而且只限制传统的注册方式
      return false;
    }
  </script>

阻止事件冒泡

<script>
    //常见事件对象的属性和方法
    //阻止事件冒泡 dom 推荐的标准 stopPropagation()    非标准写法：ie678利用事件对象cancelBubble属性
    var son = document.querySelector('.son');
    son.addEventListener('click',function (e){
        alert('son');
        e.stopPropagation();
       //非标准写法 e.cancelBubble = true;
    },false);
    var father = document.querySelector('.father');
    father.addEventListener('click',function (){
        alert('father')
    },false);
    document.addEventListener('click',function (){
        alert('document');
    })
</script>

事件委托

<script>
    //事件委托原理：  不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
    //事件委托作用：   只操作了一次dom，提高了程序性能
    //事件委托核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function (e){
        alert('框来！');
    //e.target可以得到点击的对象
     e.target.style.backgroundColor = 'pink';
    })
</script>

常见鼠标事件

<script>
  //禁止鼠标右键菜单
  //contextmenu主要控制应该何时显示上下文菜单，主要用于取消默认的上下文菜单
  document.addEventListener('contextmenu',function (e){
    e.preventDefault();
  })

  //禁止鼠标选中 selectstart开始选中
  document.addEventListener('selectstart',function (e){
    e.preventDefault();
  })
</script>

鼠标事件对象

<script>
  //鼠标事件对象MouseEvent
  document.addEventListener('click',function (e){
    //client 返回的是鼠标在可视区的X和Y坐标
    console.log(e.clientX);
    console.log(e.clientY);
    //page 返回的是鼠标在页面文档的X和Y坐标
    console.log(e.pageX);
    console.log(e.pageY);
    //screen 返回的是鼠标在电脑屏幕的X和Y坐标
    console.log(e.screenX);
    console.log(e.screenY);
  })
</script>

mousemove

<script>
    //每次鼠标移动获得新的鼠标坐标，把X和Y坐标作为图片的top和left值就可以移动图片
    var img = document.querySelector('img');
    document.addEventListener('mousemove',function (e){
        //只要鼠标移动 就会触发mousemove事件
        // console.log(1)
        var x = e.pageX;
        var y = e.pageY;
        // console.log('x坐标是' + x);
        // console.log('y坐标是' + y);
        img.style.left = x - 100 + 'px';
        img.style.top = y - 50 + 'px';
    })
</script>

键盘事件

键盘事件对象

<script>
  //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
  document.addEventListener('keyup',function (e){ //keyup 和keydown不区分字母大小写 keypress区分大小写
    console.log(e.keyCode)
  })
</script>

模拟京东按键输入框

<body>
<input type="text">
<script>
  var search = document.querySelector('input');
  document.addEventListener('keyup',function (e){
   // console.log(e.keyCode);
    if (e.keyCode === 83){
      search.focus();
    }
  })
</script>

BOM

浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

window对象是浏览器的顶级对象，具有双重角色。

1.是浏览器访问JS的一个接口

2.是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

window对象常见事件

窗口加载事件

<script>
  //窗口加载事件
  //window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件（包括图形、脚本文件、css文件等）就调用的处理函数
  window.onload = function (){
    var btn = document.querySelector('button');
    btn.addEventListener('click',function (){
      alert('点我');
    })
  }

//DOMContentLoaded事件触发时，仅当DOM加载完成，不包括图片、样式表、flash等等
  //当页面图片过多，从用户访问到onload触发需要较长时间，交互效果不能实现，影响用户体验，此时使用DOMContentLoaded事件合适
  document.addEventListener('DOMContentLoaded',function (){
      alert('111')
  })
</script>
<button>点击</button>

调整了窗口大小事件

//调整窗口大小事件
//window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
//可利用此事件完成响应式布局。window.innerWidth当前屏幕宽度
window.addEventListener('resize',function (){
    console.log('变变变');
     if (window.innerWidth <= 800){
          div.style.display = 'none';
      }else {
          div.style.display = 'block';
      }
})

定时器

<script>
  //setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
  //setTimeout()这个调用函数也称为回调函数callback
  //window.setTimeout(调用函数，[延迟的毫秒数]) window在调用时可省略 如果省略延时时间，默认是0
  //调用函数可直接写函数，也可以写函数名 还可以'函数名（）'
  //页面中有多个定时器，可以加标识符（名字）
  setTimeout(function (){
    alert('时间到了')
  },2000)

  //setInterval()方法重复调用一个函数，每隔一个时间，就调用一次回调函数。
  setInterval(function (){
      console.log('持续')
  },1000)
</script>

3秒后自动关闭广告

<img src="../../../jpgs/01.jpg" alt="">
<script>
  var pic = document.querySelector('img');
  setTimeout(function (){
    pic.style.display = 'none';
  },3000)
</script>

停止定时器

<script>
  //停止setTimeout（）定时器
  //window.clearTimeout(timeoutID)
  var btn = document.querySelector('button');
  var time1 = setTimeout(function (){
    console.log('午时已到')
  },5000);
  btn.addEventListener('click',function (){
    clearTimeout(time1);
  })

  //停止setInterval()定时器
  //window.clearInterval(intervalID);
    var btn1 = document.querySelector('.start');
    var timer = null;
  btn1.addEventListener('click',function (){
      timer = setInterval(function (){
          console.log('你好');
      },1000)
  });
  btn.addEventListener('click',function (){
      clearInterval(timer);
  })
</script>

倒计时案例

<script>
  var hour = document.querySelector('.hour');
  var minute = document.querySelector('.minute');
  var second = document.querySelector('.second');
  var inputtime = +new Date('2022-4-30 18:12:00');//返回用户输入时间的总毫秒数
  cutDown();//先调用一次，防止第一次刷新页面空白
  //开启定时器
  setInterval(cutDown,1000);
  function cutDown(){
      var nowTime = +new Date();
      var times = (inputtime - nowTime) / 1000;//times是剩余时间总秒数
      var h = parseInt(times / 60 / 60 % 24);//时
      h = h < 10 ? '0' + h : h;
      hour.innerHTML = h;
      var m = parseInt(times / 60 % 60);//分
      m = m < 10 ? '0' + m : m;
      minute.innerHTML = m;
      var s = parseInt(times % 60);//秒
      s = s < 10 ? '0' + s : s;
      second.innerHTML = s;
  }
</script>

发送短信案例

<body>
  手机号：<input type="number"><button>发送</button>
  <script>
    var btn = document.querySelector('button');
    var time = 3;
    btn.addEventListener('click',function (){
      btn.disabled = true;
     var timer = setInterval(function (){
      if (time == 0){
        clearInterval(timer);
        btn.disabled = false;
        btn.innerHTML = '发送';
        time = 3;
      }else {
        btn.innerHTML = time + '秒后再次发送'
        time--;
      }
      },1000)
    })
  </script>
</body>

JS执行机制

同步和异步

异步

多任务多线程同时进行
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环。

location对象属性

5秒后自动返回首页案例

<script>
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  var time = 5;
  btn.onclick = function (){
    cutDown();
    setInterval(cutDown,1000);
  }
  function cutDown(){
    if (time == 0){
      location.href = 'http://www.baidu.com';
    } else {
      div.innerHTML = time + '秒后返回首页';
      time--;
    }
  }
</script>

获取URL参数

<script>
  var parmas = location.search.substr(1);//unmae=andy
  //利用 = 把字符串分割为数组 split('=');
  var arr = parmas.split('=');
  console.log(arr);
  var div = document.querySelector('div');
  div.innerHTML = arr[1] + '欢迎您';
</script>

location对象方法

<script>
    	//location.assign();跳转页面，重定向页面
    var btn = document.querySelector('button');
    btn.addEventListener('click',function (){
        location.assign('http://www.baidu.com');//记录浏览历史，可以实现后退功能。
        
         //location.replace();替换当前页面，不记录浏览历史无法实现后退功能。
        location.replace('http://www.baidu.com');

   		 //location.reload();重新加载页面，相当于刷新按钮或者F5，参数为true 强制刷新Ctrl+F5
        location.reload();
     })
</script>

navigator对象

history对象

history对象方法

<body>
<a href="list.html">点我前往列表页</a>
  <button>前进</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function (){
      //  history.forward();
       history.go(1);
    })
</script>
</body>

<body>
<a href="index.html">点我去首页</a>
<button>后退</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function (){
      //  history.back();
        history.go(-1);
    })
</script>
</body>

元素偏移量offset

<script>
  var father = document.querySelector('.father');
  var son = document.querySelector('.son');
  //得到元素的偏移 位置 返回不带单位的数值
  console.log(father.offsetTop);
  console.log(father.offsetLeft);
  //以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准
  console.log(son.offsetLeft);

  var w = document.querySelector('.w');
  //可以得到元素的大小 宽度和高度 包含padding+border+width
  console.log(w.offsetWidth);
  console.log(w.offsetHeight);
  //返回带有定位的父亲 否则返回的是body
  console.log(son.offsetParent);
  console.log(son.parentNode);//返回最近一级的父亲，不管父亲有没有定位
</script>

offset与style的区别

获取鼠标在盒子里的坐标

<script>
  var box = document.querySelector('.box');
  box.addEventListener('click',function (e){
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
  })
</script>

模态框拖拽

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    a {
      text-decoration: none;
      color: black;
    }
    .header {
      text-align: center;
      font-size: larger;
      font-weight: bolder;
    }
    .login {
      display: none;
      width: 500px;
      height: 300px;
      position: fixed;
      border: #ebebeb solid 1px;
      left: 50%;
      top: 50%;
      background-color: #ffffff;
      box-shadow: 0px 0px 20px #dddd;
      z-index: 9999;
      transform: translate(-50% -50%);
    }
    .login-title {
      width: 100%;
      margin:10px 0px 0px 0px;
      text-align: center;
      line-height: 40px;
      height: 40px;
      font-size: 18px;
      position: relative;
      cursor: move;
    }
    .login-content {
      margin-left: 20px;
      width: 300px;
      height: 200px;
    }
    .login-content label {
      width: 85px;
      display: inline-block;
      text-align: right;
      padding-right: 20px;
    }
    .login-input {
      padding: 18px;
      width: 400px;
    }
    .loginbtn {
      width: 100px;
      height: 25px;
      text-align: center;
      border: #999999 solid 1px;
      box-shadow: 0px 0px 20px #cccccc;
      position: absolute;
      margin-left: 150px;
      margin-top: 17.5px;
    }
    .close {
      text-align: center;
      line-height: 40px;
      width: 40px;
      height: 40px;
      border: #fff solid 1px ;
      border-radius: 50%;
      background-color: #ffffff;
      position: absolute;
      left: 480px;
      top: -27px;
    }
    .bg {
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: rgba(0,0,0,.3);
    }
  </style>
</head>
<body>
<div class="header"><a href="javascript:;" id="link">点击弹出登录框</a></div>
<div class="login">
  <div class="login-title">登录会员
  </div><span><a href="javascript:;" class="close">关闭</a></span>
  <div class="login-content">
    <div class="login-input">
      <label>用户名:</label>
      <input type="text" placeholder="请输入用户名" name="username" class="username">
    </div>
    <div class="login-input">
      <label>登录密码:</label>
      <input type="password" placeholder="请输入用户密码" name="password" class="password">
    </div>
    <div class="loginbtn"><a href="javascript:;">登录会员</a></div>
  </div>
</div>
<!--  遮盖层-->
<div class="bg"></div>
<script>
  var login = document.querySelector('.login');
  var header = document.querySelector('.header');
  var close = document.querySelector('.close');
  var bg = document.querySelector('.bg');
  var title = document.querySelector('.login-title');
  header.addEventListener('click',function (){
    login.style.display = 'block';
    bg.style.display = 'block';
  })
  close.addEventListener('click',function (){
    login.style.display = 'none';
    bg.style.display = 'none';
  })
  //拖拽
  //鼠标按下，获得鼠标在盒子内的坐标
  title.addEventListener('mousedown',function (e){
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    //鼠标移动时，用鼠标在页面中的坐标减去鼠标在盒子中的坐标，就是模态框的left和top;
    document.addEventListener('mousemove',fn);
    function fn (e){
      login.style.left = e.pageX - x + 'px';
      login.style.top = e.pageY - y + 'px';
    };
    //鼠标弹起，移除鼠标移动事件
    document.addEventListener('mouseup',function (){
      document.removeEventListener('mousemove',fn);
    })
  })
</script>
</body>

京东放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #img1 {
      width: 200px;
      height: 100px;
      padding-top: 50px;
    }
    #img2 {
      width: 300px;
      height: 300px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .img {
      text-align: center;
      position: relative;
      width: 400px;
      height: 200px;
      border: #cccccc solid 1px;
      left: 30%;
    }
    .mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 50px;
      background-color: #FEDE4F;
      opacity: .5;
      border: solid 1px #ccc;
      cursor: move;
    }
    .big  {
      display: none;
      width: 400px;
      height: 400px;
      position: absolute;
      left: 410px;
      top: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div class="img">
  <img src="../../../jpgs/01.jpg" alt="" id="img1">
  <div class="mask"></div>
  <div class="big">
    <img src="../../../jpgs/01.jpg" alt="" id="img2">
  </div>
</div>

<script>
  var div = document.querySelector('.img');
  var mask = document.querySelector('.mask');
  var big = document.querySelector('.big');
  //当鼠标经过div就显示或隐藏大盒子和遮挡层
  div.addEventListener('mouseover',function (){
    mask.style.display = 'block';
    big.style.display = 'block';
  })
  div.addEventListener('mouseout',function (){
    mask.style.display = 'none';
    big.style.display = 'none';
  })
  //遮盖层跟随移动
  div.addEventListener('mousemove',function (e){
      //鼠标在盒子里的坐标
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      //遮挡层移动的位置
      var maskx = x - mask.offsetWidth / 2;
      var masky = y - mask.offsetHeight / 2;
      //遮挡层最大移动距离
      var maskX = div.offsetWidth - mask.offsetWidth;
      var maskY = div.offsetHeight - mask.offsetHeight;
      //遮挡层不能移出div盒子
      if (maskx <= 0){
          maskx = 0;
      }else if (maskx > maskX){
          maskx = maskX;
      };
      if (masky <= 0){
          masky = 0;
      }else if (masky > maskY){
          masky = maskY;
      }

      mask.style.left =maskx + 'px';
      mask.style.top = masky + 'px';
      //大图移动距离 = 遮挡层移动距离 * 大图最大移动距离 / 遮挡层最大移动距离
      var bigimg = document.querySelector('#img2');
      //大图最大移动距离
      var bigX = bigimg.offsetWidth - big.offsetWidth;
      //大图移动距离X
      var bigmax = maskx * bigX / maskX;
      //大图移动距离Y
      var bigmay = masky * bigX / maskX;
      bigimg.style.left = -bigmax + 'px';
      bigmay.style.top = -bigmay + 'px';
  })
</script>
</body>
</html>

元素可视区client

立即执行函数

<script>
    //立即执行函数：不需要调用，立马能够自己执行
    //主要作用：创建一个独立的作用域
    //写法
    //(function(){})(); 或者 (function (){}());
    (function (a,b){
        console.log(a + b);
    })(1,2);//第二个小括号可以看做是调用函数
    (function (a,b){
        console.log(a + b);
    }(2,3));
</script>

pageshow事件

元素滚动scroll

案例固定侧边栏

<body>
<div class="slider">
    <span class="goback">返回顶部</span>
</div>
<div class="header">头部区域</div>
<div class="banner">banner区域</div>
<div class="main">主体部分</div>
<script>
    var slider = document.querySelector('.slider');
    var goback = document.querySelector('.goback');
    var banner = document.querySelector('.banner');
    var main = document.querySelector('.main');
    //banner.offsetTop是被卷去头部的大小
    var bannertop = banner.offsetTop;
    //侧边栏固定定位之后的位置
    var slidertop = slider.offsetTop - bannertop;
    //主体部分的距离
    var maintop = main.offsetTop;
    //页面滚动事件
    document.addEventListener('scroll',function (){
    //页面被卷去头部 window.pageYOffset
    //     console.log(window.pageYOffset)
        if (window.pageYOffset >= bannertop){
            slider.style.position = 'fixed'
            slider.style.top = slidertop + 'px';
        }else{
            slider.style.position = 'absolute'
            slider.style.top = bannertop + 'px';
        }
        if (window.pageYOffset >= maintop){
            goback.style.display = 'block';
        }else{
            goback.style.display = 'none';
        }
    })
</script>
</body>

offset 、client 、 scroll总结

mouseenter和mouseover的区别

简单动画函数封装

//简单动画封装函数封装obj目标对象 target目标位置
    function animate(obj,target,callback){
      //当不断点击按钮，元素速度越来越快，因为开启了多个定时器
      // 解决方案：让元素只有一个定时器执行 先清除之前的定时器，只保留当前的一个定时器执行
      clearInterval(obj.timer);
      //给不同元素指定不同定时器
      obj.timer = setInterval(function (){
        //步长值：
        //把步长值改完整数
        //var step =Math.ceil((target - obj.offsetLeft) / 10);
          var step = (target - obj.offsetLeft)/10;
          step = step  > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target){
          //停止动画
          clearInterval(obj.timer);
          //回调函数
            if (callback){
                callback();
            }
        }
        //缓动动画 把每次+1这个步长值慢慢变小 步长公式：（目标值 - 现在的位置）/10
        obj.style.left = obj.offsetLeft + step + 'px';
      },100)
    }

轮播图案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="move.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        ul li {
            list-style-type: none;
        }
        img {
            width: 400px;
            height: 300px;
        }
        .main{
            width: 400px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -225px;
            margin-top: -175px;
            background-color: black;
            overflow: hidden;
        }
        ul{
            position: absolute;
            top: 0;
            left: 0;
            width: 400%;
        }
        ul li{
            float: left;
        }
        .left-arrow {
            position: absolute;
            font-size: 32px;
            color: black;
            top: 50%;
            background: rgba(0,0,0,.3);
            display: none;
            z-index: 9999;
        }
        .right-arrow {
            position: absolute;
            font-size: 32px;
            color: black;
            top: 50%;
            right: 0;
            background: rgba(0,0,0,.3);
            display: none;
            z-index: 9999;
        }
        .circle {
            position: absolute;
            bottom: 0px;
            left: 50px;
        }
      .circle li{
          list-style-type: none;
          float: left;
          width: 8px;
          height: 8px;
          border: 2px solid rgba(255,255,255,0.5);
          margin: 0 3px;
          border-radius: 50%;
          cursor: pointer;
      }
      .current{
          background: white;
      }
    </style>
</head>
<body>
  <div class="main">
      <div class="left">
          <a href="javascript:;" class="left-arrow">&lt</a>
      </div>
      <div class="right">
          <a href="javascript:;" class="right-arrow">&gt</a>
      </div>
      <ul>
          <li><img src="../../../jpgs/01.jpg" alt=""></li>
          <li><img src="../../../jpgs/02.jpg" alt=""></li>
          <li><img src="../../../jpgs/03.jpg" alt=""></li>
      </ul>
      <ol class="circle">
<!--          <li></li>-->
<!--          <li class="current"></li>-->
<!--          <li></li>-->
      </ol>
  </div>

  <script>
      window.addEventListener('load',function () {
          var btnl = document.querySelector('.left-arrow');
          var btnr = document.querySelector('.right-arrow');
          var div = document.querySelector('.main');
          var divWidth = div.offsetWidth;
          //鼠标经过图片显示与隐藏按钮
          div.addEventListener('mouseenter',function (){
              btnl.style.display = 'block';
              btnr.style.display = 'block';
              //鼠标经过停止定时器
              clearInterval(timer);
              timer = null;//清除定时器变量
          });
          div.addEventListener('mouseleave',function () {
              btnl.style.display = 'none';
              btnr.style.display = 'none';
              //鼠标离开开始定时器
              timer = setInterval(function (){
                  //手动调用点击事件
                  btnr.click();
              },2000)
          })
          //动态生成小圆圈
          var ul = div.querySelector('ul');
          var ol = div.querySelector('.circle');
          for (var i = 0; i < ul.children.length; i++){
              //创建一个li
              var li = document.createElement('li');
              //通过自定义属性记录当前小圆圈的索引号
              li.setAttribute('index',i);
              //把li插入ol
              ol.appendChild(li);
              //小圆圈排他思想 顺便在生成小圆圈的同时绑定点击事件
              li.addEventListener('click',function () {
                  //清除所有li的current类名
                  for (var i = 0; i < ol.children.length; i++){
                      ol.children[i].className = '';
                  }
                  //当前li设置current类名
                  this.className = 'current';
                  //点击小圆圈，移动图片，移动的是ul
                  //ul的移动距离就是小圆圈的索引号*图片宽度
                  //点击某个小圆圈就得到当前的索引号index
                  var index = this.getAttribute('index');
                  //当点击了小圆圈，就把索引号给num
                  num = index;
                  //当点击了小圆圈，就把索引号给move
                  move = index;
                  animate(ul,-index * divWidth);
              })
          }
          //设置ol里的第一个li的类名为 current
          ol.children[0].className = 'current';
          //克隆第一张图片，放到ul最后
          var firstli = ul.children[0].cloneNode(true);
          ul.appendChild(firstli);

          //点击右侧按钮，图片滚动一张
          var num = 0;
          //move控制小圆圈的播放
          var move = 0;
          //节流阀
          var flag = true;
          btnr.addEventListener('click',function () {
              if (flag) {
                  flag = false;//关闭节流阀
                  //如果走到最后一张，ul快速复原 left改为0
                  if (num == ul.children.length - 1){
                      ul.style.left = 0;
                      num = 0;
                  }
                  num++;
                  animate(ul,-num * divWidth,function() {
                      flag = true;//打开节流阀
                  });
                  //点击一次按钮，小圆圈发生变化
                  move++;
                  //如果move == 3，说明走到了最后克隆的那张图片,复原
                  if (move == ol.children.length){
                      move = 0;
                  }
                  clearmove();
              }
          });


          //左按钮
          btnl.addEventListener('click',function () {
             if (flag){
                 flag = false;
                 //如果走到第一张
                 if (num == 0){
                     num = ul.children.length - 1;
                     ul.style.left = - num * divWidth + 'px';
                 }
                 num--;
                 animate(ul,-num * divWidth,function () {
                     flag = true;
                 });
                 //点击一次按钮，小圆圈发生变化
                 move--;
                 //如果move < 0，说明第一张图片，小圆圈要改为最后一个
                 if (move < 0){
                     move = ol.children.length - 1;
                 }
                 clearmove();
             }
          });
          function clearmove(){
              //清除小圆圈的类名
              for (var i = 0; i < ol.children.length; i++){
                  ol.children[i].className = '';
              }
              //留下当前小圆圈的类名
              ol.children[move].className = 'current';
          }

          //自动播放
          var timer = setInterval(function (){
              //手动调用点击事件
              btnr.click();
          },2000)
      })
  </script>
</body>
</html>

筋斗云案例

<script>
  var cloud = document.querySelector('.cloud');
  var father = document.querySelector('.father');
  var lis = father.querySelectorAll('li');
  //给li绑定事件
  for (var i = 0;i < lis.length;i++){
    //current作为起始位置
    var current = 0;
    //鼠标经过把当前小li的位置作为目标值
    lis[i].addEventListener('mouseenter',function () {
      animate(cloud,this.offsetLeft);
    })
    //鼠标离开位置复原为起始位置
    lis[i].addEventListener('mouseleave',function () {
      animate(cloud,current);
    })
    //鼠标点击，把当前位置作为目标值
    lis[i].addEventListener('mousedown',function () {
      current = this.offsetLeft;
    })
  }
</script>

移动端特效

touch触屏事件

touchEvent触摸事件对象

其他文章

梦

CSGO核心系统分析

23/03/20
15:56

梦

开始投简历辣！

23/03/19
15:06

js复习

旺财

JavaScript

常用方法及属性

math

数组

窗口

history

document

DOM

鼠标

键盘

表单

编辑

内置对象

倒计时案例

数组

添加与删除

排序

数组索引

数组去重

字符出现的位置及次数

根据位置返回字符串

统计出现次数最多的字符和次数

字符串操作

获取元素

鼠标事件

显示当前系统时间

改变元素内容

显示与隐藏密码

修改样式属性

精灵图

显示隐藏文本框

操作元素

排他思想

全选反选

自定义属性操作

获取元素属性值

tab栏切换布局

H5属性

节点操作

下拉菜单

父子节点

兄弟节点

发布与删除留言

复制节点

遍历对象

动态创建与删除表格

三种动态创建元素区别

dom树

DOM重点核心

注册事件

注册事件兼容性解决方案

删除事件

DOM事件流

事件对象常见的属性和方法

返回触发事件的对象

阻止默认行为

阻止事件冒泡

事件委托

常见鼠标事件

鼠标事件对象

mousemove

键盘事件

键盘事件对象

模拟京东按键输入框

BOM

window对象常见事件

倒计时案例

发送短信案例

JS执行机制

同步和异步

异步

location对象属性

5秒后自动返回首页案例

获取URL参数

location对象方法

navigator对象

history对象

history对象方法