JS-改变页面的颜色(三)
需求:点击页面的按钮,改变页面的颜色
思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值
和第二个例子(JS-改变页面的颜色(二))相比仅仅是改变了生成颜色值的思路
简单的代码片段如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Change Page Color Script</title>
<script>
/*
改变页面的背景颜色
*/
function changePageColor()
{
//拿到body元素
var bodyArray=document.getElementsByTagName("body");
var body=bodyArray[0];
//修改body元素的背景颜色属性
body.setAttribute("bgcolor",getColorValue());
}
/*
获取背景颜色的十六进制表示值,这个方法也是前段简单的验证码的编写思路
*/
function getColorValue()
{
//这里不再是随机的颜色了,可以根据自己的喜好选择几种颜色,作为备选的页面改变颜色
var charArray = new Array('AliceBlue', 'Chartreuse', 'DarkGreen', 'GreenYellow', 'LimeGreen', 'PaleGreen', 'SpringGreen', 'Red', 'Orange ', 'MediumSpringGreen ','Indigo', 'DarkMagenta', 'Blue', 'DarkGray', 'Fuchsia', 'Lime');
var charIndex = Math.floor(Math.random() * 16);
return charArray[charIndex];
}
</script>
</head>
<body bgcolor="green" align="center">
<input type="button" value="ChangePageColor" onclick="changePageColor();"/>
</body>
</html>
JS-改变页面的颜色(三)的更多相关文章
- 用JS改变页面中b标签的样式啊 样式的等
用JS改变页面中b标签的样式啊 样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...
- selenium java ,执行js改变页面
1.面对页面一些页面上的限制而导致某些选择按钮无法选中的问题 很多时候由于页面上的一些限制会导致我们无法无法正常用webdriver来实现我们手动的正常操作,这时候我们可以通过执行js来适当的改变页面 ...
- js 改变页面元素的内容
改变页面标签里的内容 (方法) innerText innerHTML (常用) 代码示例 <div></div> <p> 我是文字 <span>1 ...
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
- 【面试题】JS改变this指向的三种方法
一.this指向 点击打开视频讲解更加详细 this随处可见,一般谁调用,this就指向谁.this在不同环境下,不同作用下,表现的也不同. 以下几种情况,this都是指向window 1.全局作用下 ...
- js 改变this指向的三种方法 bind call apply
先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...
- JS-改变页面的颜色(一)
需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 简单的代码片段如下所示: &l ...
- JS-改变页面的颜色(二)
需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 和第一个例 ...
- js改变盒子大小(上下左右)分析
js改变盒子大小 知识点 三个mouse事件:mousedown mousemove mouseup css的定位和cursor 思路 先解决单边问题识别范围,得到所选区域 event. 根据距离,判 ...
随机推荐
- 例子:Alarm Clock with voice Commands Sample
通过本例子学习: 如何使用自定义字体文件(.TTF) 如何播放声音 动画的使用 Speech 设置闹铃 应用 设置 数据存储到IsolatedStorage 如何使用自定义字体文件(.TTF) < ...
- iOS系统消息
一.键盘1.UIKeyboardWillShowNotification-将要弹出键盘2.UIKeyboardDidShowNotification-显示键盘3.UIKeyboardWillHideN ...
- Objective C类方法load和initialize的区别
Objective C类方法load和initialize的区别 过去两个星期里,为了完成一个工作,接触到了NSObject中非常特别的两个类方法(Class Method).它们的特别之处,在于 ...
- HRBUST 1867 差分+BIT
我在群上看到的某道题,貌似用的是线段树,因为前几天遇到差分,再用BIT动态维护一下前缀和,感觉可做就A了. 加了个读优就Rank1啦! 某个不常见的题库,还是把题目拿下来把.. Description ...
- 第三个Sprint冲刺第四天
讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:强化界面功能
- 没有好看的 Terminal 怎么能够快乐地写代码
换了好几回Terminal默认的配色,真是难看哭了,作为一只有生活追求的序媛,当然不能安(zuo)之(yi)若(dai)素(bi)了 1 自定义 Terminal问候语 sudo pico /etc/ ...
- JSP 数据库连接类 MySql数据库
数据库连接类的主要功能是连接数据库并且获得连接对象,以及关闭数据库.通过创建该类的实例,调用其中的方法,以避免重复操作. package chapter13; import java.sql.*; p ...
- Maven管理 划分模块
转载地址:juvenshun.iteye.com/blog/305865 “分天下为三十六郡,郡置守,尉,监” —— <史记·秦始皇本纪> 所有用Maven管理的真实的项目都应该是分模块的 ...
- mongodb,redis,hbase 三者都是nosql数据库,他们的最大区别和不同定位是什么?
不严谨地讲,Redis定位在"快",HBase定位于"大",mongodb定位在"灵活". NoSQL的优点正好就是SQL的软肋,而其弱 ...
- Javascript 中的 && 和 || 使用小结
准备两个对象用于下面的讨论. var alice = { name: "alice", toString: function () { return this.name; } }; ...