黑马前端作业

abbyabley

已于 2022-02-25 13:46:04 修改

阅读量549

点赞数 1

文章标签：前端 javascript webview

于 2022-02-25 11:18:07 首次发布

本文链接：https://blog.csdn.net/weixin_43950953/article/details/123129007

版权

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
     .box input{
       width:250px;
       border:1px solid #595555;
       background-color: transparent;
       outline:none;
    }
  </style>
</head>
<body>
<div class="box">
  <input type="text" name="" id="" value="您的账号是">
</div>
<script>
  const ipt = document.querySelector('input');
  ipt.onfocus = function (){
    if(this.value=='您的账号是') {
      this.value = '';
    }
    this.style.color = '#333';//这个写上去好像没用，我不知道自己为啥要写这个
    this.style.borderColor = 'pink';//这句改变文本框边框的颜色
    this.style.outline = 'none';//这句加不加也不改变显示内容
  }
  ipt.onblur = function (){
    if(this.value == '') {
      this.value = '您的账号是';
    }
    this.style.borderColor = '#333';//用于失去焦点之后把文本框的颜色变回去
  }
</script>
</body>

仿京东关闭广告

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box {
      position: relative;
      width: 74px;
      height: 88px;
      border: 1px solid #ffffff;
      margin: 100px auto;
      font-size: 12px;
      color: red;
      display: block;
      text-align: center;
    }
    .box img{
      width: 60px;
      margin-top: 5px;
    }
    .close-btn{
      position: absolute;
      top: -1px;/*在盒子的顶部，top值增大的时候，该btn向下移动*/
      left: 2px;/*值增大像右边移动*/
      border: 1px solid #ccc;
      font-family: Arial,Helvetice,sans-serif;/*不知道为什么要这样写*/
      cursor: pointer;/*只有这句话才能让x可以按*/
    }
  </style>
</head>

<body>
<div>
<!--  <img src="../img/OIP-C.jpg" id="p2">-->
  <div class="box">
    <img src="../img/download.jpg">
    <i class="close-btn">×</i>
  </div>
  <script>
    var btn = document.querySelector('.close-btn');
    var box = document.querySelector('.box');//把box写到id里面了导致css无法改变box的属性以及无法关闭
    btn.onclick = function (){
        box.style.display = 'none';
    }
  </script>

</div>
</body>
</html>

仿微博下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box1{
      position: relative;
      width: 43px;
      height: auto;
      border: 1px solid #131212;
    }
    .box1 i{
      position: absolute;
      right: 1px;
      border: 1px solid #ccc;
      font-family: Arial,Helvetice,sans-serif;/*不知道为什么要这样写*/
      cursor: pointer;/*只有这句话才能让x可以按*/
    }
    .box2{
      position: relative;
      width: 43px;
      height: auto;
      border: 1px solid #131212;
      display: none;

    }
  </style>
</head>
<body>
<div class="box1">菜单
<i class="down">⬇</i>
</div>
<div class="box2">
  <span>1</span><br>
  <span>2</span>
</div>
<script>
  var down = document.querySelector('.down');
  var box = document.querySelector('.box2');
  down.onmouseover = function (){//鼠标经过停留的时候
    box.style.display = 'block';}
  down.onmouseout = function (){//鼠标移开的时候
    box.style.display = 'none';
    }
  // }
  // body.onmouseover = function (){
  //   box.style.display = 'none';
  // }
</script>
</body>
</html>

abbyabley

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
黑马前端作业

世纪佳缘用户名显示隐藏内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box input{ width:250px; border:1px solid #595555; background-color: trans
复制链接

扫一扫