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. 执行CMD命令

    可以执行多条命令,用“\r\n”分割 using System; using System.Diagnostics; namespace Tool { public class CMDHelper { ...

  2. Regex.Escape

    C# 字符串变量str 的值为"a\nb"如果直接输出显示的话,就成了:ab需要输出显示为:a\nb问,怎么办?千万别告诉我定义: str=@"a\nb",因为 ...

  3. MyEclipse内存不足的问题

    今早打开MyEclipse莫名其妙弹出提示框,然后我各种搜索,用了网上能查到的各种办法去试图解决问题,方法包括但不限于  修改eclipse.ini .设置Default VM Arguments . ...

  4. C# 导出word文档及批量导出word文档（3）

    在初始化WordHelper时,要获取模板的相对路径.获取文档的相对路径多个地方要用到,比如批量导出时要先保存文件到指定路径下,再压缩打包下载,所以专门写了个关于获取文档的相对路径的类. #regio ...

  5. HashMap工作原理

    hashmap存储的为key-value键值对,get的时间复杂度是O(1),具体实现原理如下: 1. hashmap是基于数组之上,通过一定算法,用空间转换时间 2. hashmap的数据结构为数组 ...

  6. jq 事件冒泡总结

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  7. 复制、移动和删除：cp, rm, mv

    要复制文件,请使用cp(copy)命令.不过,cp命令的用途很多.除了单纯的复制之外,还可以建立连接文件(就是快捷方式),比较两个文件的新旧而予以更新,以及复制整个目录等等.至于移动目录与文件,则使用 ...

  8. phpcms v9 二次开发 - 自己添加源文件

    一.在根目录添加入口文件, 我现在要在根目录添加一个文件名为test.php 这样一个文件,为了调用系统的公用类和函数,必须加入一下包含文件 test.php代码如下 <?phpdefine(' ...

  9. phpmyadmin密码字段加密方法

    UPDATE member SET password=md5('password')

  10. js console.log 打印 对像 数组 详解

    console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个 ...