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. 根据距离,判 ...
随机推荐
- JS判断是否已经到达页面底部
$(window).scroll(function(){ var scrollTop=$(this).scrollTop(); var scrollHeight=$(document).height( ...
- jquery Mobile弹出窗
先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...
- 【Windows批处理II】类C语言的学习和思考
0)@不显示该行 1)随时删除qq下所有gif文件(a.bat),只要能达到目的死循环也可以: @echo off \Tencent\AD\*.gif del C:\Progra~\Tencent\A ...
- vs2012 vs2010 opencv2.4.7配置
http://blog.csdn.net/xiaohanstu/article/details/45309149?utm_source=tuicool <pre name=.7配置 .配置 () ...
- Flask微型框架入门笔记
例程: from flask import Flask app = Flask(__name__) # 新建一个Flask可运行实体(名字参数如果是单独应用可以使用__name__变量,如果是modu ...
- 转: SQL Server索引的维护 - 索引碎片、填充因子
转:http://www.cnblogs.com/kissdodog/archive/2013/06/14/3135412.html 实际上,索引的维护主要包括以下两个方面: 页拆分 碎片 这两个问题 ...
- C++ 中的对象布局
C++中的涉及到虚表时,类对象的布局分为:虚表与数据成员,子类包含派生类布局,假设下面一个程序: #include <iostream> using namespace std; clas ...
- Kubuntu 使用YaH3C进行中大校园网认证
之前都是用路由器连网线上网,我也没注意到inode校园网客户端在linux上的问题.直到前两天把路由器给搞残废了,只能默默的找办法装inode.根据学校网络中心给的教程,在kubuntu上尝试安装in ...
- hive索引表
create table index_tmp(id int,name string,dt string) row format delimited fields terminated by ',' s ...
- PlayerLog.lua --玩家登录通告
print(">>Script: Player Log Message.") --CLASS 职业 --战士 --圣骑士 --猎人 --盗贼 --牧师 --死亡骑士 - ...