欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年07月04日 07:38:35   作者：阿旋要畢業(yè)~  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東快遞單號(hào)查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

2.案例分析

3.代碼實(shí)現(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>模擬京東快遞單號(hào)查詢</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;/* 三個(gè)值分別是 上：左右：下*/
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class = "search">
? ? ? ? <div class="con">123</div>
? ? ? ? <input type="text" placeholder="請(qǐng)輸入您的快遞單號(hào)" 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';
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? })
? ? ? ? // 失去焦點(diǎn)，隱藏盒子。
? ? ? ? input.addEventListener('blur', function() {
? ? ? ? ? ? if(this.value != '') {
? ? ? ? ? ? ? ? con.style.display = 'none';
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? // 有焦點(diǎn)時(shí)，出現(xiàn)盒子。
? ? ? ? input.addEventListener('focus', function(){
? ? ? ? ? ? if(this.value != '') {
? ? ? ? ? ? ? ? con.style.display = 'block';
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>

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

相關(guān)文章

最新評(píng)論