• js基础API初学

    事件监听

    目标：能够给DOM元素添加事件监听
    ■ 什么是事件？
    事件是在编程时系统内发生的动作或者发生的事情
    比如用户在网页上单击一个按钮
    • 什么是事件监听？
    就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件
    比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

    元素对象.addEventListener（'事件类型'，要执行的函数'）
    • • 事件监听三要素：
    • > 事件源：那个dom元素被事件触发了，要获取dom元素
    • > 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
    • > 事件调用的函数：要做什么事

    1. <style>
    2. .boxl {
    3. position: absolute;
    4. right: 20px;
    5. top: 10px;
    6. width: 20px;
    7. height: 20px;
    8. background-color: H skyblue;
    9. text-align: center;
    10. line-height: 20px;
    11. font-size: 16px;
    12. cursor: pointer;
    13. } 
    14. style>
    15. <body>
    16. <div class="box">
    17. 我是广告
    18. <div class="boxl">Xdiv>
    19. div>
    20. <script>
    21. // 1.获取事件源
    22. const boxl = document.querySelector('.boxl')
    23. //关闭的是大盒子
    24. const box = document.querySelector('.box')
    25. // 2.事件侦听
    26. boxl.addEventListener('click', function () {
    27. box. style. display = 'none'
    28. })
    29. script>
    30. body>

    随机点名案例

    1. <style>
    2. *i margin: 0;
    3. padding: 0;
    4. text-align: center;
    5. }
    6. .box {
    7. width: 600px;
    8. margin: 50px auto;
    9. display: flex;
    10. font-size: 25px;
    11. line-height: 40px;
    12. }
    13. .qs {
    14. width: 450px;
    15. height: 40px;
    16. color: Ored;
    17. }
    18. .btns {
    19. text-align: center;
    20. }
    21. .btns button {
    22. width: 120px;
    23. height: 35px;
    24. margin: 0 50px;
    25. }
    26. style>
    27.  
    28. <body>
    29. <h2>随机点名h2>
    30. <div class="box">
    31. <span>名字是：span>
    32. <div class=“qs”>这里显示姓名div>
    33. div>
    34. <div class="btns">
    35. <button class="start">开始button>
    36. <button class="end">结束<button>
    37. div>
    38.  
    39. <script>
    40. //数据数组
    41. let timerId=0
    42. const random=0
    43. const arr = ['马超'，'黄忠'，'赵云'，'关羽'，'张飞']
    44. const qs = document.querySelector('.qs')
    45. //1.1获取开始按钮对象
    46. const start = document.querySelector('.start')//?????????
    47. //1.2添加点击事件
    48. start.addEventListener(* click', function () {
    49. timerld = setlnterval(function () {
    50. //随机数
    51. const random = parseInt(Math.random() * arr.length)
    52. //consoLe.Log(arr[random])
    53. qs.innerHTML = arr[random]
    54. }, 35) 
    55.  
    56. //如果数组里面只有一个值了,还需要抽取吗? 不需要 让两个按钮禁用就可以
    57. if (arr.length === 1) {
    58. // start.disabLed = true
    59. // end.disabLed = true
    60. start.disabled = end.disabled = true
    61. }
    62. })
    63. //2.关闭按钮模块
    64. const end = document.querySelector('.end')
    65. end.addEventListener('click', function () {
    66. clearInterval(timerld)
    67. //结束了,可以删除掉当前抽取的那个数组元素
    68. arr.splice(random, 1)
    69. console.log(arr)
    70. })
    71.  
    72.  
    73.  
    74. script>
    75. body>

    函数的垃圾回收机制

  • 相关阅读:
    【Nginx】负载均衡、动静分离理论篇
    从入门开始手把手搭建千万级Java算法测试-斐波那契额数列的三种实现方法比较
    lsf基础命令
    背靠TON公链的Notcoin游戏项目，能否杀出GameFi的红海？
    重生奇迹mu格斗怎么加点
    【考研数学】概率论与数理统计
    【通信原理】确知信号的性质分析与研究
    Java-回调函数
    使用eBPF加速阿里云服务网格ASM
    什么是JavaScript中的IIFE（Immediately Invoked Function Expression）？它的作用是什么？
  • 原文地址：https://blog.csdn.net/E___V___E/article/details/136407072