梦幻树木：在树上留下你的美好回忆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>梦幻树木：在树上留下你的美好回忆</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
<pre><code> #island {
width: 100%;
height: 100%;
position: relative;
background-size: cover;
}
.flower {
width: 50px;
height: 50px;
position: absolute;
}
#cloudInput {
width: 100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
display: none;
}
</style>
</head>
<body>
<div id="island" style="background-image: url('daoyu.png');"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
var island = document.getElementById('island');
// 从localStorage中获取保存的花朵和内容
var savedFlowers = JSON.parse(localStorage.getItem('flowers')) || [];
// 创建保存花朵和内容的数组
var flowers = [];
// 遍历已保存的花朵并恢复它们
savedFlowers.forEach(function(savedFlower) {
var flower = document.createElement('img');
flower.src = savedFlower.image;
flower.style.top = savedFlower.top + 'px';
flower.style.left = savedFlower.left + 'px';
flower.classList.add('flower');
island.appendChild(flower);
flower.addEventListener('mouseover', function() {
showTooltip(flower);
});
flower.addEventListener('mouseout', function() {
hideTooltip();
});
flowers.push(flower);
flower.data = savedFlower.data; // 将保存的数据赋值给对应花朵的提示词
});
island.addEventListener('click', function(event) {
if (event.target !== island) {
return;
}
var activeFlower = document.createElement('img');
activeFlower.data = '';
activeFlower.src = 'tree.jpg';
activeFlower.style.top = event.clientY + 'px';
activeFlower.style.left = event.clientX + 'px';
activeFlower.classList.add('flower');
island.appendChild(activeFlower);
activeFlower.addEventListener('mouseover', function() {
showTooltip(activeFlower);
});
activeFlower.addEventListener('mouseout', function() {
hideTooltip();
});
if (activeFlower && activeFlower.data) {
layer.tips(content, activeFlower, {
tips: [1, '#000'],
time: 0
});
}
flowers.push(activeFlower);
island.removeEventListener('click', clickHandler); // 解除点击事件
function clickHandler(event) {
if (event.target !== island) {
return;
}
var activeFlower = document.createElement('img');
activeFlower.data = '';
activeFlower.src = 'tree.jpg';
activeFlower.style.top = event.clientY + 'px';
activeFlower.style.left = event.clientX + 'px';
activeFlower.classList.add('flower');
island.appendChild(activeFlower);
activeFlower.addEventListener('mouseover', function() {
showTooltip(activeFlower);
});
activeFlower.addEventListener('mouseout', function() {
hideTooltip();
});
if (activeFlower && activeFlower.data) {
layer.tips(content, activeFlower, {
tips: [1, '#000'],
time: 0
});
}
flowers.push(activeFlower);
}
setTimeout(function() {
island.addEventListener('click', clickHandler); // 重新绑定点击事件
}, 0);
</code></pre>
<p>});</p>
<pre><code> function showTooltip(activeFlower) {
layui.use('layer', function() {
var layer = layui.layer;
if (activeFlower && activeFlower.data) {
layer.tips(activeFlower.data, activeFlower, {
tips: [1, '#000'],
time: 0
});
}
});
}
function hideTooltip() {
layui.use('layer', function() {
var layer = layui.layer;
layer.closeAll('tips');
});
}
$(document).on('click', '.flower', function(event) {
var activeFlower = this;
var time = 0; // 定义time变量
event.stopPropagation();
layui.use(['layer', 'form'], function() {
var layer = layui.layer;
var form = layui.form;
$(activeFlower).off('click'); // 解除之前绑定的点击事件
// 判断花朵图片提示词是否有值，如果有值则直接返回
if (activeFlower.data) {
return;
}
var cloudInput = layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: false,
area: ['100px', '100px'],
content: '<div style="padding: 20px;"><input id="inputText" type="text" class="layui-input" ></div>',
success: function(layero, index) {
var inputText = layero.find('#inputText');
inputText.val(activeFlower.data);
inputText.focus();
inputText.keydown(function(event) {
if (event.keyCode === 13) {
activeFlower.data = inputText.val();
inputText.val('');
layer.close(cloudInput);
$(activeFlower).on('click', function(event) {
event.stopPropagation();
showInput(activeFlower);
}); // 重新绑定点击事件
time = Math.floor(Math.random() * 3 + 1); // 生成1到3之间的随机数
setTimeout(function() {
var message = new SpeechSynthesisUtterance(time+'分钟后把你最美好的事情写出来放到树里');
window.speechSynthesis.speak(message);
layer.msg(time+'分钟后把你最美好的事情写出来放到树里', {
time: 5000,
offset: 't',
anim: 6
});
}, 3000);
setTimeout(function() {
var message = new SpeechSynthesisUtterance('时间到了，现在可以把你最美好的事情写出来放到树里啦！');
window.speechSynthesis.speak(message);
layer.msg('时间到了，现在可以把你最美好的事情写出来放到树里啦！', {
time: 5000,
offset: 't',
anim: 6
});
}, time * 60 * 1000);
}
});
}
});
});
});
// 在窗口关闭时保存花朵和内容到localStorage中
window.addEventListener('beforeunload', function() {
var savedFlowers = flowers.map(function(flower) {
return {
image: flower.src,
top: parseInt(flower.style.top),
left: parseInt(flower.style.left),
data: flower.data
};
});
savedFlowers.forEach(function(savedFlower) {
var flower = flowers.find(function(flower) {
return flower.src === savedFlower.image && parseInt(flower.style.top) === savedFlower.top && parseInt(flower.style.left) === savedFlower.left;
});
if (flower) {
flower.data = savedFlower.data;
}
});
localStorage.setItem('flowers', JSON.stringify(savedFlowers));
});
</script>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/HsS 著作权归作者所有。请勿转载和采集!