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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

相关阅读:
创新案例｜实现YouTube超速增长的3大敏捷组织运营机制(上）
集合线程执行
记录使用IDEA时出现的小问题
基于C语言的泛类型循环队列
HOperatorSet.Connection 有内存泄漏或缓存
第八章相关内容
配置WampServer在局域网内通过内网IP访问（解决403 Forbidden问题）
Gartner最新报告：低代码应用开发平台在国内的发展
纯c语言版单链表（上）
go gtk3 pcman-key

原文地址：https://blog.csdn.net/weixin_46811890/article/details/133522033

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

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