原生JS案例——点击div随机变背景

点击div随机变背景

要求

当点击div时， div会随机切换另一种颜色

具体效果

实现原理

1. 给div绑定一个鼠标点击事件
2. 十六进制的颜色编码是由 ‘#’ 和 ‘0123456789abcdef’ 组成的, 共6位
3. 利用随机数函数每次从 ‘0123456789abcdef’ 中取一个字符串, 并拼接到 ‘#’ 后
4. 修改div的样式背景为新生成的十六进制颜色编码

页面准备

html代码

	<div id="box"></div>

css代码

    #box {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background: red;
    }

原生JS实现代码

    var box = document.getElementById('box')
    box.onclick = function () {
      // 生成一个随机颜色
      var str = '0123456789abcdef'
      var color = '#'
      for (var i = 0; i < 6; i++) {
      	// 从str随机取一个字符串
        var index = Math.floor(Math.random() * str.length)
        // 拼接到 '#' 后
        color += str[index]
      }
      // 修改div的样式背景为新生成的十六进制颜色编码
      box.style.background = color