js获取快递单号小练习

目录

1、css代码

2、html代码

3、js代码

完整代码

效果图


1、css代码

 .box{
            width: 400px;
            height: 300px;
            margin: 100px auto;
            position: relative;
        }
        input{
            width: 250px;
            height: 40px;
            outline: none;
        }
        span{
            display: block;
            position: absolute;
            min-width: 270px;
            max-width: 400px;
            /* width: 270px;
            height: 40px; */
           border: 1px solid red;
           top: -50px;
           word-wrap: break-word;
           margin-bottom: 20px;
           /* display: none; */
           opacity: 0;
           font-size: 18px;
           line-height: 20px;
        }

2、html代码

<div class="box">
        <span></span>
        <input type="text" placeholder="请输入您的快递单号">
    </div>

3、js代码

 <script>
        // 需求:获取焦点出现框,并内容实时与input同步
        const ipt=document.querySelector('input')
        const span=document.querySelector('span')
        //获取焦点,显示span
        ipt.addEventListener('focus',function() {
            
            // span.style.display='block'
       

          if(ipt.value.trim()===''){
            span.style.opacity=0
          }else{
            span.style.opacity=1
          }
            
         
        })
        //span的内容等于input框内容
        ipt.addEventListener('input',function() {
       
           
            if(ipt.value.trim() ===''){
                span.style.opacity=0
            }else{
                span.innerHTML=ipt.value
                span.style.opacity=1
            }
           
        })
        //失去焦点,隐藏span
        ipt.addEventListener('blur',function(){
            // span.style.display='none'
            span.style.opacity=0

        })
    </script>

完整代码

<!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>
        .box{
            width: 400px;
            height: 300px;
            margin: 100px auto;
            position: relative;
        }
        input{
            width: 250px;
            height: 40px;
            outline: none;
        }
        span{
            display: block;
            position: absolute;
            min-width: 270px;
            max-width: 400px;
            /* width: 270px;
            height: 40px; */
           border: 1px solid red;
           top: -50px;
           word-wrap: break-word;
           margin-bottom: 20px;
           /* display: none; */
           opacity: 0;
           font-size: 18px;
           line-height: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span></span>
        <input type="text" placeholder="请输入您的快递单号">
    </div>


    <script>
        // 需求:获取焦点出现框,并内容实时与input同步
        const ipt=document.querySelector('input')
        const span=document.querySelector('span')
        //获取焦点,显示span
        ipt.addEventListener('focus',function() {
            
            // span.style.display='block'
       

          if(ipt.value.trim()===''){
            span.style.opacity=0
          }else{
            span.style.opacity=1
          }
            
         
        })
        //span的内容等于input框内容
        ipt.addEventListener('input',function() {
       
           
            if(ipt.value.trim() ===''){
                span.style.opacity=0
            }else{
                span.innerHTML=ipt.value
                span.style.opacity=1
            }
           
        })
        //失去焦点,隐藏span
        ipt.addEventListener('blur',function(){
            // span.style.display='none'
            span.style.opacity=0

        })
    </script>
</body>
</html>

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/228800.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot集成Spring Security+jwt+kaptcha验证(简单实现,可根据实际修改逻辑)

参考文章 【全网最细致】SpringBoot整合Spring Security JWT实现用户认证 需求 结合jwt实现登录功能&#xff0c;采用自带/login接口实现权限控制 熟悉下SpringSecurity SpringSecurity 采用的是责任链的设计模式&#xff0c;是一堆过滤器链的组合&#xff0c;它有一条很…

Centos7部署Graylog5.2日志系统

Graylog5.2部署 Graylog 5.2适配MongoDB 5.x~6.x&#xff0c;MongoDB5.0要求CPU支持AVX指令集。 主机说明localhost部署Graylog&#xff0c;需要安装mongodb-org-6.0、 Elasticsearch7.10.2 参考&#xff1a; https://blog.csdn.net/qixiaolinlin/article/details/129966703 …

基于Python+WaveNet+MFCC+Tensorflow智能方言分类—深度学习算法应用(含全部工程源码)(一)

目录 前言引言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境Jupyter Notebook环境Pycharm 环境 相关其它博客工程源代码下载其它资料下载 前言 博主前段时间发布了一篇有关方言识别和分类模型训练的博客&#xff0c;在读者的反馈中发现许多小伙伴对方言…

外贸辅助工具定制的价格范围,别被坑了哟!

随着全球化的不断发展&#xff0c;外贸已成为企业不可或缺的一部分。然而&#xff0c;在外贸过程中&#xff0c;企业往往会遇到各种问题&#xff0c;如语言障碍、文化差异、法规繁琐等&#xff0c;为了解决这些问题&#xff0c;许多企业选择定制外贸辅助工具。 但是&#xff0…

高德地图vue实现自定义标点热力图效果(缩放时展示不同数据)

高德地图插件引入省略。。。样式和vue基础组件省略。。。 如果每个标点没有数值&#xff0c;则可以用点聚合来实现功能下面例子&#xff0c;每个标点会有按市统计的数值&#xff0c;而且缩放一定程度时&#xff0c;需要展示按省统计的标点&#xff0c;因此需要自定义标点样式和…

多相Buck的工作原理

什么是多相Buck电源&#xff1f; 多相电源控制器是一种通过同时控制多个电源相位的设备&#xff0c;以提供稳定的电力供应。相位是指电源中的电流和电压波形。多相控制器的设计旨在最大程度地减小电力转换系统的纹波&#xff0c;并提高整体能效。它通常包含一系列的功率级联&a…

python六子棋ai对战(alpha-beta)剪枝算法

核心代码 def __init__(self): #初始化函数self.num0 #对yi次数self.rows 10 #初始化棋盘10行self.cols 10 # 初始化棋盘10列self.rank6 #阶数 代表六子棋self.empty_board() #清空棋盘self.V 10 #攻击程度self.E10 #防守程度self.depth2 #思考深度…

spring 的概述和入门

​ 我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; …

cmake生成表达式

不积小流&#xff0c;无以成江海 <CONFIG:RELEASE> config这个关键字&#xff0c;主要是看CMAKE_BUILD_TYPE这个变量的值是不是和冒号后的一样&#xff0c;一样的话就返回true, 否则就是false. cmake_minimum_required(VERSION 3.10) project(Test) set(CMAKE_CXX_STA…

JVM的内存结构详解「重点篇」

一、JVM虚拟机数据区 虚拟机栈 1、 线程私有 2、 每个方法被执行的时候都会创建一个栈帧用于存储局部变量表&#xff0c;操作栈&#xff0c;动态链接&#xff0c;方法出口等信息。每一个方法被调用的过程就对应一个栈帧在虚拟机栈中从入栈到出栈的过程。 3、栈帧: 是用来存储…

HarmonyOS应用开发工具DevEco Studio安装与使用

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 知识库内容逐步完善中… 工欲善其事必先利其器&#xff0c;要编写HarmonyOS应用就需要用到官方提供的IDE工具来编写相应的代码。 在鸿蒙开发者官网&#xff0c;其提供了官方的开…

关于什么是 JVM

关于什么是 JVM&#xff0c;看看普通⼈和⾼⼿的回答。 普通人 JVM 就是 Java 虚拟机&#xff0c;是⽤来运⾏我们平时所写的 Java 代码的。优点是它会 ⾃动进⾏内存管理和垃圾回收&#xff0c;缺点是⼀旦发⽣问题&#xff0c;要是不了解 JVM 的运⾏ 机制&#xff0c; 就很难…

企业能用ov多域名https证书

多域名https证书是https数字证书中灵活性较高的一款产品。各个正规CA认证机构旗下的多域名https证书都有同时保护多个域名站点的功能&#xff0c;但是和其它域名https证书不一样的是多域名https证书保护的域名类型比较广。多域名https证书可以保护多个主域名和子域名站点&#…

贪吃的猴子 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 一只贪吃的猴子&#xff0c;来到一个果园&#xff0c;发现许多串香蕉排成一行&#xff0c;每串香蕉上有若干根香蕉。每串香蕉的根数由数组numbers给出。猴子获取香…

低多边形3D建模石头材质纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…

HarmonyOS4.0从零开始的开发教程09页签切换

HarmonyOS&#xff08;七&#xff09;页签切换 List组件和Grid组件的使用 Tabs组件的使用 概述 在我们常用的应用中&#xff0c;经常会有视图内容切换的场景&#xff0c;来展示更加丰富的内容。比如下面这个页面&#xff0c;点击底部的页签的选项&#xff0c;可以实现“首页…

react Hooks实现原理

Fiber 上篇文章fiber简单理解记录了react fiber架构&#xff0c;Hooks是基于fiber链表来实现的。阅读以下内容时建议先了解react fiber。 jsx -> render function -> vdom -> fiber树 -> dom vdom 转 fiber 的过程称为 recocile。diff算法就是在recocile这个过程…

html中一个div中平均分三个盒子

html中一个div中平均分三个盒子 html中一个div中平均分三个盒子&#xff0c;大小自适应&#xff0c;随着界面的大小而改变大小 1、截图展示 2.代码部分 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta …

QT使用SQLite 超详细(增删改查、包括对大量数据快速存储和更新)

QTSQLite 在QT中使用sqlite数据库&#xff0c;有多种使用方法&#xff0c;在这里我只提供几种简单&#xff0c;代码简短的方法&#xff0c;包括一些特殊字符处理。在这里也给大家说明一下&#xff0c;如果你每次要存储的数据量很大&#xff0c;建议使用事务&#xff08;代码中…

老师的就业前景和发展

我常常被问到&#xff0c;“老师的就业前景和发展怎么样&#xff1f;”作为一名老师&#xff0c;我必须承认&#xff0c;教育行业的就业前景和发展并不是特别乐观。但是&#xff0c;这并不意味着没有机会&#xff0c;也不意味着我们不能为自己的未来做出规划。 教育行业的发展趋…