焦点案例+简单开关灯案例

最新推荐文章于 2024-11-05 22:07:06 发布

芜湖芜湖

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量62

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/tonysxiaobao/article/details/126457122

版权

1、焦点案例

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style>
    input {
        color: blue
    }
</style>
<head>
</head>
<body>
    <input type="text" value="手机">
</body>
<script>
    var text = document.querySelector('input');
    text.onfocus = function () {
        console.log('得到了焦点');
        if(text.value==='手机'){
            this.value='';
        }else{

        }
        this.style.color = '#333'
    }
    text.onblur = function () {
        console.log('失去了焦点');
    if(this.value ===''){
        this.value='手机';
    }}
   
</script>

</html>

2、简单开关灯案例

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<style type="text/css">

    /* .open {
        background: #fff;
    }

    .close {
        background: #000;
    } */
</style>

<head>
</head>

<body>
   <button id="btn">关灯</button>
    <script>
        var btn = document.getElementById("btn");
        var flag = false;
        btn.onclick = function () {
            flag = !flag;
            if (flag) {
                btn.innerText = "开灯";
                // document.body.className = "close";
                document.body.style.backgroundColor = "black";
            }else{
                btn.innerText = "关灯";
                // document.body.className = "open";
                document.body.style.backgroundColor  = "white";
            }
        }
    </script>
</body>

</html>