梦幻岛屿：记录你的美好瞬间

<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');
<p>// 从localStorage中获取保存的花朵和内容
var savedFlowers = JSON.parse(localStorage.getItem('flowers')) || [];</p>
<p>// 创建保存花朵和内容的数组
var flowers = [];</p>
<p>// 遍历已保存的花朵并恢复它们
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);</p>
<pre><code>flower.addEventListener('mouseover', function() {
  showTooltip(flower);
});

flower.addEventListener('mouseout', function() {
  hideTooltip();
});

flowers.push(flower);
flower.data = savedFlower.data; // 将保存的数据赋值给对应花朵的提示词
</code></pre>
<p>});</p>
<p>island.addEventListener('click', function(event) {
if (event.target !== island) {
return;
}</p>
<pre><code>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 &amp;&amp; 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 &amp;&amp; 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>
<p>function showTooltip(activeFlower) {
layui.use('layer', function() {
var layer = layui.layer;
if (activeFlower &amp;&amp; activeFlower.data) {
layer.tips(activeFlower.data, activeFlower,  {
tips: [1, '#000'],
time: 0
});
}
});
}</p>
<p>function hideTooltip() {
layui.use('layer', function() {
var layer = layui.layer;
layer.closeAll('tips');
});
}</p>
<p>$(document).on('click', '.flower', function(event) {
var activeFlower = this;
var time = 0; // 定义time变量
activeFlower.data = '';</p>
<pre><code>event.stopPropagation();

layui.use(['layer', 'form'], function() {
  var layer = layui.layer;
  var form = layui.form;

  $(activeFlower).off('click'); // 解除之前绑定的点击事件

  var cloudInput = layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    shadeClose: false,
    area: ['100px', '100px'],
    content: '&lt;div style='padding: 20px;'&gt;&lt;input id='inputText' type='text' class='layui-input' &gt;&lt;/div&gt;',
    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);
        }
      });
    }
  });
});
</code></pre>
<p>});</p>
<p>// 在窗口关闭时保存花朵和内容到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 &amp;&amp; parseInt(flower.style.top) === savedFlower.top &amp;&amp; parseInt(flower.style.left) === savedFlower.left;
});
if (flower) {
flower.data = savedFlower.data;
}
});
localStorage.setItem('flowers', JSON.stringify(savedFlowers));
});</p>
</script>