web页面背景色控制

有一道题要实现输入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>
时间: 2024-08-06 11:58:30

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

WEB 页面 控制表单内tab键切换的顺序

在Html代码中有一个键盘属性——tabindex,它可以设置访问者在页面中按tab键的顺序.如下: <input type="button" id="b1" tabIndex="1" value="Button1" /> <input type="button" id="b2" tabIndex="2" value="Button2&qu

UIWebView页面的控制(二)

1.UIWebView的内容控制的属性/方法列表 loading属性               确认当前页面是否在读入中 canGoForward属性   确认goForward  方法是否可执行,可执行为yes: canGoBack属性        确认goBack  方法是否可执行,可执行为yes: goBack方法               返回前一个页面 goForword方法          进入下一个页面 reload方法                 重新读入当前页 st

任务十一:移动Web页面布局实践

面向人群: 有一定HTML及CSS基础,想要尝试移动开发 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,

web页面嵌入excel(一)

写这篇文章之前,先提几个问题,希望高手留言指点.讨论: 1. 水晶报表(Crystal Reports)的表头能不能冻结,即:记录多的时候,记录翻页而报表的头部持久显示:如果能怎么实现. 2. 水晶报表在设计的时候表头字段是拖上去的,如果要做一个报表定制工具,这个表头能用程序控制吗?(非vs2005自带的水晶报表) 3. OWC组建在用vs2005做Web开发的时候为什么添加不到工具栏,而vs2003可以,vs2005的Winform程序也可以. 正是前面提到的问题1和问题2无法解决,现在要把整

js在web页面上绘制圆形

在web页面上,想要画出一个圆形,方法有很多,SVG.canvas都可以绘图.但是本文不采用这两种方式,而是使用一个div.div一般是一个矩形,但是如果设置一个圆角样式border-radius就可以将div变成圆形. 圆的位置需要在画布中绝对定位(position: absolute),也就是通过设置X.Y坐标在定位,对应的css样式是left.top.想要圆的绝对定位起效,画布就要设置position:relative. <!DOCTYPE html> <html> <

(基础篇)PHP与Web页面交互

PHP与Web页面交互是实现PHP网站与用户交互的重要手段.在PHP中提供了两种与Web页面交互的方法,一种是通过Web表单提交数据,另一种是通过URL参数传递. 这里我们将详细讲解表单的相关知识,为以后学习PHP页面交互做好铺垫. 1 .创建表单 Web表单的功能是让浏览者和网站有一个互动的平台.Web表单主要用来在网页中发送数据到服务器,如提交注册信息时需要使用表单.当用户填写完信息后执行提交(submit)操作,于是将表单中的数据从客户端的浏览器传送到服务器端,经过服务器端PHP程序进行处

移动端web页面如何适配

移动端web页面如何适配,现有两个方案: 1 设置viewport进行缩放 简单粗暴,使用过程中反应缩放会导致有些页面元素会糊的情况.天猫的web app的首页使用这种方案 在页面中加入viewport.js var doc = window.document, docEle = doc.documentElement, dpr = Math.ceil(window.devicePixelRatio), vp = document.querySelector('meta[name="viewpo

iOS之safari调试iOS app web页面

Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报错了,但是我们在Xcode控制台是看不到这些错误.这时候我们就可以用功能强大的Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了. Safari设置 打开Safari偏好者设置,选中"高级菜单",在页面最下方看到"在菜单中显示开发菜单"的复选

怎样把报表放到网页中显示(Web页面与报表简单集成样例)

1.问题描写叙述 如今用户开发的系统基本上趋向于BS架构的浏览器/server模式.这些系统可能由不同的语言开发.如HTML.ASP.JSP.PHP等.因此须要将制作好的报表嵌入到这些页面中. FineReport制作出的报表能够通过Frame框架集成到Web页面中. 2.将报表显示在Frame框架内 2.1集成方法 报表作为页面的一部分,能够以iFrame方式嵌入在网页中.指定iFrame的src就可以. 1.     <iframe id="reportFrame" widt