前端基础进阶-JavaScript核心 DOM BOM操作-第一天课后作业

weixin_48132252

于 2020-12-28 20:13:49 发布

阅读量879

点赞数 12

分类专栏： Pink老师前端网课相关内容文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48132252/article/details/111869460

版权

第一天

世纪佳缘用户名显示隐藏内容
京东关闭广告（直接隐藏即可）
- 功能描述
- 代码实现
新浪下拉菜单（微博即可）
开关灯案例

世纪佳缘用户名显示隐藏内容

功能描述

表单框默认内容为“邮箱/ID/手机号”；颜色较浅。
鼠标放到表单框时，内容清空，边框颜色变为粉色。输入内容颜色较深。
鼠标离开，如果输入有内容则保留原有输入内容；没有输入内容则改回默认内容。颜色较浅。

代码实现

<!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>
        input {
   
            color: #999;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <input type="text" value="邮箱/ID/手机号">
    <script>
        var ipt = document.querySelector('input')
        ipt.onfocus = function() {
   
            if (this.value === '邮箱/ID/手机号') {
   
                this.value = '';

            }
            this.style.color = '#333';
            this.style.borderColor = 'pink'
            this.style

最低0.47元/天解锁文章

weixin_48132252

关注

12
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
前端基础进阶-JavaScript核心 DOM BOM操作-第一天课后作业

第一天世纪佳缘用户名显示隐藏内容功能描述代码实现注意事项京东关闭广告（直接隐藏即可）功能描述代码实现新浪下拉菜单（微博即可）功能描述代码实现注意事项开关灯案例功能描述代码实现注意事项世纪佳缘用户名显示隐藏内容功能描述表单框默认内容为“邮箱/ID/手机号”；颜色较浅。鼠标放到表单框时，内容清空，边框颜色变为粉色。输入内容颜色较深。鼠标离开，如果输入有内容则保留原有输入内容；没有输入内容则改回默认内容。颜色较浅。代码实现<!DOCTYPE html><html la
复制链接

扫一扫