模拟京东快递单号查询 练习

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    .tip {
      position: relative;
      display: none;
      width: 170px;
      height: 25px;
      box-shadow: 0 2px 5px #999;
      /* box-shadow: h-shadow v-shadow blur spread color inset */
      /* h-shadow 是指阴影水平偏移量,正值,则阴影在对象右边;负值在左边;
         v-shadow 是指阴影的垂直偏移量,正值,阴影在对象底部;负值在顶部;
         blur 是指阴影模糊半径,只能为正值;如果为0,表示阴影不具有模糊效果;
         spread 是指阴影扩展半径,正值则整个阴影扩大,反之则缩小
         inset 设置从外层的阴影改变阴影内侧阴影;可选*/
    }

    .tip::before {
      /* .tip::before制作小三角样式,content默认为空*/
      content: '';
      width: 0;
      height: 0;
      position: absolute;
      top: 25px;
      margin-left: 20px;
      border: 7px solid transparent;
      border-top-color: #fff;
    }

    input {
      width: 160px;
      height: 20px;
      margin-top: 7px;
      color: #999;
      font-size: 10px;
    }
  style>
head>

<body>
  <div class="tip">
  div>
  <input type="text" placeholder="请输入快递单号:" class="jd" maxlength="18">
  
  <script>
    var tip = document.querySelector('.tip');
    var input = document.querySelector('.jd');
    input.addEventListener('keyup', function () {
      // keydown 和 keypress在文本框里的特点:键按下的瞬间触发,此时文字还未落到文本框中
      if (this.value == '') {
        tip.style.display = 'none';
      } else {
        tip.style.display = 'block';
        tip.innerText = this.value;
        this.style.color = '#000';
      }
    })
    input.addEventListener('blur', function () {  //输入框失去焦点时隐藏提示框tip
      tip.style.display = 'none';
    })
    input.addEventListener('focus', function () {
      if (this.value != '') {   //输入框获得焦点时判断是否为空,不为空则让提示框tip显示出来
        tip.style.display = 'block';
      }
    })
  script>
body>

html>

你可能感兴趣的:(笔记,javascript,前端)