10-JavaScript 点击事件随机点名器

合集 - web前端(29)

1.1-web前端基础标签、图片、超链接2023-09-19 2.2-web前端音频、视频、表格、表单2023-09-19 3.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-19 4.5-web前端定位position2023-09-19 5.6-web前端的特效平面转换transfrom2023-09-19 6.7-web前端空间转换，3D效果2023-09-19 7.8-web前端动画案例2023-09-19 8.9-web前端 flex弹性布局2023-09-19

9.10-JavaScript 点击事件随机点名器2023-09-20

10.11-JavaScript 逻辑条件，if判断，while循环，算数运算相关的案例演示2023-09-23 11.12-web前端轮播图案例（小米商城）2023-09-27 12.css字体样式2023-10-08 13.css样式对单行和多行文本的隐藏2023-10-10 14.css伪类和伪元素2023-10-12 15.web前端html+css页面内容的六种隐藏方式2023-10-16 16.JavaScript的基础语法和数据类型2023-10-26 17.JavaScript 数组Array存储方式及对象Object2023-10-27 18.JavaScript数据类型的转换2023-10-30 19.JavaScript运算符及优先级2023-10-31 20.JavaScript条件判断if 语句2023-11-01 21.JavaScript for循环控制语句2023-11-02 22.JavaScript 其他循环语句和跳转语句2023-11-03 23.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-04 24.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-04 25.JavaScript Array对象（属性、方法）留言板案例2023-11-04 26.JavaScript string对象（属性，方法）获取图片后缀案例输入和输出结果转换形式案例2023-11-07 27.JavaScript Date对象、日期求差案例、购物秒杀倒计时、日历2023-11-13 28.JavaScript事件 2023-11-18 29.JavaScript BOM对象2023-11-18

web前端JavaScript交互 ------ 点击事件

意义：

JavaScript中的点击事件是指当用户在页面上点击某个元素时触发的事件。这个事件可以用于执行各种操作，如改变元素的样式、修改页面内容等。这是Web应用程序中最常用

的交互方式之一，允许用户与网页进行交互，提高用户体验。

案例：随机点名器

知识点：

html：页面的内容的框架及渲染

css：页面色彩布局的修饰

JavaScript：获取随机数组、定时器、if条件判断、点击事件函数

代码部分所示：

    <style>
        *{
            box-sizing: border-box;
        }
       
        .box .centent span{
            font-size: 30px;
            color: blue;
        }
        button{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 180px;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid red;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
        }
    </style>

<body>
    <div class="box">
        <div class="centent"><span>随机点名</span></div>
        <button>开始</button>
    </div>
    <script>
        //1.设置一个数组names
        let names = ["科比·布莱恩特","蒂姆·邓肯","凯文·加内特","鲁迪·汤姆贾诺维奇","塔米卡·凯金斯","埃迪·萨顿","金·穆基","芭芭拉·史蒂文斯","帕特里克·鲍曼","悉尼·蒙克里夫","杰克·希克玛","特蕾莎·威"]
        //2.找button
      
        //3.找centent
 
        let flag = true
        let timer = null //全局变量
        //4设置点击事件
     
            //9.设置开始暂停
            if (flag) {
               
                //7.设置定时器
              
                    //5.定义内容，生成随机
                 
                    //6.内容捕获 index 随机
                    
             
            } else {
                //8.设置停止计时器
            
            }
        })
    </script>
</body>