15179102858
/
jounal_inteligence


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 文档编码 -->
    <meta charset="UTF-8" />

    <!-- 视口设置，确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 页面标题 -->
    <title>test</title>
    <script src="./node_modules/echarts/dist/echarts.common.min.js"></script>
  </head>

  <body>
    <!-- 页面主体内容 -->
    <script src="add.js"></script>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px; height: 400px"></div>
    <!-- 字号更大，加粗颜色变深 -->
    <h1>标题一</h1>
    <!-- 卡片card 周围有边框效果，还有自动的外边距间隔 -->
    <style>
      .card {
        margin: 10px;
        border: solid 1px;
        min-width: 100px;
        min-height: 80px;
      }
    </style>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <!-- 有短横杠的属性要用小驼峰法命名 并且不是冒号是等于号-->
    <card>盒子1</card>
    <card>盒子2</card>
    <card>盒子3</card>
    <circle>圆圈1</circle>
    <circle>圆圈2</circle>
    <script>
      class Component {
        selector = ""; //选择器css
        template = ""; //模版页面
        style = {};
        constructor(compMetaDate) {
          this.selector = compMetaDate.selector;
          this.style = compMetaDate.style;
          this.template = compMetaDate.template;
        }
        //渲染
        render() {
          let compList = document.getElementsByTagName(this.selector);
          for (let index = 0; index < compList.length; index++) {
            let compele1 = compList[index];
            Object.keys(this.style).forEach(
              (
                key //获取所有的keys关键字并转换成数组
              ) => {
                compele1.style[key] = this.style[key];
              }
            );
          }
        }
      }
      //   cardele1.style.margin = "10px";
      //   cardele1.style.border = "solid 10px";
      //   cardele1.style.minwidth = "100px";
      //   cardele1.style.minheight = "80px";
      //   let cardList = document.getElementsByTagName("card");
      //   for (let index = 0; index < cardList.length; index++) {
      //     let cardele1 = cardList[index];
      //     cardele1.style.margin = "10px";
      //     cardele1.style.border = "solid 10px";
      //     cardele1.style.minwidth = "100px";
      //     cardele1.style.minheight = "80px";
      //   }
      let CardComponent = new Component({
        selector: "card",
        style: {
          margin: "10px",
          border: "solid 1px",
          minwidth: "100px",
          minheight: "80px",
        },
        template: "我是卡片",
      });
      CardComponent.render();

      let circleComponent = new Component({
        selector: "circle",
        style: {
          margin: "10px",
          border: "solid 1px",
          borderRadius: "50%",
          width: "100px",
          height: "80px",
        },
        template: "我是卡片",
      });
      circleComponent.render();
    </script>
  </body>
</html>