JavaScript实现键盘界面

qq_51883718

于 2022-10-02 16:55:35 发布

阅读量260

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_51883718/article/details/127144277

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.one {
				width: 61.5px;
				height: 30px;
				/* background-color: pink; */
				display: inline-block;
			}

			.two {
				width: 65px;
				height: 60px;
				/* background-color: pink; */
				display: inline-block;
			}

			.three {
				width: 105px;
				height: 60px;
				/* background-color: pink; */
				display: inline-block;
			}

			.four {
				width: 127px;
				height: 60px;
				/* background-color: pink; */
				display: inline-block;
			}

			.five {
				width: 170px;
				height: 60px;
				/* background-color: pink; */
				display: inline-block;
			}

			.six {
				width: 65px;
				height: 65px;
				/* background-color: pink; */
				display: inline-block;
			}

			.seven {
				width: 400px;
				height: 65px;
				/* background-color: pink; */
				display: inline-block;
			}

			.eight {
				width: 86px;
				height: 65px;
				/* background-color: pink; */
				display: inline-block;
			}

			.nine {
				width: 72px;
				height: 70px;
				/* background-color: pink; */
				display: inline-block;
				margin: 0;
				padding: 0;
				transparent 50%;
				background-image: repeating-linear-gradient(#FFFFFF 0 5px, transparent 0 34px)
			}

			.ten {
				width: 72px;
				height: 30px;
				/* background-color: pink; */
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<!-- <button id="one"></button> -->
		<br>
		<script>
			for (var j = 0; j < 6; j++) {
				// 第一行
				if (j == 0) {
					for (var k = 0; k < 10; k++) {
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					for (var i = 0; i < 16; i++) {
						document.write('<div class="one" style="background-color:pink;border: none"></div>')
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					document.write('<br>')
				}
				// 第二行
				if (j == 1) {
					for (var k = 0; k < 10; k++) {
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					for (var i = 0; i < 14; i++) {
						if (i == 13)
							document.write('<div class="three" style="background-color:pink;border: none"></div>')
						else
							document.write('<div class="two" style="background-color:pink;border: none"></div>')
						document.write('&nbsp', '&nbsp', '&nbsp', '&nbsp')
					}
					document.write('<br>')
				}
				// 第三行
				if (j == 3) {
					for (var k = 0; k < 10; k++) {
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					for (var i = 0; i < 14; i++) {
						if (i == 0)
							document.write('<div class="three" style="background-color:pink;border: none"></div>')
						else
							document.write('<div class="two" style="background-color:pink;border: none"></div>')
						document.write('&nbsp', '&nbsp', '&nbsp', '&nbsp')
					}
					document.write('<br>')
				}
				// 第四行
				if (j == 4) {
					for (var k = 0; k < 10; k++) {
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					for (var i = 0; i < 13; i++) {
						if (i == 0 || i == 12)
							document.write('<div class="four" style="background-color:pink;border: none"></div>')
						else
							document.write('<div class="two" style="background-color:pink;border: none"></div>')
						document.write('&nbsp', '&nbsp', '&nbsp', '&nbsp')
					}
					document.write('<br>')
				}
				// 第五行
				if (j == 4) {
					for (var k = 0; k < 10; k++) {
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					for (var i = 0; i < 12; i++) {
						if (i == 0 || i == 11)
							document.write('<div class="five" style="background-color:pink;border: none"></div>')
						else
							document.write('<div class="two" style="background-color:pink;border: none"></div>')
						document.write('&nbsp', '&nbsp', '&nbsp', '&nbsp')
					}
					document.write('<br>')
				}
				// 第六行
				if (j == 4) {
					for (var k = 0; k < 10; k++) {
						document.write('&nbsp', '&nbsp', '&nbsp')
					}
					for (var i = 0; i < 10; i++) {
						if (i == 0) {
							document.write('<div class="eight" style="background-color:pink;border: none"></div>')
							document.write('&nbsp', '&nbsp', '&nbsp', '&nbsp')
							continue
						}
						if (i == 4)
							document.write('<div class="seven" style="background-color:pink;border: none"></div>')
						else if (i > 6) {
							if (i == 8)
								document.write('<div class="nine" style="background-color:pink;border: none"></div>')
							else
								document.write('<div class="ten" style="background-color:pink;border: none"></div>')
						} else
							document.write('<div class="six" style="background-color:pink;border: none"></div>')
						document.write('&nbsp', '&nbsp', '&nbsp', '&nbsp')
					}
					document.write('<br>')
				}
			}
		</script>
	</body>
</html>