题目





分析

三个皮肤切换按钮的选择
  • 用li即可。
点击显示白点
  • li中嵌套一个li，onclick时改变子元素li的css
onload

当页面加载完成后立即执行一段JavaScript代码。

onload 属性在对象已加载时触发。

onload 常用在"body"中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。

在 HTML 中:

<body onload="SomeJavaScriptCode">

在 JavaScript 中:

window.onload=function(){SomeJavaScriptCode};

总结

在怎么显示三个并排的换肤按钮和点击显示白点这两块纠结很久，一方面想要更优雅的实现不想用嵌套div，一方面又想学习小练习1中的循环遍历思想，所以花了很久时间。其实思路很清晰，自己能力还是需要大大加强，多练习。

疑问

这里的onload不是很明白，代码中去掉onload显示是正常的，不知道这里的onload是否可有可无？

代码

效果：网页换肤

<!DOCTYPE html>

<html>

<head>

	<title>网页换肤</title>

	<link rel="shortcut icon" href="../icons/project.jpg">

	<style type="text/css">

		body {

			background-color: rgb(255, 221, 221);

		}

		.main {

			width: 500px;

			margin: 0 auto;

		}

		button {

			width: 12px;

			height: 12px;

			margin: 2px;

			padding: 0;

			outline: none;

			border: 0;

			text-align: center;

		}

		#red {

			background-color: red;

		}

		#green {

			background-color: green;

		}

		#black {

			background-color: black;

		}

		#content {

			margin-top: 5px;

			text-align: center;

			border-collapse: collapse;

			background-color: red;

		}

		#content td {

			width: 600px;

			height: 23px;

			border: 1px solid white;

			font-size: small;

			color: white;

		}

		td:hover {

			text-decoration: underline;

			cursor: pointer;

		}

		li {

			width: 4px;

			height: 4px;

			background-color: white;

			list-style-type: none;

			margin-left: 4px;

			display: none;

		}

	</style>

</head>

<body>

	<div class="main">

		<button id="red" title="红色" class="current"><li></li></button>

		<button id="green" title="绿色" ><li></li></button>

		<button id="black" title="黑色"><li></li></button>

		<table id="content">

			<tr>

				<td>新闻</td>

				<td>娱乐</td>

				<td>体育</td>

				<td>电影</td>

				<td>音乐</td>

				<td>旅游</td>

			</tr>

		</table>

		<p id="demotest"></p>

	</div>

	<script>

		var setTacolor = function(ccolor) {

			var ta = document.getElementById("content");

			ta.style.backgroundColor = ccolor;

		}

		var setBacolor = function(ccolor) {

			document.body.style.backgroundColor = ccolor;

		}

		var oTa = document.getElementById("content");

		var baColor = ["rgb(255, 221, 221)", "rgb(163, 197, 168)", "rgb(204, 204, 204)"]

		;

		var taColor = ["red", "green", "black"];

		var oBtn = document.getElementsByTagName("button");

		var oLi = document.getElementsByTagName("li");

		window.onload = function() {

			for(var i = 0; i < oBtn.length; ++ i) {

				oBtn[i].index = i;

				oBtn[i].onclick = function() {

					for(var j = 0; j < oBtn.length; ++ j) {

						j != this.index && (oLi[j].style.display = "none");

					}

					oLi[this.index].style.display = "block";

					setTacolor(taColor[this.index]);

					setBacolor(baColor[this.index]);

				}

			}

		}

	</script>

</body>

</html>

JavaScript小练习2-网页换肤的更多相关文章

  1. JavaScript网页换肤

    使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...

  2. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  3. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  4. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  5. 网页换肤,模块换肤,jQuery的Cookie插件使用（转）

    具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...

  6. 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

  7. JavaScript实现网页换肤

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  8. 网上找到的一个jquery版网页换肤特效

    这个跟我之前在锋利的JQuery那本书里看到的那个一模一样. <!DOCTYPE html> <html> <head> <meta name="& ...

  9. css, js 项目练习之网页换肤

    首先,该练习参考自:https://www.jianshu.com/p/2961d9c317a3 我就直接上代码了(颜色可以自己调). HTML: <nav> <li>< ...

随机推荐

  1. webapi datetime类型序列化成json带T且时间不对问题的解决

    在global.asax.cs里加入如下代码: protected void Application_Start() { GlobalConfiguration.Configuration.Forma ...

  2. Linux下mongodb

    Linux下mongodb安装: 新建mongodb文件夹 下载安装包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3. ...

  3. CentOS 7运维管理笔记(3)----Linux路由器配置

    当正在配置的Linux主机需要作为路由器使用时,通过以下步骤配置后,子网上的计算机就可以访问外网了: 1. 编辑 /etc/sysctl.conf 文件,添加 net.ipv4_ip_forward ...

  4. Codeforces(Round #93) 126 B. Password

    B. Password time limit per test  2 seconds memory limit per test  256 megabytes   Asterix, Obelix an ...

  5. C# 使用Guid类生成不重复的随机数

    什么是Guid GUID(全局唯一标识符)         全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID ...

  6. Opencv2.4.13与Visual Studio2013环境搭建配置教程

    转载:http://www.jb51.net/article/108943.htm 一.安装包的下载与安装 Opencv可免费到官网上去下载,opencv是国外软件,在下载是由于受资源的限制,可能会出 ...

  7. Windows 实用小工具

    超实用的Windows工具 ====================================================================================== ...

  8. UEditor 中配置可以跨域访问的图片路径

    文档里很清楚:http://fex.baidu.com/ueditor/#server-path 进入配置文件 当域名不是直接配置到项目根目录时,例:http://a.com/b/c  域名下有两文件 ...

  9. IntelliJ IDEA 运行你的第一个Java应用程序

    IntelliJ IDEA 运行你的第一个Java应用程序创建项目让我们创建一个简单的Java Hello World项目. 单击创建新的项目. 打开新建项目向导.你应该注意的主要是项目的SDK.SD ...

  10. Redis客户端 Spring Data Redis（未完）

    官网:http://projects.spring.io/spring-data-redis/ 1.0  参考之前的一片文章:Gradle入门实战(Windows版) 构建java applicati ...