有一道题要实现输入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. 【WPF】 打开本地的文件或者文件夹

    问题描述: 我做的程序中需要添加帮助文档,我将文档生成了CHM格式,在用户点击帮助按钮时候 弹出帮助文档. 实现方法: System.Diagnostics.Process.Start(AppDoma ...

  2. ORM之二：核心接口与扩展操作

    一.数据库提供者接口 /// <summary> /// 数据库提供者 /// </summary> public interface IDbProvider : IDispo ...

  3. [置顶] MySQL Cluster初步学习资料整理--安装部署新特性性能测试等

    1.1 mysql-cluster简介 简单的说,MySQLCluster实际上是在无共享存储设备的情况下实现的一种完全分布式数据库系统,其主要通过NDBCluster(简称NDB)存储引擎来实现. ...

  4. [React Native] Build a Github Repositories component

    Nav to Repos component from Dashboard.js: goToRepos(){ api.getRepos(this.props.userInfo.login) .then ...

  5. 解决MVC Jquery"此请求已被阻止，因为当用在 GET 请求中时，会将敏感信息透漏给第三方网站"的问题

    在ASP.NET MVC项目中,使用AJAX向控制器发送GET请求获取JSON数据时,出现这个错误:"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站.若要允许 G ...

  6. 网页媒体播放利器 - JW Player使用心得

    序言 前段时间在做一个网站项目,要求能在线播放视频.音乐,这个以前还真没接触过.恰好今天在坛子里闲逛时,发现有同志对这方面也感兴趣,遂把这些整理了下,同时自己也可以复习下. 播放器需要满足以下需求: ...

  7. redis的hash操作在集中式session中的应用

    在集群部署时,为了高可用性的目的,往往把session进行共享,共享分为两种:session复制和集中式管理. redis在session集中式管理中可以起到比较大的作用. 制约session集中式共 ...

  8. WIndows 7 与 Debian 7 双系统启动引导

    以前写有一篇文章是Windows XP下引导Linux的(http://www.cnblogs.com/ibgo/archive/2012/05/20/2510736.html),采用的是grub4d ...

  9. 深入理解计算机系统第二版习题解答CSAPP 2.19

    在2.17的基础上完成下表: x 十六进制 T2U(x) -8 0x8 -3 0xD -2 0xE -1 0xF 0 0x0 5 0x5

  10. Js获取下拉框的值和文本select

    $("#camera").change(function () {        var obj = this;        $("#camera_Name" ...