有一道题要实现输入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. Vim文本编辑器 指令簿（二）

    常常处理文本以及常常须要写代码的人,都会有自己比較常常使用的编辑器,本人喜欢用Vim.理由就是Vim编辑器灵活,而且能够达到纯键盘操作,使用纯熟情况下,根本不须要鼠标操作.听起来是不是非常酷的?只是别 ...

  2. Android TabHost TabWidget 去除黑线(底部下划线)

    采用TabHost布局时,往往会发现默认的系统风格与软件风格很不协调,比如TabWidget的下划线影响布局效果.通常情况下会去除其下划线.如果是采用xml布局文件,在TabWidget的属性项设置a ...

  3. java跨平台性分析

    实不相瞒,Java是我见过的执行效率最低的程序设计语言,前不久在CSDN论坛上有个评测,计算9999的阶乘,同样的循环算法,Java的耗时是.NET的5倍.我以前很喜欢Serv-U,自从它用Java重 ...

  4. SQL的几道题目

    1.构造数据插入方案表t_project_finish表 a)将addtime更新为当前时间的前一天 首先想到的是addtime=addtime-1,然后就开始验证这个想法. 插入一行数据,包括主键和 ...

  5. java.lang.ClassFormatError: Illegal UTF8 string in constant pool in class file Server/Request

    Linux服务器上,将本地编译好的文件上传后,Tomcat启动时报错: Exception in thread "Thread-2" java.lang.ClassFormatEr ...

  6. 关于SWT/JFace中其他常用的事件

    1.addSelectionListener:这个监听器最常用. 这个addSelectionListener是一个方法,addSelectionListener(SelectionListener ...

  7. Android开发了解——ODEX

    ODEX是安卓上的应用程序apk中提取出来的可运行文件,即将APK中的classes.dex文件通过dex优化过程将其优化生成一个·dex文件单独存放,原APK中的classes.dex文件会保留.这 ...

  8. 根据日期字符串获取星期几，日期获取星期，时间获取星期，js获取星期

    根据日期字符串获取星期几,日期获取星期,时间获取星期,js获取星期 >>>>>>>>>>>>>>>>&g ...

  9. 【转】PL/SQL编辑数据"这些查询结果不可更新，请包括ROWID或使用SELECT...FOR UPDATE获得可更新结果"处理

    [转]PL/SQL编辑数据"这些查询结果不可更新,请包括ROWID或使用SELECT...FOR UPDATE获得可更新结果"处理 只要有人用了: select t.* from ...

  10. Opencv——将摄像头拍摄写成视频文件

    这里主要利用了Opencv打开摄像头的代码,以及写入视频的函数,只是这里要注意的是摄像头好像没有帧率,在cvCreateVideoWriter,时要自己设置 #include"cv.h&qu ...