有一道题要实现输入rgb数值，实现更换页面背景色的功能，如下图所示：

答案：

<html>

<head>

<script type="text/javascript">

    window.onload=function(){

        var change = document.getElementById("change");

            change.onclick = function(){

                var r = document.getElementById("r").value;

                var g = document.getElementById("g").value;

                var b = document.getElementById("b").value;

                document.body.style.backgroundColor = "rgb("+r+","+g+","+b+")";

            }

    }

</script>

</head>

<body>

r: <input type="text" id="r" value="123"/><br>

g: <input type="text" id="g" value="123"/><br>

b: <input type="text" id="b" value="123"/><br>

<button id="change">change</button

</body>

</html>

web页面背景色控制的更多相关文章

  1. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  2. 如何把报表放到网页中显示（Web页面与报表简单集成例子）

    1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML.ASP.JSP.PHP等,因此需要将制作好的报表嵌入到这些页面中. FineRepo ...

  3. 移动端web页面如何适配

    移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewpor ...

  4. X5的UI部分和传统Web页面开发的差异

    http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...

  5. 【转】Hadoop web页面的授权设定

    转载自过往记忆(http://www.iteblog.com/)本文链接地址: <Hadoop web页面的授权设定>(http://www.iteblog.com/archives/98 ...

  6. web页面的适配问题

    一个web页面既要在宽屏上显示,又要在窄屏上显示,既要在电脑上显示,又要在手机上显示,这个适配问题相当的麻烦. 其实解决电脑与手机的适配问题,一般有两个思路:一个是做判断,根据不同条件在css和js做 ...

  7. Java用webSocket实现tomcat的日志实时输出到web页面

    原文:http://blog.csdn.net/smile326/article/details/52218264 1.场景需求 后台攻城狮和前端攻城狮一起开发时,经常受到前端攻城狮的骚扰,动不动就来 ...

  8. （基础篇）PHP与Web页面交互

    PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为 ...

  9. 应用CSS的page-break-after属性 实现WEB页面强制分页打印

    虽然dedecms.com向大家介绍了很多CSS属性的相关知识,但有些非常冷门的属性还是有所欠缺.在B/S程序中,对打印页面的控制,CSS相对比较弱,例如: 自动分页, 就基本没啥实际用途.我们通常需 ...

随机推荐

  1. 从Eclipse到Android Studio经历

    现在不得不要和相处近两年的Eclipse分手了,很舍不得,谢谢你这些日子有你的陪伴,每天都会有些的期待和挑战.两年来,我们建立了很深厚的情感.曾经以为我的世界只能有你,而现在我的心里可能有了别人.起初 ...

  2. 给定一个字符串，仅由a,b,c 3种小写字母组成。

    package com.boco.study; /** * 题目详情 给定一个字符串,仅由a,b,c 3种小写字母组成. 当出现连续两个不同的字母时,你可以用另外一个字母替换它,如 有ab或ba连续出 ...

  3. G711

    G.711就是语音模拟信号的一种非线性量化.细分有二种:G.711 a-lawand G.711 u-law.不同的国家和地方都会选取一种作为自己的标准. G.711a/u bitrate 是64kb ...

  4. Linux 基础 —— RPM

    http://liaoph.com/linux-rpm/ 这篇文章主要讲 RPM 软件包管理器的使用. 软件包的演变史 最早期时,软件包是一些可以运行的程序组成的集合,可能还要加上若干配置文件和动态库 ...

  5. eclipse中不能找到dubbo.xsd解决方法

    使用dubbo时遇到问题: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document 'htt ...

  6. C# 之 Excel 导入一列中既有汉字又有数字：数字可以正常导入，汉字导入为空

    今天在做一个Excel导入功能,一切开发就绪,数据可以成功导入.导入后检查数据库发现有一列既有汉字又有数字,数字正常导入,汉字为空.但是前面同样既有汉字又有数字的列可以导入成功. 查看excel 源文 ...

  7. 使用socket实现FTP程序

    #-*- coding:utf-8 -*- import socketserver from module import * class server: def __init__(self,reque ...

  8. MySQL（3）：数据库操作

    1.创建数据库: 数据定义语言(DDL): create database db_name[数据库选项] 注:数据库命名规则:大小写取决于当前操作系统,见名知意,推荐下划线 标识符的字符: 使用任意字 ...

  9. Adroid_Spinner_ArrayAdapter

    XML布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...

  10. 给Chrome和Firefox添加js脚本作为插件的方法

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...