<!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>
.center {
position: absolute;
left: 20%;
top: 20%;
transform: translate(0, 0);
}
.show {
font-size: 30px;
border: 2px solid rgb(209, 156, 156);
width: fit-content;
min-width: 170px;
margin-bottom: 10px;
}
.sanjiao {
position: absolute;
width: 0;
height: 0;
top: 35px;
left: -10px;
/* border: 10px solid black; */
border-top: 10px solid rgb(143, 111, 111);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
}
</style>
</head>
<body>
<div class="center">
<div class="show">
请输入您的快递单号
</div>
<div class="sanjiao"></div>
<input type="text" placeholder="请输入您的快递单号">
</div>
<script>
var input = document.querySelector('input');
var show = document.querySelector('.show');
var sanjiao = document.querySelector('.sanjiao');
input.addEventListener('keyup', function(e) {
if (input.value != '') {
show.style.display = 'block';
sanjiao.style.display = 'block';
} else {
show.style.display = 'none';
sanjiao.style.display = 'none';
}
show.innerText = input.value;
})
</script>
</body>
</html>
JS案例-快递单号
最新推荐文章于 2023-10-31 05:30:00 发布