[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表情萌主抽抽乐</title>
<style>
[url=home.php?mod=space&uid=476974]@import[/url] url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
body {
font-family: 'Lato', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
background-color: #f9f9f9;
color: #333;
}
h1 {
font-size: 2em;
margin-bottom: 30px;
}
#nameInput {
width: 300px;
height: 100px;
resize: none;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.emoji-container {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
gap: 10px;
max-width: 600px;
}
.emoji-card {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ffcc99, #ff99cc);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.emoji-card:hover {
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.hidden-name {
opacity: 0;
position: absolute;
}
.revealed-name {
opacity: 1;
position: relative;
color: black;
font-size: 16px;
}
.selected-names {
margin-top: 40px;
text-align: left;
width: 600px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.selected-name-item {
margin-bottom: 10px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.selected-name-item span {
font-weight: bold;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background: linear-gradient(135deg, #ffcc99, #ff99cc);
color: white;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button:hover {
background: linear-gradient(135deg, #ff99cc, #ffcc99);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
hr {
width: 600px;
margin: 40px 0;
border: none;
border-top: 1px solid #ddd;
}
.footer {
margin-top: 40px;
font-size: 14px;
color: #999;
}
</style>
</head>
<body>
<h1>表情萌主抽抽乐</h1>
<textarea id="nameInput" placeholder="请输入名字，每个名字占一行"></textarea>
<button>生成表情符号</button>
<hr>
<div class="emoji-container" id="emojiContainer"></div>
<hr>
<div class="selected-names" id="selectedNames"></div>
<div class="footer">Designed by Nong Wenlong</div>
<script>
const emojis = [
'😄', '😊', '😃', '😁', '😆', '😅', '😂', '🤣', '🥲', '☺️',
'🙃', '😉', '😌', '😍', '😘', '😗', '😙', '😚', '😋', '😛',
'😜', '😝', '🤑', '🤗', '🤓', '😎', '🤡', '🤠', '🥳', '😏',
'😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫',
'😩', '😤', '😠', '😡', '🤬', '🤯', '😳', '😱', '😨', '😰',
'😢', '😭', '😓', '🤗', '🤔', '🤫', '🤭', '🤥', '😶‍🌫️', '😐',
'😑', '😬', '🙄', '😯', '😦', '😧', '😮‍💨', '😲', '😴', '🤤'
];
let selectedNamesList = [];
function generateEmojis() {
const inputElement = document.getElementById('nameInput');
const names = inputElement.value.trim().split('\n').filter(name => name !== '');
if (names.length === 0) {
alert('请至少输入一个名字');
return;
}
// 名字查重
if (new Set(names).size !== names.length) {
alert('名字不能重复');
return;
}
const emojiContainer = document.getElementById('emojiContainer');
emojiContainer.innerHTML = '';
selectedNamesList = [];
document.getElementById('selectedNames').innerHTML = '';
const totalEmojisNeeded = Math.max(50, Math.ceil(names.length * 2.7));
let shuffledNames = shuffle([...names]);
while (shuffledNames.length < totalEmojisNeeded) {
shuffledNames = [...shuffledNames, ...shuffle(names)];
}
shuffledNames = shuffledNames.slice(0, totalEmojisNeeded);
for (let i = 0; i < totalEmojisNeeded; i++) {
const emojiCard = document.createElement('div');
emojiCard.className = 'emoji-card';
emojiCard.textContent = emojis[i % emojis.length];
const hiddenName = document.createElement('span');
hiddenName.className = 'hidden-name';
hiddenName.textContent = shuffledNames[i];
emojiCard.appendChild(hiddenName);
emojiCard.addEventListener('click', () => revealName(emojiCard));
emojiContainer.appendChild(emojiCard);
}
}
function revealName(card) {
const name = card.querySelector('.hidden-name').textContent;
if (!selectedNamesList.includes(name)) {
selectedNamesList.push(name);
updateSelectedNames();
}
card.querySelector('.hidden-name').className = 'revealed-name';
}
function updateSelectedNames() {
const selectedNamesDiv = document.getElementById('selectedNames');
selectedNamesDiv.innerHTML = '';
selectedNamesList.forEach((name, index) => {
const item = document.createElement('div');
item.className = 'selected-name-item';
item.innerHTML = `<span>${index + 1}.</span> ${name}`;
selectedNamesDiv.appendChild(item);
});
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// 阻止右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// 阻止复制快捷键
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && (e.key === 'c' || e.key === 'C')) {
e.preventDefault();
}
});
// 阻止选择文本
document.body.onselectstart = function() {
return false;
};
</script>
</body>
</html>
[复制链接]
|
发表于 2024-12-5 21:38
|楼主
发表于 2024-11-28 14:39
收藏
淘帖
有用
分享到朋友圈
