js-Tabs小案例

最新推荐文章于 2024-07-18 03:25:49 发布

卑微菜鸟一枚

最新推荐文章于 2024-07-18 03:25:49 发布

阅读量256

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43509985/article/details/115445511

版权

案例1：开关灯

来源：微博网页版首页右上角

基本描述：

点击按钮，如果是白天就变成黑夜，如果是黑夜我就变成白天；

知识点

涉及两种状态,flag最合适，每次变化的时候，需要将flag变回来
掌握为元素添加类名去除某一类名的方法：节点.classList.add('类名') 节点.classList.remove('类名')
className = ('类名') 这是节点类名的覆盖！

分析

获取事件源；有哪些事件源
按钮；整个背景
注册事件：鼠标点击按钮
事件处理程序：黑变白，白变黒，按钮上面的文字以及颜色也变

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
   
            padding: 0;
            margin: 0;
        }
        
        .off {
   
            width: 100%;
            height: 100%;
            background-color: black;
        }
    </style>
</head>

<body>
    <button type="button">关灯</button>
</body>

<script>
    let flag = false; // false 表示不是黑天
    let btn = document.querySelector('button');
    let body = document.body; // 获取body 有专门的方法,当然使用documnet.querySelect('body');也是可以的

    btn.onclick = function() {
   
        if (!flag) {
    // 黑天 负负得正
            flag = true;
            btn.innerHTML = '开灯'

最低0.47元/天解锁文章

卑微菜鸟一枚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-Tabs小案例

案例1：开关灯来源：微博网页版首页右上角基本描述：点击按钮，如果是白天就变成黑夜，如果是黑夜我就变成白天；知识点涉及两种状态,flag最合适，每次变化的时候，需要将flag变回来掌握为元素添加类名去除某一类名的方法：节点.classList.add('类名') 节点.classList.remove('类名')className = ('类名') 这是节点类名的覆盖！分析获取事件源；有哪些事件源按钮；整个背景注册事件：鼠标点击按钮事件处理程序：黑变白，白变黒，按钮上面的文字以
复制链接

扫一扫

专栏目录