题目





分析

三个皮肤切换按钮的选择
  • 用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. python 中 \n 和转义r的作用和\r的实际应用

    我们先看看这张转义字符图: 1. 知识储备 \r 表示将光标的位置回退到本行的开头位置 \b 表示将光标的位置回退一位 在 python 语言中, 使用 print 打印输出时,默认是会进行换行的.如 ...

  2. Angular的生命周期钩子

    没有什么不能用一张图来解决.

  3. AngularJS $watch 监听

    监听$watch 监听数据变化,有三个参数 $scope.$watch(“监听的属性”,function(new,old){},true); 写true的时候可以监听一个对象里的多个数据变化,不写tr ...

  4. easyui汉化啊！

    <script type="text/javascript" src="__PUBLIC__/jquery-easyui-1.4.4/locale/easyui-l ...

  5. sqoop简单介绍

    一简介 Sqoop是一个用来将Hadoop和关系型数据库中的数据相互转移的工具,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的数据导进到Hadoop的HDFS ...

  6. 关于H5的自定义属性data-*

    data-* 是H5的新属性,用来让开发者对标签添加自定义属性的. 其读写方式有如下几种: 如果是 data-abc 的格式,则采用正常格式 abc 来读写该属性值 <div id=" ...

  7. 微信小程序——组件（一）

    接着之前讲解的基础内容,应该对小程序有了一点了解.想深入了解的话,需要自己实际操作一遍比较好.首先了解官方给的组件,API等这样等顺序来比较好一些.下面贴两张demo图,demo的项目结构是设置的两个 ...

  8. List 的 removeAll 方法的效率

    List 的 removeAll 方法的效率低的原因: 要遍历source,对dest进行contain操作,而contain又要遍历dest进行equal比较. 解决办法:dest转为set,用se ...

  9. 搞定INTEL快速存储技术（用SSD硬盘做缓存加速）

    给朋友买了个联想 ideapad s400超级本,还真是锻炼我的idea啊,原机不带WIN7系统,所以只好自己动手装WIN7,并打开24G SSD硬盘做缓存. 一.用常规方法GHOST了一个WIN7系 ...

  10. OC Nsstring的使用

    // // main.m // NSString // // Created by mj on 13-4-5. // Copyright (c) 2013年 itcast. All rights re ...