【JavaScript】轻易改变的背景和字体颜色页面
JavaScript,点击button改变页面背景和字体颜色,网页有N颜色的变化button。点击不同button,网页字体和背景将被改变为不同的颜色。
非常easy的JavaScript小程序。
一、基本目标
一打开网页首先提示问候信息“你好”
网页中有N个改变颜色的button,当中返回是返回网页的默认颜色,背景是白的,字体是黑的
点击不同的button。网页的字体与背景就会改变成不同的颜色。
本来想做出彩虹起色的,但原理全然一样就不多写button了。
二、基本思想
关键是对body标签与字体js提供id。使其在js中得到控制。本例提供了对js函数的应用。
三、制作过程
就一个简单的小页面,详情看凝视:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js换背景颜色</title>
<!--这段相同可以分离到一个js文件中面去,但这段代码实在是太短了,就没有必要了-->
<script type="text/javascript">
//onload相当于本网页的构造函数。onunload相当于本网页的析取函数
function load() {
alert("你好! ");
}
function unload() {
alert("再见!");
}
function Changecolor(bcolor, fcolor) {
//相当于对于字体<span style="color:传过来的fcolor">这样。改变字体的颜色
document.getElementById("body").style.background = bcolor;
document.getElementById("ziti").style.color = fcolor;
}
</script>
</head>
<!--关键给整个网页与行内字体提供一个id。JS中的getElementById()方法可以轻松控制CSS中的东西-->
<body onload="load()" onunload="unload()" id="body">
<span id="ziti">js</span>
<br />
<!--注意在双引號中传递參数时,原来的双引號要变成单引號。onclick的值是一旦点击本按钮就被激发的东西-->
<input onclick="Changecolor('#ff0000','#ffffff')" type="button"
value="赤" />
<input onclick="Changecolor('#ff9900','#ffffff')" type="button"
value="橙" />
<input onclick="Changecolor('#ffff00','#000000')" type="button"
value="黄" />
……
<input onclick="Changecolor('#ffffff','#000000')" type="button"
value="返回" />
</body>
</html>
onunload()函数差点儿仅在IE关闭本页面时中有效。并且本对话框不会在最前端。谷歌浏览器则没有不论什么效果。因此。此函数意义不大。
版权声明:本文博主原创文章。博客,未经同意不得转载。
【JavaScript】轻易改变的背景和字体颜色页面的更多相关文章
- phpstorm调整背景、字体颜色
从这个网站(http://phpstorm-themes.com/)下载各类主题的xml文件, 然后将文件放到phpStorm的文件夹中,比如:C:\Users\USERNAME\.PhpStorm2 ...
- ListBox 如何改变某行的字体颜色
Option Explicit Private Type RECT Left As Long Top As Long Right As Long Bottom As Long End Type Pri ...
- (转)Android 自定义 spinner (背景、字体颜色)
Android 自定义 spinner (背景.字体颜色) (2012-07-04 17:04:44) 1.准备两张图片,并做好9.png 2.在drawable中定义spinner_sele ...
- 改变input的placeholder字体颜色
改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...
- MFC设置静态文本框,编辑框等控件背景和字体颜色
在MFC类库提供了CWnd::OnCtlColor函数,在工作框架的子窗口被重画时将调用该成员函数.因此可以重载WM_CTLCOLOR消息的响应函数.此函数的原型:afx_msg HBRUSH OnC ...
- 一个div里有多个a标签,改变a标签的字体颜色方法
<script type="text/javascript">var all=document.getElementById("big");var ...
- 改变textView的个别字体颜色
Spannable span = new SpannableString(getString(R.string.register_need_to_ageree));//例如:register_need ...
- wp8 入门到精通 Animation 背景加字体颜色从下向上变化颜色效果
<phone:PhoneApplicationPage.Resources> <Style x:Key="ButtonStyle1" TargetType=&qu ...
- Ext.grid.panel 改变某一行的字体颜色
grid.getStore().addListener('load', handleGridLoadEvent); function handleGridLoadEvent(store, record ...
随机推荐
- Visual Studio2015 Community一些必备插件
Visual Studio2015 Community一些必备插件 是不是感觉虽然VS2015的代码编辑能力已经很强大了,但是总感觉差了那么一些呢?不用担心,它有很多非常强大的插件,能够让你打代码事半 ...
- CI框架深入篇(2)一些基础的我之不知道的标准格式
1,一些命名规则:类文件名必大写,其他配置文件,视图文件或着脚本都要小写,类文件名和类名要一致!! 2,类名要大写开头,若是多个单词,那就下划线不要驼封法: 3,变量名要小写全,多个单词下划线分割,后 ...
- 不容错过的20段CSS代码
Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 分享20段非常专业的CSS2/CSS3 ...
- OUTPUT新增记录入库示例C#+存储过程
1.C#代码 public int Insert(Entity model) { var parameters = new SqlParameter[] { new SqlParameter(&quo ...
- 002_系统表查询(sysdatabases等)
002_系统表查询(sysdatabases等) --1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name --2.获取所有表 ...
- IOS静态库和Framework区别
一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系 ...
- PHP 类型比较表
以下的表格显示了 PHP 类型和比较运算符在松散和严格比较时的作用.该补充材料还和类型戏法的相关章节内容有关.同时,大量的用户注释和 » BlueShoes 的工作也给该材料提供了帮助. 在使用这些表 ...
- Struts2 手动验证
* 首先要从页面中获取对应的标签name属性的值,在动作类action中声明同名的属性,提供get和set方法 * 要继承ActionSupport类或者实现Validateable接口 ...
- javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数
javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...
- 删除Excel中的打印预览留下的打印线
Excel 工作表打印后,会留有几条虚线打印线.如下图所示: 不少同学反映,他们尝试了很多操作却仍然无法消除.难道除了重新打开就没有别的办法了? 可以这样做: 在 Excel 2010 中,单 ...