Question

我需要一个代码，用户可以在其中添加最大点数，获得积分和他的名字。这是我的代码..大部分事情已经有效了，我只需要一个函数来改变最大点，现在它是一个静态数字。

<head>
    <title>examAnalysis</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    div {
        float: left; margin-right: 10px;
    }
    div p { 
        text-align: center;
    }
    </style>
    <script type="text/javascript">
var participant = [];
var maxPoints = 100;
var barWidth = 75;

window.onload = function() { document.getElementsByTagName('input')[0].value = maxPoints; } function setMaxPoints() { maxPoints = document.getElementsByTagName('input')[0].value; }        

function gatherData()
{
    var name = window.prompt('Please enter the name of the participant:');
    name = name.replace(/\s+/g, '');
    if ((/[^A-Z\s\-\']/gi.test(name)) || (name == '') || (name == 'undefined'))
    {
        alert ('You must enter a valid name! ');
        return;
    }

    var points = window.prompt('Please enter the achieved points of the participant:');
    points = parseInt(points, 10);
    if ((/[^0-9\s\-\']/gi.test(points)) || (points == ''))
    {
        alert ('You must enter a valid number! ');
        return;
    }

    participant.push({name: name, points: points});

    createChart();
};

function createChart ()
    {
        var i = 0;
        var len = participant.length;
        var bar = null;

        var container = document.getElementById('chart');
        container.innerHTML='';

        while (i < len)
        {

            bar = document.createElement('div');
            bar.style.width = barWidth + 'px';
            bar.style.backgroundColor = getRandomColor();
            bar.style.float = 'left';
            bar.style.marginRight = '10px';

            bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
            bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
            percent = ((participant[i].points / maxPoints) * 100) + '%';    
            bar.innerHTML = ['<p style="margin-top: ' + (parseInt(bar.style.height) - 17) + 'px">', percent, '<br />', participant[i].name, '</p>'].join('');

            container.appendChild(bar);

            i = i + 1;
        }
    };

function getRandomColor () {
    return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
 };
    </script>
</head>

<body>
    <label><input size="5" onkeyup="setMaxPoints()" /> Set Max Points</label><br /><br />
    <button onclick="gatherData()">Add Participant</button>
    <h4>Chart</h4>
    <div id="chart"></div>
</body>

Answer 1

Kentas，这是我的整个代码版本，添加了一个输入框以获取maxPoints：

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>examAnalysis</title>
<style type="text/css">
div
{
    float: left;
    margin-right: 10px;
}
div p
{ 
    text-align: center;
}
</style>
<script type="text/javascript">
var participant = [];
var maxPoints = 200;
var barWidth = 20;

window.onload = function()
{
    document.getElementsByTagName('input')[0].value = maxPoints;
}

function setMaxPoints()
{
    maxPoints = document.getElementsByTagName('input')[0].value;
}

function gatherData()
{
    var name = window.prompt('Please enter the name of the participant:');
    name = name.replace(/\s+/g, '');
    if ((/[^A-Z\s\-\']/gi.test(name)) || (name == '') || (name == 'undefined'))
    {
        alert ('You must enter a valid name! ');
        return;
    }

    var points = window.prompt('Please enter the achieved points of the participant:');
    points = parseInt(points, 10);
    if ((/[^0-9\s\-\']/gi.test(points)) || (points == ''))
    {
        alert ('You must enter a valid number! ');
        return;
    }

    participant.push({name: name, points: points});

    createChart();
};

function createChart ()
{
    var i = 0;
    var len = participant.length;
    var bar = null;

    var container = document.getElementById('chart');
    container.innerHTML='';

    while (i < len)
    {

        bar = document.createElement('div');
        bar.style.width = barWidth + 'px';
        bar.style.marginBottom = '5px';
        bar.style.backgroundColor = getRandomColor();

        bar.style.height = ((participant[i].points / maxPoints) * 200) + 'px';
        bar.style.marginTop = 200 - parseInt(bar.style.height) + 'px';
        percent = ((participant[i].points / maxPoints) * 100) + '%';

        bar.innerHTML = ['<p style="margin-top: ' + (parseInt(bar.style.height) - 17) + 'px">',  percent, '<br />', participant[i].name, '</p>'].join('');

        container.appendChild(bar);

        i = i + 1;
    }
};

function getRandomColor ()
{
    return ['rgb(', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ', ', Math.floor(Math.random() * 255), ')'].join('');
};
</script>
</head>

<body>
    <label><input size="5" onkeyup="setMaxPoints()" /> Set Max Points</label><br /><br />
    <button onclick="gatherData()">Add Participant</button>
    <h4>Chart</h4>
    <div id="chart"></div>
</body>

带有用户输入和验证的垂直条形图

1 个答案: