js實現(xiàn)京東快遞單號查詢

更新時間：2022年07月04日 07:38:35 作者：阿旋要畢業(yè)~

這篇文章主要為大家詳細介紹了js實現(xiàn)京東快遞單號查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)京東快遞單號查詢的具體代碼，供大家參考，具體內(nèi)容如下

1.實現(xiàn)效果：

當文本框中輸入文字時，上面有一個放大文字的框中顯示文本框內(nèi)容。失去焦點時，放大文字的框消失，獲得焦點時，放大文字的框顯示。

2.案例分析

3.代碼實現(xiàn)

<!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>模擬京東快遞單號查詢</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? .search {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? width: 178px;
? ? ? ? ? ? margin: 100px;
? ? ? ? }
? ? ? ? .con {
? ? ? ? ? ? display: none;
? ? ? ? ? ? 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;
? ? ? ? }
? ? ? ? /* 小三角 ：偽元素*/
? ? ? ? .con::before {
? ? ? ? ? ? content: '';
? ? ? ? ? ? width: 0;
? ? ? ? ? ? height: 0;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 28px;
? ? ? ? ? ? left: 18px;
? ? ? ? ? ? border: 8px solid #000;
? ? ? ? ? ? border-style: solid dashed dashed;
? ? ? ? ? ? border-color: #fff transparent transparent;/* 三個值分別是 上：左右：下*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class = "search">
? ? ? ? <div class="con">123</div>
? ? ? ? <input type="text" placeholder="請輸入您的快遞單號" class = "jd">
? ? </div>
? ? <script>
? ? ? ? var con = document.querySelector('.con');
? ? ? ? var input = document.querySelector('.jd');
? ? ? ? input.addEventListener('keyup', function() {
? ? ? ? ? ? if(this.value == '') {
? ? ? ? ? ? ? ? con.style.display = 'none';
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? con.innerHTML = this.value;
? ? ? ? ? ? ? ? con.style.display = 'block';
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? })
? ? ? ? // 失去焦點，隱藏盒子。
? ? ? ? input.addEventListener('blur', function() {
? ? ? ? ? ? if(this.value != '') {
? ? ? ? ? ? ? ? con.style.display = 'none';
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? // 有焦點時，出現(xiàn)盒子。
? ? ? ? input.addEventListener('focus', function(){
? ? ? ? ? ? if(this.value != '') {
? ? ? ? ? ? ? ? con.style.display = 'block';
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: