JS_WebAPI基础练习：输入框控制、广告隐藏、下拉菜单与网页开关灯-CSDN博客

这篇博客整理了四个JavaScript基础练习，包括模拟世纪佳缘网的输入框内容显示和隐藏功能，京东广告的关闭，新浪下拉菜单的显示与隐藏，以及网页的开关灯效果。每个练习都包含了详细的操作描述，旨在加强JS操作DOM和事件处理的训练。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 - 输入框内容显示和隐藏（加强训练）

题目描述

仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：

1）输入框获得焦点，提示内容消失，边框变色

2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box input {
   
            outline: none;
        }
        
        .user,
        .pwd {
   
            color: #aeaead;
        }
        
        .btn {
   
            width: 70px;
            background-color: #0087be;
            border: none;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" id="" class="user" value="邮箱/ID/手机号">
        <input type="text" name="" id="" class="pwd" value="密码">
        <button class="btn">登录</button>
    </div>
    <script>
        // <!-- 仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
        // 1） 输入框获得焦点， 提示内容消失， 边框变色
        // 2） 输入框失去焦点， 如果内容为空， 提示内容恢复， 边框变色； 如果内容不为空， 只有边框变色 -->
        // 1.绑定事件先:user + pwd两个发生变化
        var user = document.querySelector('.user');
        var pwd = document.querySelector('.pwd');
        // 2.会发生的时间  注册事件 获得焦点
        user.onfocus = function() {
    //获得焦点事件
            if (this.value === '邮箱/ID/手机号') {
   
                this.value = '';
            }