模擬京東快遞單號查詢案例

阿新 • • 發佈：2021-01-04

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style> 

    * {
        margin: 0;
        padding: 0;
    }

    .search {
        position: relative;
        width: 178px;
        margin: 100px;
    }

    .con {
        position: absolute;
        top: -40px;
        width: 171px;
        border: 1px solid rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba 
(0, 0, 0, .2);
        padding: 5px 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
        display: none;
    }

    .con::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 30px;
        left: 10px;
        border: 8px solid #000 
;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
    }
</style>

<body>
    <div class="search">
        <div class="con"></div>
        <input type="text" placeholder="請輸入快遞單號" class="jd">
    </div>
    <script>
        //快遞單號輸入時，上面的大號字型盒子(con)顯示(這裡面的字號更大)
        //表單檢測使用者輸入：給表單新增鍵盤事件
        //同時把快遞單號裡面的值(value) 獲取過來賦值給 con 盒子(innerText)作為內容
        //如果快遞單號裡面的內容為空，則隱藏大號字型盒子(con)盒子
        let search = document.querySelector('input')
        document.addEventListener('keyup', function (e) {
            console.log('up'+e.keyCode)
            if (e.keyCode === 83) {
                search.focus()
            }
        })
        let con=document.querySelector('.con')
        let jd_input=document.querySelector('.jd')
        jd_input.addEventListener('keyup', function (e) {
            console.log('輸入內容啦')
            if (this.value=='') {
                con.style.display='none'
            }else{
                con.style.display='block'
                con.innerText=this.value
            }
        })
        //當我們失去焦點，就隱藏這個con盒子
        jd_input.addEventListener('blur',function(){
            con.style.display='none'
        })
        //當我們獲得焦點，如果有內容就顯示這個con盒子
        jd_input.addEventListener('focus',function(){
            if(this.value!=''){
                con.style.display='block'
            }
        })
    </script>
</body>

</html>

在這裡插入圖片描述

模擬京東快遞單號查詢案例

技術標籤：效果案例javascriptjs <!DOCTYPE html> <html lang="en"> <head>

JS模擬實現京東快遞單號查詢

本文例項為大家分享了JS實現京東快遞單號查詢的具體程式碼，供大家參考，具體內容如下

JavaScript實現京東快遞單號查詢

JavaScript網頁製作–京東快遞單號查詢，供大家參考，具體內容如下上篇講到了京東網頁的一個可能不被大多數人熟知的小功能，S鍵自動獲得焦點，相比於那個功能，這個快遞單號查詢的功能可能更明瞭一點，雖然我也覺得

javascript實現京東快遞單號的查詢效果

案例：模擬京東快遞單號的查詢效果，供大家參考，具體內容如下要求：當我們在文字框中輸入內容時，文字框上面自動顯示大字號的內容

mpvue實現微信小程式快遞單號查詢程式碼

mpvue是什麼？ mpvue 是一套定位於開發小程式的前端開發框架，其核心目標是提高開發效率，增強開發體驗。使用該框架，開發者只需初步瞭解小程式開發規範、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開

澳洲飛躍快遞單號查詢快遞鳥API介面-澳洲飛躍

前言看完快遞鳥api澳洲飛躍對接教程這篇文章,把原始碼複製到專案上,就能快速完成介面對接，適合剛入門的菜鳥,呼叫快遞鳥的澳洲飛躍查詢API介面，能查詢到澳洲飛躍單號從收件、運輸，到轉運中心，派送到簽收等各個環

簡單的順豐快遞單號查詢API介面程式碼【快遞100API介面】

順豐目前提供了兩種對接方式：一種是開發者自助對接，需要註冊豐橋賬戶後，申請成為開發者，再根據順豐要求對接，整個流程較為繁瑣；還有一種方式就是通過第三方快遞單號查詢API介面服務商對接（例如快遞100API），

PHP快遞查詢介面api和快遞單號智慧判斷PHP程式碼-快遞100

如果電商企業想將業務提升到一個新的水平，則應考慮接入第三方快遞查詢API介面。快遞查詢API介面提供了很多好處，並且可以為電商企業、微商帶來強大的競爭優勢。因為相對於獨立一家家對接各個快遞公司的服務介面，

快遞單號識別API 快遞鳥介面

前言單號識別API介面，主要也是為了提供使用者使用體驗，減少客戶操作步驟，以及人工查錯，客戶提供快遞單號，即可實時返回可能的一個或多個快遞公司，存在多個快遞公司結果的，大資料平臺根據可能性、單號量，進行