Web APIS 第二天

2022-07-04 20:00:21 阅读：134 来源： 互联网

标签：function Web checked APIS 第二天 let querySelector addEventListener document

事件监听

　　绑定事件 , 注册事件 , 事件监听

　　　　事件源 . addEventListener( '事件' , 事件处理函数 )

1. 随机点名案例

　　// 数据数组

let arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min
}

// 1.获取元素 两个按钮 + qs
let start = document.querySelector('.start');
let end = document.querySelector('.end');
let qs = document.querySelector('.qs');
//timer 要是全局变量
let timer = 0;
let random =0;

// 2. 给开始按钮注册事件
start.addEventListener('click',function () {
    //随机抽数据 --- 快速不断的抽取 间歇函数
    timer = setInterval(function () {
        random = getRandom(0,arr.length - 1);
　　　　　　//名字写入qs
        qs.innerHTML = arr[random]
    },100);

    //如果到了最后一个, 就禁用两个按钮
    if (arr.length === 1){
        start.disabled = true;
        end.disabled = true;
    }
})

// 3. 给结束按钮注册事件 本质是停止定时器
end.addEventListener('click',function () {
    clearInterval(timer);
    //删除数组元素
    arr.splice(random , 1);
})


2.小米搜索框案例

<script>
    let search = document.querySelector('input');
    let list = document.querySelector('.result-list');
    // 2. 事件监听 获得光标 focus
    search.addEventListener('focus',function () {
        //显示下拉菜单
        list.style.display = 'block';
        //文本框变色
        search.classList.add('search');
    })

    // 3. 失去光标事件 blur
    search.addEventListener('blur',function () {
        //隐藏下拉菜单
        list.style.display = 'none';
        //文本框变色
        search.classList.remove('search');
    })

</script>

3. 微博发布案例,

　　需求：用户输入文字，可以计算用户输入的字数　　

<script>
  // 1. 获取元素 文本域  count
  let area = document.querySelector('#area')
  let useCount = document.querySelector('.useCount')
  // 2. 绑定事件  用户输入事件 input
  area.addEventListener('input',function () {
    useCount.innerHTML = area.value.length;
  })
</script>

4. 全选, 反选案例

<script>
  // 1. 获取元素 全选 和 ck 小复选框
  let all = document.querySelector('#checkAll');
  let cks = document.querySelectorAll('.ck');
  let span = document.querySelector('.all')

  // 2. 事件监听  全选按钮
  all.addEventListener('click',function () {
    //all.checked true
    //我们需要做的就是把 all.checked给下面三个小按钮
    //因为三个按钮在伪数组里面,我们需要用遍历的方式,爱着取出来, 依次给值
    for (let i = 0 ; i < cks.length ; i++){
      cks[i].checked = all.checked;
    }
    if(all.checked){
      span.innerHTML = '取消';
    }else {
      span.innerHTML = '全选';
    }
  })

  for (let i = 0 ; i < cks.length ; i++){
    cks[i].addEventListener('click',function () {
      //只要点击任何一个小按钮, 都要遍历所有的小按钮
      for (let j = 0 ; j < cks.length ; j++){
        //都来看看是不是有人没有选中
        if (cks[j].checked === false){
          all.checked = false;
          span.innerHTML = '全选'
          return;
        }
      }
      //当我们循环结束, 如果代码走到这里说明 没有false
      all.checked = true;
      span.innerHTML = '取消'
    })
  }

</script>

5. 购物车加减

<script>
    // 1.获取元素
    let total = document.querySelector('#total');
    let add = document.querySelector('#add');
    let reduce = document.querySelector('#reduce');

    //2. 点击加号 事件侦听
    add.addEventListener('click',function () {
        total.value++;
        reduce.disabled = false;
    })

    reduce.addEventListener('click',function () {
        total.value--;
        if (total.value <= 1){
            reduce.disabled = true;
        }
    })
</script>

6. 综合案例 tab栏切换

<script>
  let lis = document.querySelectorAll('.tab .tab-item');
  let box = document.querySelectorAll('.main');
  for (let i = 0 ; i <= lis.length ; i++){
    lis[i].addEventListener('click',function () {
      //找到以前的active 类 移除掉
      document.querySelector('.tab .tab-item.active').classList.remove('active');
      // 当前元素添加
      this.classList.add('active');

      document.querySelector('.products .active').classList.remove('active');
      box[i].classList.add('active');
    })
  }
</script>

标签：function,Web,checked,APIS,第二天,let,querySelector,addEventListener,document
来源： https://www.cnblogs.com/LZYBOK/p/16439707.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Web APIS 第二天