点击变色！JavaScript实现随机颜色改变

<div id='colorBlock' onclick='changeColor()'></div>
<script>
function changeColor() {
  var colorBlock = document.getElementById('colorBlock');
  var randomColor = getRandomColor();
  colorBlock.style.backgroundColor = randomColor;
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>
<h2>点击变色效果的实现</h2>
<p>本文介绍了如何使用JavaScript实现点击色块后随机改变颜色的效果。</p>
<p><strong>HTML部分</strong></p>
<p>代码中定义了一个id为'colorBlock'的div元素，并添加了onclick属性，该属性调用changeColor()函数。</p>
<p><strong>JavaScript部分</strong></p>
<ol>
<li>
<p><strong>changeColor()函数</strong>:</p>
<ul>
<li>获取id为'colorBlock'的元素。</li>
<li>调用getRandomColor()函数获取一个随机颜色。</li>
<li>将随机颜色设置为colorBlock元素的背景颜色。</li>
</ul>
</li>
<li>
<p><strong>getRandomColor()函数</strong>:</p>
<ul>
<li>使用十六进制颜色码生成随机颜色。</li>
<li>循环6次，每次从字母和数字中随机选择一个字符，并将其添加到color变量中。</li>
<li>最终返回一个以'#'开头的随机颜色字符串。</li>
</ul>
</li>
</ol>
<p><strong>总结</strong></p>
<p>通过上述代码，每次点击色块，它的颜色都会变为一个随机的颜色。</p>