简易连连看

最新推荐文章于 2023-01-28 23:11:40 发布

_peng

最新推荐文章于 2023-01-28 23:11:40 发布

阅读量999

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/SIH__/article/details/80247457

本文档提供了一个简单的HTML页面示例，包括基本的页面布局、样式设置及JavaScript交互功能。通过创建一个包含标题栏和一系列可点击元素的盒子，演示了如何使用内联样式和JavaScript来实现元素的动态显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建文本文档，复制下面的代码，保存，文件名：index.html，打开

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
font-family: '隶书';
}
h1 {
line-height: 50px;
}
.box {
width: 525px;
margin: 25px 0 0 25px;
padding: 15px;
text-align: center;
line-height: 500px;
border: solid 1px black;
overflow: hidden;
}
.box h1 {
text-align: left;
}
.box .item {
box-sizing: border-box;
width: 95px;
height: 95px;
margin: 5px;
float: left;
line-height: 95px;
border: solid 1px black;
font-size: 23px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<h1>Hi</h1>
</div>

<script>
let log = console.log.bind(console),
eBox = document.querySelector('.box'),
aColor = [],
aIndex = [],
eCurrent = '',
nCurrent = ''

let randomColor = function() {
return "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ");"
}

for (let i = 0; i < 10; i++) {
aColor.push(randomColor())
aIndex.push(i)
aIndex.push(i)
}

for (let i = 0; i < 20; i++) {
let eDiv = document.createElement('div'),
num = Math.floor(Math.random() * aIndex.length)
eDiv.className = 'item'
eDiv.innerHTML = aIndex[num]
eDiv.setAttribute('index', aIndex[num])
eBox.appendChild(eDiv)
aIndex.splice(num, 1)
}

let aItem = document.querySelectorAll('.item')
for (let i = 0; i < aItem.length; i++) {
aItem[i].onclick = function() {
if (this.getAttribute('index') == nCurrent && eCurrent != this) {
this.innerHTML = ''
eCurrent.innerHTML = ''
} else {
nClick = this.getAttribute('index')
eCurrent = this
}
nCurrent = this.getAttribute('index')
}
}
</script>
</body>
</html>