Question

问题

我有一个表，其中包含用户输入值的输入，JavaScript运行Calc。并显示输出值。为了提高用户体验，我希望在输出根据JavaScript执行的计算更改时更改文本的颜色。这可能吗？

我的努力

我查看了互联网并且除了在输入中输入值之外没有找到任何其他内容，从不处理输出文本。

HTML

<head>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td>Input</td>
                        <td><input class="input_green" id="input" type="number" value="0"></td>
            <td></td>
            <td>Output</td>
            <td><input class="input_yellow" id="output" readonly type="number" value="10"></td>
        </tr>
    </table>
</body>

的JavaScript

var foo = function(){
    var val = parseFloat($('#input').val());
    var total = val * 3;
    $('#output').val(total);
}

foo();

document.getElementById("input").onchange = (function() {
foo();

});

Answer 1

您已在输入中有一个班级。我建议您通过css为此处的文本设置默认颜色并从那里开始工作。黄色很难看到。我用过蓝色

如果您运行下面的代码段，您会看到如果您在第一个输入框中输入1，则输出为蓝色，但是当您输入例如4或5，结果超过10，输出为红色。

var foo = function(){
	var val = parseFloat($('#input').val());
	var total = val * 3;
	if(total > 10){
		$('.input_blue').css("color", "red");
	}
	$('#output').val(total);
}

foo();

document.getElementById("input").onchange = (function() {
foo();
});

.input_blue{color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <table>
        <tr>
            <td>Input</td>
						<td><input class="input_green" id="input" type="number" value="0"></td>
            <td></td>
            <td>Output</td>
            <td><input class="input_blue" id="output" readonly type="number" value="10"></td>
        </tr>
    </table>
</body>

Answer 2

这样的东西？

var foo = function(){
    var val = parseFloat($('#input').val());
    var total = val * 3;
    $('#output')
    .val(total);
    .css('color', 'rgb('+[(val^2)%256,(val*5)%256, (val%256)*2].join(',') +')')
}

值更改时输出文本颜色会发生变化

2 个答案: