JavaScript網頁制作--京東快遞單號查詢

JavaScript網頁制作–京東快遞單號查詢

在這里插入圖片描述

上篇講到了京東網頁的一個可能不被大多數人熟知的小功能，S鍵自動獲得焦點，相比于那個功能，這個快遞單號查詢的功能可能更明了一點，雖然我也覺得很雞肋。在網頁搜索京東快遞單號查詢后，會出現這樣的一個功能，當你在快遞單號欄輸入快遞單號的時候，上方會出現一個較大的文本框，用較大的字體顯示出你輸入的快遞單號。（雖然我覺得字號也沒有差很多）

功能實現：

在輸入快遞單號的時候，上方出現一個盒子，這個盒子的字號更大。
表單檢測用戶輸入，添加鍵盤事件。
將輸入框快遞單號的值獲取給上方的盒子的innerText。
快遞單號里面的value值為空時隱藏上方的盒子。

在這里插入圖片描述

在沒有輸入的情況下，只顯示input框

在這里插入圖片描述

在輸入快遞單號的時候，input框上方出現一個盒子，同步輸入的快遞單號。

程序實現：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京東快遞單號查詢</title>
    <style>
        div {
            width: 170px;
            height: 30px;
            border: 1px solid black;
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div style="display: none;"></div>
    <input type="text">
    <button >查詢</button>
    <script>
        var input = document.querySelector('input');
        var div = document.querySelector('div');
		//當input框獲得焦點時
        input.addEventListener('focus',function(){
            //如果input框中的內容不為空
            if(input.value != ''){
                //顯示div盒子
                div.style.display = 'block';
            }
            
            input.addEventListener('keyup',function(){
                //如果div內容為空 隱藏div
                if(input.value ===''){
                div.style.display = 'none';
                }else{
                    //div內容不為空  顯示div
                div.style.display = 'block';
                    //將input中的值賦給div
                div.innerText = input.value;
                }
            })
       })
       //當input框失去焦點時隱藏div
		input.addEventListener('blur',function(){
            div.style.display = 'none';
        })
    </script>
</body>
</html>

在程序監聽事件中不使用keydown / keypress的原因：

? keydown / keypress在按下鍵盤時觸發，此時input框中沒有內容，按下后有了內容，但是并沒有再次觸發，而此時div盒子并不會彈出來，在下一次鍵盤按下時會彈出div盒子，盒子中會顯示第一次輸入的數字。因此在使用keydown / keypress時會出現數據不同步的現象。

本文鏈接：https://blog.csdn.net/weixin_42579348/article/details/110288686

智能推薦

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...