【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 ...
随机推荐
- Hyper-V的三种网卡
External ======= 虚拟机和物理网络.本地主机都能通信 Internal ======= 虚拟机之间互相通信,并且虚拟机能和本机通信 Private ======= 仅允许运行在这台物理 ...
- HTML5 学习
1.<header> 标签定义文档的页眉(介绍信息) 标签是 HTML 5 中的新标签 <header> <h1>Welcome to my homepage< ...
- Win7系统安装MySQL
最近重装系统,重新搭建编译环境:重装mysql,发现一篇特别好的安装博客(http://blog.csdn.net/longyuhome/article/details/7913375),转载过来,留 ...
- java之NIO编程
所谓行文如编程,随笔好比java文件,文章好比类,参考文献是import,那么目录就是方法定义. 本篇文章处在分析thrift的nonblocking server之前,因为后者要依赖该篇文章的知识. ...
- zepto源码研究 - zepto.js - 6(模板方法)
width height 模板方法 读写width/height ['width', 'height'].forEach(function(dimension){ //将width,hegih ...
- Vigenère Cipher 维吉尼亚加解密算法
维吉尼亚的加解密有两种方法. 第一种是查表:第一行为明文,第一列为密钥,剩余的为对应的密文 第二种方法是转化计算法:逐个将字符转化为从零开始的数字,对数字进行加密/解密后,再转化为字符. 本文要用c+ ...
- nginx_笔记分享_配置篇
参考http://www.howtocn.org/nginx:directiveindexhttp://blog.s135.com/ nginx 配置文档为 nginx.conf 比如我的配置文档 / ...
- 在线编辑器kindEditor
操作文档:http://kindeditor.net/doc.php 文件下载
- github 提交时候提示 org.eclipse.jgit.errors.ObjectWritingException: Unable to create new object: /usr/local/apache243/ht
只需要执行 chmod -R 777 ./* 把 .git文件权限设置为 777便可以实现.
- C#中的委托和事件2-1(转)
PDF 浏览:http://www.tracefact.net/Document/Delegates-and-Events-in-CSharp.pdf引言 委托 和 事件在 .Net Framew ...