您的位置：首页 > Web前端 > JavaScript

【JS 每日练习】实现颜色变换

2012-04-14 16:32 435 查看 
<html lang="en-US">
红:<input type="text" id="red" />
绿:<input type="text" id="green" />
蓝:<input type="text" id="blue" />
<input id="submit" type="button" value="颜色变化" onclick="changeColor();"/>
<div id="font">有趣的颜色变化</div>
<script>
function changeColor()
{
$("font").style.color = toRGB();
}
function toRGB()
{
var red = parseInt($("red").value);
var green = parseInt($("green").value);
var blue = parseInt($("blue").value);
//判断输入的是不是数字
if(isNaN(red) || isNaN(green) || isNaN(blue))
{
alert("请输入数字");
$("red").focus();
$("red").select();
}
else
{
var red = red.toString(16);
var green = green.toString(16);
var blue = blue.toString(16);
var rbg = "#"+red+green+blue;
return rbg;
}
}
$ = function(m_id)
{
return document.getElementById(m_id);
}
</script>
</html>


这段代码实现的功能很简单，就是在文本框里输入0-255的数字，根据输入的数字来改变div里文字的颜色，用了一个判断语句判断用户输入的是否为数字，如果不是数字的话，就会跳出一个警告框叫你输入数字，然后在文本框设置焦点，这个判断语句比较简陋，你也可以改动一下，实现判断出在哪个文本框没有输入数字，然后再次获得焦点并选取。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航