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

来源：互联网发布：淘宝直通车创意图片编辑：程序博客网时间：2024/05/29 23:25

<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里文字的颜色，用了一个判断语句判断用户输入的是否为数字，如果不是数字的话，就会跳出一个警告框叫你输入数字，然后在文本框设置焦点，这个判断语句比较简陋，你也可以改动一下，实现判断出在哪个文本框没有输入数字，然后再次获得焦点并选取。