有一道题要实现输入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. 用Bootstrap 写了个站点

    近期发现vdceye的站点有些丑陋,就找了一个bootstrap工具,又一次把站点写了一遍 这个工具果然好用 http://vdceye.com/

  2. PrintJ的设计模式之旅——1.模式之父

    好奇设计模式的源头,做了一番搜索和调查,于是便开启了这个系列“PrintJ的设计模式之旅”. 1.模式之父 GOF(Gang of Four) Erich Gamma.Richard Helm.Ral ...

  3. Android Intent入门

    http://www.cnblogs.com/leipei2352/archive/2011/08/09/2132096.html http://blog.csdn.net/xiazdong/arti ...

  4. Asp.Net转换Html加号显示为空格的字符！（自已备用）

    Asp.Net转换Html显示为空格的字符!(自已备用) 显示+(加号),须要替换一下!

  5. SAP进销存难点分析及对策

    1.基本需求: 业务部门提出如上表格式进销存需求,并且金额要和总账中存货科目保持一致,如果要实现上表格式进校存,可以通过SAP标准程序(MC.9.MB51.MB5B)加工繁琐而成.现分析一下SAP标准 ...

  6. View绘制详解，从LayoutInflater谈起

    自定义View算是Android开发中的重中之重了,很多小伙伴可能或多或少都玩过自定义View,对View的绘制流程也有一定的理解.那么现在我想通过几篇博客来详细介绍View的绘制流程,以便使我们更加 ...

  7. DataGrid的ItemCreated和ItemDataBound以及合计平均行

    DataGrid为数据绑定控件,是重量级控件,臃肿,无华不实这么一个控件定位.如果做为管理系统,那么还是可以使用的. 本文只是为了记录ItemCreated和ItemDataBound两个事件的用法. ...

  8. How to install VXDIAG Honda, Toyota and JLR SDD software

    EOBD2 has newly launched Allscanner VXDIAG multi diagnostic tool with OEM diagnostic software: Honda ...

  9. C# for AUTOCAD ActiveX获取图形对象坐标程序

    C# for AUTOCAD ActiveX获取图形对象坐标程序 using System;using System.Collections.Generic;using System.Componen ...

  10. iOS之开发程序之间的跳转及跳转到appStore

    实例一:A程序跳转到B程序 第一步: 在B程序plist文件中,注册对外接口如图在B程序中找到info.plist点击,找到Information Property List ,右击 添加列表项 找到 ...