WEB安全色

bootcss官网有个这个页面,看了后觉得蛮好看的 自己写了一个玩玩儿。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>web安全色</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      font-size: 12px;
      background-color: #efefef;
    }
    h1 {
      height: 100px;
      line-height: 100px;
      font-size: 36px;
      text-align: center;
    }
    .color-list {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      width: 1000px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: space-between;
      flex-wrap: wrap;
      overflow-y: auto;
    }
    .color-item {
      width: 150px;
      height: 190px;
      margin-bottom: 20px;
      border-radius: 8px;
      border: 1px solid #ccc;
      box-shadow: 3px 2px 3px #ccc;
    }
    .color-block {
      width: 148px;
      height: 130px;
      border-radius: 5px;
      border-bottom: 1px solid #ccc;
    }
    .color-code {
      height: 36px;
      line-height: 18px;
      padding-left: 10px;
      margin-top: 10px;
    }
    .color-code strong {
      margin-right: 14px;
    }
  </style>
</head>
<body>
  <h1>WEB安全色DEMO</h1>
  <div class="color-list" id="color-list"></div>
  <script>
    window.onload = () => {

      let format = (num) => ('0' + num.toString(16)).slice(-2)

      let arr = [0, 0, 0],
          dom = []

      while (arr[0] <= 5) {

        let arr2 = arr.map((ele) =>  ele * 51)

        let hex = '#' + arr2.map((ele) => format(ele)).join('').toUpperCase(),
            rgb = arr2.join(', ')

          arr[2]++
        if (arr[2] > 5) {

          arr[2] = 0
          arr[1]++

          if (arr[1] > 5) {

            arr[0]++
            arr[1] = 0
          }
        }
        dom.push(`<div class="color-item">
                  <div class="color-block" style="background-color: ${hex};"></div>
                  <div class="color-code">
                  <p><strong>HEX:</strong><span>${hex}</span></p>
                  <p><strong>RGB:</strong><span>${rgb}</span></p>
                  </div></div>`)
      }
      document.querySelector('#color-list').innerHTML = dom.join('')

      setInterval(() => document.querySelector('h1').style.color = '#' + Math.random().toString(16).slice(2, 8), 233)
    }
  </script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » WEB安全色

赞 (2)
分享到:更多 ()

发表评论 0