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】轻易改变的背景和字体颜色页面的更多相关文章

  1. phpstorm调整背景、字体颜色

    从这个网站(http://phpstorm-themes.com/)下载各类主题的xml文件, 然后将文件放到phpStorm的文件夹中,比如:C:\Users\USERNAME\.PhpStorm2 ...

  2. ListBox 如何改变某行的字体颜色

    Option Explicit Private Type RECT Left As Long Top As Long Right As Long Bottom As Long End Type Pri ...

  3. (转)Android 自定义 spinner (背景、字体颜色)

    Android 自定义 spinner (背景.字体颜色) (2012-07-04 17:04:44)   1.准备两张图片,并做好9.png   2.在drawable中定义spinner_sele ...

  4. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  5. MFC设置静态文本框，编辑框等控件背景和字体颜色

    在MFC类库提供了CWnd::OnCtlColor函数,在工作框架的子窗口被重画时将调用该成员函数.因此可以重载WM_CTLCOLOR消息的响应函数.此函数的原型:afx_msg HBRUSH OnC ...

  6. 一个div里有多个a标签，改变a标签的字体颜色方法

    <script type="text/javascript">var all=document.getElementById("big");var ...

  7. 改变textView的个别字体颜色

    Spannable span = new SpannableString(getString(R.string.register_need_to_ageree));//例如:register_need ...

  8. wp8 入门到精通 Animation 背景加字体颜色从下向上变化颜色效果

    <phone:PhoneApplicationPage.Resources> <Style x:Key="ButtonStyle1" TargetType=&qu ...

  9. Ext.grid.panel 改变某一行的字体颜色

    grid.getStore().addListener('load', handleGridLoadEvent); function handleGridLoadEvent(store, record ...

随机推荐

  1. springxml配置构造函数入参

    springxml配置构造函数入参有深入的理解 集合mockito创建对象的方法.功能等同于创建对象的代码. spring配置文件中定义bean的好处 便于集中管理,系统任何地方都可以引用使用.如果不 ...

  2. maven的pom.xml深入理解

    maven的pom.xml的具体使用和各个xml标签的作用.这样设计的原理是什么? maven实战的第17章-18章是架构方面的知识

  3. GridView and DropDownList

    <form id="form1" runat="server"> <div> <asp:GridView runat=" ...

  4. 在SPItemEventReceiver中使用BeforeProperties和AfterProperties

    当你利用这些事件时,就很快会发现存在前(同步)后(异步)两种事件.其方法的后缀分别为“ing”(比如,ItemAdding)和“ed”(比如,ItemAdded),分别代表了变更发生前调用和发生后调用 ...

  5. MSSQL 简单练习回顾

    这段时间,报了浦软培训的.NET,现在整理回顾下,算是个小小总结吧 为了便于操作,我没有在多个数据库间切换数据库实例,以一个总的数据库实例 test_demo为源进行的相关操作,代码的注释根据我的理解 ...

  6. linux 分区

    1.硬盘分区分为基本分区和扩展分区, 扩展分区分下去就是逻辑分区,而且逻辑分区没有数量上的限制. 2.查看linux系统分区具体情况 fdisk - l 3.查看某个目录是哪个分区下的 df /boo ...

  7. Install FFmpeg, Mplayer, Mencoder, MP4Box, Flvtool2

    You can use the following tutorial to install ffmpeg and other video modules in your centos server.F ...

  8. 游戏算法中lua脚本详解

    此外,函数本身也是一个变量,比如: dp@dp:~ % cat test.lua local mylen={} mylen.len3=function (x,y,z) return math.sqrt ...

  9. JBPM4.4GPD设计器中文乱码问题的另一种解决方法

    在eclipse中使用JBPM4.4的设计器时,输入中文后直接查看Source发现xml里中文全都乱码了,这时候大约整个人都不好了!赶紧百度.谷歌,搜到的多数结果都是要你在eclipse.ini或my ...

  10. twsited(5)--不同模块用rabbitmq传递消息

    上一章,我们讲到,用redis共享数据,以及用redis中的队列来实现一个简单的消息传递.其实在真实的过程中,不应该用redis来传递,最好用专业的消息队列,我们python中,用到最广泛的就是rab ...