<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基础样式控件</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">  
  <style>
    body {
      font-family: 'Ma Shan Zheng', sans-serif;
      margin: 20px auto;
      max-width: 400px;
    }

    form > div {
      margin-bottom: 20px;
    }

    button, label, input, select, progress, meter {
      display: block;
      font-family: inherit;
      font-size: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      width: 100%;
      padding: 5px;
      height: 30px;
    }

    select {
      -webkit-appearance: none;
      appearance: none;
    }

    .select-wrapper {
      position: relative;
    }

    .select-wrapper::after {
      content: "▼";
      font-size: 1rem;
      top: 6px;
      right: 10px;
      position: absolute;
    }

    input[type="text"], input[type="datetime-local"], input[type="color"], select {
      box-shadow: inset 1px 1px 3px #ccc;
      border-radius: 5px;
    }

    label {
      margin-bottom: 5px;
    }

    button {
      width: 60%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <form>
    <div>
      <label for="select">单选框：</label>
      <div class="select-wrapper"><select id="select" name="select">
        <option>香蕉</option>
        <option>樱桃</option>
        <option>柠檬</option>
      </select></div>
    </div>
    <div>
      <label for="myFruit">“最喜爱的水果？”数据列表：</label>
      <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
      <datalist id="mySuggestion">
        <option>苹果</option>
        <option>香蕉</option>
        <option>黑莓</option>
        <option>蓝莓</option>
        <option>柠檬</option>
        <option>荔枝</option>
        <option>桃子</option>
        <option>梨</option>
      </datalist>
    </div>
    <div>
      <label for="date1">本地日期时间：</label>
      <input id="date1" name="date1" type="datetime-local">
    </div>
    <div>
      <label for="range">范围：</label>
      <input id="range" name="range" type="range">
    </div>
    <div>
      <label for="color">颜色：</label>
      <input id="color" name="color" type="color">
    </div>
    <div>
      <label for="file">文件选择器：</label>
      <input id="file" name="file" type="file" multiple>
      <ul id="file-list">

      </ul>
    </div>
    <div>
      <label for="progress">进程：</label>
      <progress max="100" value="75" id="progress">75/100</progress>
    </div>
    <div>
      <label for="meter">仪表：</label>
      <meter  id="meter" min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
    </div>
    <div><button>提交？</button></div>
  </form>

  <script>
    const fileInput = document.querySelector('#file');
    const fileList = document.querySelector('#file-list');

    fileInput.addEventListener('change', updateFileList);

    function updateFileList() {
      while(fileList.firstChild) {
        fileList.removeChild(fileList.firstChild);
      }

      let curFiles = fileInput.files;

      if(!(curFiles.length === 0))  {
        console.log('test');
        for(let i = 0; i < curFiles.length; i++) {
          const listItem = document.createElement('li');
          listItem.textContent = '文件名：' + curFiles[i].name + '；文件尺寸 ' + returnFileSize(curFiles[i].size) + '。';
          fileList.appendChild(listItem);
        }
      }
    }

    function returnFileSize(number) {
      if(number < 1024) {
        return number + 'bytes';
      } else if(number >= 1024 && number < 1048576) {
        return (number/1024).toFixed(1) + 'KB';
      } else if(number >= 1048576) {
        return (number/1048576).toFixed(1) + 'MB';
      }
    }
  </script>
</body>

</html>
