传递游戏，每个人只能添加一个创意，然后传递给下一位

最新推荐文章于 2024-09-19 17:42:53 发布

科学电子佛

最新推荐文章于 2024-09-19 17:42:53 发布

阅读量147

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/qq_43506529/article/details/107584997

版权

代码要有创意，感官很重要

直接上代码：

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 200px;
			height: 200px;
			border: 1px solid #ffffff;
			position: relative;
			margin: 0 auto;
		}

		.show {
			width: 160px;
			height: 160px;
			border: 1px solid #6666;
			box-shadow: 10px 10px 10px #cccccc;
			margin-top: 10px;
			/* 先隐藏div框，监听input框，input框里有值以后，在显示div框 */
			display: none;
			position: absolute;
			background-color: skyblue;
			line-height: 160px;
			border-radius: 80px;
		}



		input {
			margin-top: 200px;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="show"></div>
		<input type="text" placeholder="请输入您的快递单号">
	</div>

	<script>

		var show = document.querySelector('.show');
		var input = document.querySelector('input');
		input.addEventListener('keyup', function () {
			if (input.value == '') {
				show.style.display = 'none';
			}
			else {
				show.style.display = 'block';
				show.innerHTML = this.value;
			}
		})
		input.addEventListener('blur', function () {
			show.style.display = 'none';
		})
		input.addEventListener('focus', function () {
			if (input.value !== '') {
				show.style.display = 'block';
			}

		})
	</script>
</body>

</html>