在线输入RGB更改背景色

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>RGB颜色转换</title>
    <script language="javascript">

        function showRGB(obj) {
//          其中red、green、blue都是输入框对应的name值
            var oRed = obj.red.value;
            var oGreen = obj.green.value
            var oBlue = obj.blue.value;
            //将RGB转换为16进制Hex值，字符串
            oHexcode = "#" + toHex(oRed) + toHex(oGreen) + toHex(oBlue);
            var oDiv = document.getElementById("div");
//          div的背景色=name为hexval输入框的值=16进制背景色的值
            oDiv.style.background = obj.hexval.value = oHexcode;
        }

        function toHex(d) {
//          如果输入的不是数字
            if (isNaN(d)) {
                d = 0;
            }
//          16进制转换方法
            var n = new Number(d).toString(16);
            return (n.length == 1 ? "0" + n : n);
        }
    </script>

</head>

<body>
<form style="border: 1px blue solid;">
    <b>请输入RGB颜色值(0 to 255)</b><br>
    Red: <input type="text" name="red" size="5"><br>
    Green: <input type="text" name="green" size="5"><br>
    Blue: <input type="text" name="blue" size="5"><br>
    <button onClick="showRGB(this.parentNode)" type="button">显示Hex #</button>
    Hex值为: <input type="text" name="hexval" size="7">

</form>
<div id="div" style="margin: 50px;width: 200px;height: 200px;border: 1px solid red;"></div>

</body>

</html>

result：

aaarticlea/png;base64,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" alt="" />

在线输入RGB更改背景色的更多相关文章

DateGridView中添加下拉框列并实现数据绑定、更改背景色
1.添加下拉框代码实现==> using System; using System.Collections.Generic; using System.Windows.Forms; names ...
GUI编程笔记（java）08：GUI通过鼠标移动到按钮上更改背景色案例
首先我们看看源代码如下: package cn.itcast_06; import java.awt.Button; import java.awt.Color; import java.awt.Fl ...
UWP的TextBox和PasswordBox使用输入范围更改触摸键盘InputScope
原文:UWP的TextBox和PasswordBox使用输入范围更改触摸键盘InputScope 当你的应用运行在具有触摸屏的设备上时,触摸键盘可用于文本输入.当用户点击可编辑的输入字段(如 Text ...
wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色
今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemT ...
IOS中如果使用RGB实现背景色
在开发的过程中.我们往往会碰到图片很多的情况.这时候我们的程序打包就会变得很大.一些纯色的图片可以用RGB来实现.这样可以减少内存的占用MAC本中有数码测色计这个功能.通过这个我们可以获得图片的RGB ...
element UI table show-overflow-tooltip属性更改背景色和字体颜色
.el-tooltip__popper { width: 80%;/*修改宽度*/ background: #000 !important;/*背景色 !important优先级*/ opacity ...
CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）
1,Html代码 <body> <div id="box"> <ul id="tab_nav"> <li class= ...
2015-11-04 报表（c#部分）（Datatable 查询，弹出日期控件，输入是否整数）
using System;using System.Collections;using System.Configuration;using System.Data;using System.Linq ...
web页面背景色控制
有一道题要实现输入rgb数值,实现更换页面背景色的功能,如下图所示: 答案: <html> <head> <script type="text/javascri ...

随机推荐

ABAP CDS ON HANA-(12)ODATA　Service
Create a CDS view and we have the view type as ‘BASIC’ view To publish this as oData, add the annota ...
Android面试收集录对话框、信息提示和菜单
1.如何使用AlertDialog显示一个列表? 使用AlertDialog.Builder.setItems方法. 在setItems中定义DialogInterface.OnClickListen ...
Java：static的作用分析
static表示“静态”或者“全局”的意思,但在Java中不能在所有类之外定义全局变量,只能通过在一个类中定义公用.静态的变量来实现一个全局变量. 一.静态变量 1. Java中存在两种变量,一种是s ...
Java Algorithm Problems
Java Algorithm Problems 程序员的一天从开始这个Github已经有将近两年时间, 很高兴这个repo可以帮到有需要的人. 我一直认为, 知识本身是无价的, 因此每逢闲暇, 我就 ...
第二篇 Python初识别及变量名定义规范
第一个Python程序可以打开notepad或者其他文本编辑器,输入:print("Hello Python!"),将文件保存到任意盘符下,后缀名是 .py 两种python程 ...
深度学习-CNN tensorflow 可视化
tf.summary模块的简介在TensorFlow中,最常用的可视化方法有三种途径,分别为TensorFlow与OpenCv的混合编程.利用Matpltlib进行可视化.利用TensorFlow自 ...
利用jquery操作dom时，用event.target优化dom操作
html: <ul id="contents"> <li data-link="#part1">Part 1</li> &l ...
java多线程二之线程同步的三种方法
java多线程的难点是在:处理多个线程同步与并发运行时线程间的通信问题.java在处理线程同步时,常用方法有: 1.synchronized关键字. 2.Lock显示加锁. 3.信号量Se ...
【翻译】介绍 ASP.NET Core 中的 Razor Pages
介绍 ASP.NET Core 中的 Razor Pages 原文地址:Introduction to Razor Pages in ASP.NET Core 译文地址:介绍 asp. ...
System.NullReferenceException：未将对象引用设置到对象的实例，这是一个新鸟，中鸟，老鸟都避不开的错误
原文链接:http://www.jb51.net/article/30005.htm

在线输入RGB更改背景色

在线输入RGB更改背景色的更多相关文章

随机推荐

热门专题