关于Javascript的百分比
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于Javascript的百分比相关的知识，希望对你有一定的参考价值。
图中圈中部分的元素怎么转换成百分比请赐教
谢谢
参考技术A 把px改成%就好了。追问谢谢
参考技术B dy,style.botton=t*0.3;追问谢谢
在Javascript中查找标记的百分比
我试图获得以表格形式提交的商标的百分比。但我无法理解我的代码中出错了什么。我从学生那里拿标记并显示他们的名字和百分比。我正在使用表单和输入并提交它以获取javascript中的百分比。
function getReport() {
var name = document.forum.getElementById('name1').value;
var eng = document.forum.getElementById('eng').value;
var mat = document.forum.getElementById('mathss').value;
var phy = document.forum.getElementById('physs').value;
var totalmarks = eng + mat + phy;
var percentage = (totalmarks / 3) * 100;
document.getElementById('resname').innerHTML = name;
document.getElementById('getavg').innerHTML = percentage;
}<!DOCTYPE html>
<html>
<head>
<title> Student Result </title>
</head>
<body>
<h1> Student Result </h1>
<form name="forum" onSubmit="getReport()">
<table>
<tr>
<td> Name: <input type="text" id="name1" > </td>
</tr>
<tr>
<td> <strong> Marks </strong> </td>
</tr>
<tr>
<td> English <input type="text" id="eng" > </td>
</tr>
<tr>
<td> Maths <input type="text" id="mathss" > </td>
</tr>
<tr>
<td> Physics <input type="text" id="physs" > </td>
</tr>
<tr>
<td> <input type="submit" id="subb" value="SUBMIT"> </td>
</tr>
</table>
</form>
<p id="resname"></p>
<p id="getavg"></p>
<script language="javascript" src="res.js" > </script>
</body>
</html>有一些基本问题：
1）表单总是回发到服务器（因此破坏了JavaScript所做的任何更改），因为您没有阻止默认的提交行为。函数末尾的onsubmit="return getReport()"和return false;将解决这个问题。
2）document.forum.getElementById无效。您没有在此处指定表单的名称。 ID必须对整个页面都是唯一的，因此无论如何都不会这样做。 document.getElementById是正确的。
3）来自文本框的值最初是字符串。如果你用+将它们组合在一起，你只需要将它们串在一起。这会让你的数学出错。例如。如果你在得分框中输入“3”，“4”和“5”，那么eng + mat + phys将解析为"3" + "4" + "5"，结果是"345"因为它们都是字符串，所以它只是将它们连接在一起。这使得百分比等于11500，这显然是无稽之谈。相反，你需要使用parseInt()将它们解析为数字（假设它们总是整数），然后它会做（例如3 + 4 + 5，当然等于12。
这是一个修复所有这些问题的版本。这些都是单独的小细节，仔细调试可以很容易地揭示。
function getReport() {
var name = document.getElementById('name1').value;
var eng = parseInt(document.getElementById('eng').value);
var mat = parseInt(document.getElementById('mathss').value);
var phy = parseInt(document.getElementById('physs').value);
var totalmarks = eng + mat + phy;
console.log(totalmarks);
var percentage = (totalmarks / 3) * 100;
document.getElementById('resname').innerHTML = name;
document.getElementById('getavg').innerHTML = percentage;
return false; //stop the form posting back
}<h1> Student Result </h1>
<form name="forum" onsubmit="return getReport()">
<table>
<tr>
<td> Name: <input type="text" id="name1" > </td>
</tr>
<tr>
<td> <strong> Marks </strong> </td>
</tr>
<tr>
<td> English <input type="text" id="eng" > </td>
</tr>
<tr>
<td> Maths <input type="text" id="mathss" > </td>
</tr>
<tr>
<td> Physics <input type="text" id="physs" > </td>
</tr>
<tr>
<td> <input type="submit" id="subb" value="SUBMIT"> </td>
</tr>
</table>
</form>
<p id="resname"></p>
<p id="getavg"></p>- 要获得javascript中的标记，您无需提交表单。
- 计算百分比的错误方法。百分比=（标记总和/获得的总标记）×100
function getReport()
{
var name = document.getElementById('name1').value;
var eng = document.getElementById('eng').value;
var mat = document.getElementById('mathss').value;
var phy = document.getElementById('physs').value;
var totalmarks = parseInt(eng) + parseInt(mat) + parseInt(phy) ;
var average = (totalmarks/3)*100 ;
var percentage = (totalmarks/300)*100 ;
document.getElementById('resname').innerHTML = name ;
document.getElementById('getavg').innerHTML = percentage ;
}<html>
<head>
<title> Student Result </title>
</head>
<body>
<h1> Student Result </h1>
<form name="forum" >
<table>
<tr>
<td> Name: <input type="text" id="name1" > </td>
</tr>
<tr>
<td> <strong> Marks </strong> </td>
</tr>
<tr>
<td> English <input type="text" id="eng" > </td>
</tr>
<tr>
<td> Maths <input type="text" id="mathss" > </td>
</tr>
<tr>
<td> Physics <input type="text" id="physs" > </td>
</tr>
<tr>
<td> <input type="button" id="subb" value="SUBMIT" onClick="return getReport()"> </td>
</tr>
</table>
</form>
<p id="resname"></p>
<p id="getavg"></p>
</body>
</html>首先不要使用document.forum.getElementById('name').value;
使用简单的document.getElementById('name').value;和数字你必须解析它为int进行make计算，因为你把输入类型作为文本，它给你字符串所以你必须解析字符串为int为cal。
再次，你计算百分比的逻辑是不准确的，你必须这样做(totelMarks * 100)/ maximum marks;
注意：最大标记可以从中获得标记，例如在这种特殊情况下，您有3个主题，因此您的最大标记为300。
然后从表单中删除表单提交onsubmit属性并添加用按钮替换输入类型提交并在其上调用onclick属性，如下所示
onclick =“getReports（）”
function getReport() {
var name = document.getElementById('name1').value;
var eng = parseInt(document.getElementById('eng').value);
var mat = parseInt(document.getElementById('mathss').value);
var phy = parseInt(document.getElementById('physs').value);
var totalmarks = eng + mat + phy;
var percentage = (totalmarks *100) / 300;
document.getElementById('resname').innerHTML = name;
document.getElementById('getavg').innerHTML = percentage;
}<form">
<table>
<tr>
<td> Name: <input type="text" id="name1" ></td>
</tr>
<tr>
<td> <strong> Marks </strong> </td>
</tr>
<tr>
<td> English <input type="text" id="eng" ></td>
</tr>
<tr>
<td> Maths <input type="text" id="mathss" ></td>
</tr>
<tr>
<td> Physics <input type="text" id="physs" ></td>
</tr>
<tr>
<td> <input type="Button" id="subb"value="SUBMIT" onclick="getReport()"> </td>
</tr>
</table>
</form>
<p id="resname"></p>
<p id="getavg"></p>以上是关于关于Javascript的百分比的主要内容，如果未能解决你的问题，请参考以下文章