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

傷城~ 2022-06-13 12:17 187阅读 0赞

<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 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 C++：OJ练习(每日练习！)

![00c65c4656414b1fa6d45e050c7b905d.png][] 编程题：题一：计算日期到天数的转换 [计算日期到天数转换\_牛客题霸\_

曾经终败给现在/ 2024年02月19日 08:35/ 0 赞/ 77 阅读

相关 Js 实现颜色值转换_Js 实现十六进制颜色值和RGB颜色值转换整理

一、Js 实现颜色值转换处理 js实现十六进制颜色值转RGB颜色值 js实现 RGB颜色值转十六进制颜色值 var colorChange = {

梦里梦外;/ 2022年12月11日 05:22/ 0 赞/ 355 阅读

相关指定标签颜色随机变换

<div class="data_item" v-for="(item,index) in dataList" :key="index">

墨蓝/ 2022年11月07日 04:05/ 0 赞/ 180 阅读

相关 OpenCV-Python图像颜色变换

给图像添加颜色在使用OpenCV操作图像时，有时候需要给图像添加不同的颜色，以达到不同的风格效果。这里介绍的主要是opencv中的`cv.applyColorMap()

深碍√TFBOYSˉ_/ 2022年09月14日 02:20/ 0 赞/ 208 阅读

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

<html lang="en-US"> 红:<input type="text" id="red" /> 绿:<input type="text" id

傷城~/ 2022年06月13日 12:17/ 0 赞/ 188 阅读

相关【Html5每日练习】canvas绘制坐标变换图形

前两天我一直搞不懂坐标变换的内3个函数，按手册上的去写代码，发现实现的代码和手册上说的代码不一样，所以决定自己好好地研究一下，后来明白了，我总喜欢把函数写在路径后面，所以实现不

拼搏现实的明天。/ 2022年06月13日 12:14/ 0 赞/ 275 阅读

相关【JS每日练习】实现字体循环流动

JS绝对是个强大的语言，我发现已经渐渐喜欢上JS了，学了也有两周时间了，今天实现了一个跑马灯实验，虽然不怎么样，但效果还是实现了，拿出来和大家分享一下 <h

野性酷女/ 2022年06月13日 10:51/ 0 赞/ 214 阅读

相关【JS每日练习】JS写的tab选项卡

今天在某个论坛看到一个选项卡的实例，觉得还不错，自己就试着写了下，代码如下 <html> <head> <meta charset="utf-8"

悠悠/ 2022年06月12日 00:51/ 0 赞/ 230 阅读

相关【JS每日练习】简单时钟的实现

<html> <head> <title>JS练习</title> <script> function clock()

Dear 丶/ 2022年06月12日 00:41/ 0 赞/ 206 阅读

相关 jquery实现点击按钮变换背景颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

末蓝、/ 2022年05月27日 10:20/ 0 赞/ 338 阅读