master

分支 (1)

管理

管理

master

count-count
/
CountCount.html

<!--
 * @Author: csh
 * @Date: 2022-09-16
 * @LastEditors: csh
 * @LastEditTime: 2022-09-16
 * @Description: 数了个数(不用 vue，原生 html，ui太难写了，暂时先放一放，先写 vue 版本的)
 * @FilePath: /CountCount/CountCount.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <span class="title">数了个数</span>
    <div id="mainLayout" style="margin-top:10px">
      <!-- <div class="card card-bottom" style="translate:0 0">1</div>
      <div class="card card-bottom" style="translate:70px 0">5</div>
      <div class="card card-bottom" style="translate:140px 0">3</div>
      <div class="card card-bottom" style="translate:210px 0">5</div>
      <div class="card card-bottom" style="translate:0 70px">3</div>
      <div class="card card-bottom" style="translate:70px 70px">5</div>
      <div class="card card-bottom" style="translate:140px 70px">3</div>
      <div class="card card-bottom" style="translate:210px 70px">2</div>
      <div class="card card-bottom" style="translate:0 140px">1</div>
      <div class="card card-bottom" style="translate:70px 140px">4</div>
      <div class="card card-bottom" style="translate:140px 140px">5</div>
      <div class="card card-bottom" style="translate:210px 140px">1</div>
      <div class="card" style="translate:0 210px">5</div>
      <div class="card card-bottom" style="translate:70px 210px">5</div>
      <div class="card card-bottom" style="translate:140px 210px">4</div>
      <div class="card" style="translate:210px 210px">1</div>

      <div id="testBottom" class="card card-bottom" style="translate:35px 35px">5</div>
      <div class="card card-bottom" style="translate:105px 35px">4</div>
      <div class="card" style="translate:175px 35px">3</div>
      <div class="card card-bottom" style="translate:35px 105px">5</div>
      <div class="card card-bottom" style="translate:105px 105px">3</div>
      <div class="card" style="translate:175px 105px">1</div>
      <div class="card" style="translate:105px 175px">5</div>

      <div id="test" class="card" style="translate:70px 70px">1</div> -->
    </div>
  </div>
</body>

<script>
  // var cardInfo = {
  //   id,
  //   x,
  //   y,
  //   content,
  //   level
  // }
  const cardInfos = []
  function initCardInfos(){

  }

  function initCardUI(){
    const mainLayout = document.getElementById('mainLayout')
    const card = initOneCardUI("test1", true, 0, 0)
    mainLayout.appendChild(card);
    const card1 = initOneCardUI("test2", false, 35, 35)
    mainLayout.appendChild(card1);
  }
  function initOneCardUI(id, isBottom, translateX, translateY){
    const card = document.createElement("div");
    card.id = id;
    card.innerText = "5"
    card.classList.add("card")
    if(isBottom) card.classList.add("card-bottom")
    // card.style.transform = `scale(2)`
    card.style.transform = `translate(${translateX}px, ${translateY}px)`
    // card.style.transform = `translate(35px, 35px)`
    console.log('card', card)
    console.log('translateX', translateX)
    // 点击事件
    card.onclick = (e=>{
      console.log('e', e)
      removeElement(id)
      removeBottomClass("testBottom");
    })
    return card;
  }

  function removeBottomClass(id){
    // 1. 找到 bottom
    // document.getElementById("test").classList.add("className");
    document.getElementById(id)?.classList.remove("card-bottom");
  }
  function removeElement(id){
    const toRemoveElement = document.getElementById(id)
    toRemoveElement.parentNode.removeChild(toRemoveElement)
  }

  initCardInfos();
  initCardUI();
</script>

<style>
  /* 定义变量 */
  :root {
    --cardWidth: 70px;
    --cardHeight: 70px;
    --cardFontSize: 35px;
  }

  body{
    background-color: lightgreen;
  }

  .title{
    color: rgb(93, 90, 90);
    font-size: 48px;
  }

  .card{
    width: var(--cardWidth);
    height: var(--cardHeight);
    position: absolute;
    border-radius: 4px;
    background-color: white;
    color: black;
    font-size: var(--cardFontSize);
    box-shadow: 0 8px 0 green;
    text-align: center;
    line-height: var(--cardHeight);
  }
  .card-bottom{
    background-color: white;
  }
  .card.card-bottom::after{
    content: "";
    border-radius: 4px;
    top: 0;
    left: 0;
    position:absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background: gray;
  }

</style>
</html>