DOM第一天作业--世纪佳缘登录框--pink老师

运行成果:

 

HTML代码块

 <div class="register">
      <input type="text" class='ipt' value="邮箱/ID/手机号">
      <input type="password" class='pwd' placeholder="密码">
      <button>登录</button>
 </div>

CSS样式

div {
    width: 600px;
    margin: 100px auto;
}

input {
    display: inline-block;
    box-sizing: border-box;
    color: #999;
    margin-right: 10px;
    outline: none;
    padding: 2px 0 2px 10px;
    height: 25px;
    width: 136px;   
    border: 1px solid #ccc;
 }

.change {
    outline-color: pink;
 }

button {
    background-color: #0098c2;
    color: white;
    border: none;
    height: 25px;
    width: 67px;
}

JavaScript 代码段

<script>
        var text = document.querySelector('.ipt');
        var pwd = document.querySelector('.pwd')
        text.onfocus = function () {
            if (this.value === '邮箱/ID/手机号') {
                this.value = '';
                this.className = 'change';
            }
            this.style.color = '#b5b2bd';
        }
        text.onblur = function () {
            if (this.value === '') {
                this.value = '邮箱/ID/手机号';
            }
        }
        pwd.onfocus = function () {
            if (this.placeholder === '密码') {
                this.text = 'text';
                this.placeholder = '';
                this.className = 'change';
            }
        }

        pwd.onblur = function () {
            if (this.placeholder === '') {
                this.placeholder = '密码';
                this.text = 'password';
                this.className = '';
            }
        }
 </script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值