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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值