将百分比转换为小数在线测验简介

本文将介绍如何编写一个将百分比转换为小数的在线测验。用户输入一个百分比，程序将其转换为小数并返回结果。以下是具体实现步骤：

HTML代码

我们使用一个简单的HTML表单来获取用户输入：

<form id="percent-to-decimal-form">
  <label for="percent-input">输入一个百分比：</label>
  <input type="text" id="percent-input" name="percent-input" required>
  <button type="submit">转换</button>
  <br>
  <label for="decimal-output">转换结果：</label>
  <output id="decimal-output"></output>
</form>

JavaScript代码

我们使用JavaScript实现转换功能，并将结果显示在表单中：

var form = document.getElementById('percent-to-decimal-form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 防止默认提交表单的行为

  var percentInput = document.getElementById('percent-input');
  var decimalOutput = document.getElementById('decimal-output');

  var percent = parseFloat(percentInput.value);

  if (isNaN(percent) || percent < 0 || percent > 100) {
    decimalOutput.value = '请正确输入百分比。';
  } else {
    var decimal = percent / 100;
    decimalOutput.value = decimal.toFixed(2); // 保留两位小数
  }
});

CSS代码

我们用一些简单的CSS来美化表单：

form {
  margin: 20px 0;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input, button, output {
  display: block;
  padding: 5px;
  font-size: 16px;
  border-radius: 5px;
}

input[type="text"] {
  width: 180px;
  margin-bottom: 10px;
}

button[type="submit"] {
  margin-top: 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  cursor: pointer;
}

output {
  margin-top: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 10px;
}

结束语

通过以上步骤，我们成功实现了一个将百分比转换为小数的在线测验。使用者可以通过表单输入任意百分比，并获得对应的小数。我们可以根据实际需要对结果进行格式化，如四舍五入、保留几位小数等。