题目





分析

三个皮肤切换按钮的选择
  • 用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. CSS3及JS简单实现选项卡效果（适配手机端和pc端）

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  2. File中mkdir()和mkdirs()的区别

    mkdir() 创建此抽象路径名指定的目录.只能在已经存在的目录中创建文件夹 如: File folder = new File("d:\\test1\\test2"); fold ...

  3. 使用qt帮助 查看样式表stylesheet的帮助文档

    QCreactor帮助文档中搜索的关键字 Qt Style Sheets Examples        有所有控件的样式例子 Qt Style Sheets Reference      控件的所有 ...

  4. python SQLAchemy常用语法

    SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取执行结果. ...

  5. mongodb学习总结

    安装mongodb: 1.下载服务器最新稳定版本(选择偶数号的版本号),mongodb的版本管理偶数号为稳定版,奇数号为开发版. 2.安装时默认安装在c盘,可以选择自定义选项来改变安装路径. 3.安装 ...

  6. 从传输流收到意外的 EOF 或 0 个字节

    /// <summary> /// 发送POST请求 /// </summary> /// <param name="json"></pa ...

  7. CASE表达式

    一.简介 官方定义CASE是一种表达式,它基于某种格式,按照格式去编写表达式,其中表达式的逻辑是:指定特定的值与条件列表去匹配,返回对应的值. CASE表达式类似我们编程语言中的 if else 和 ...

  8. 不规矩的xml与JAVA对象互相转换的小技巧-使用Marshaller

    摘要:将XML文档与JAVA对象互转是很常见的需求,如果XML定义很规整这很好实现.然而在现实中“不规矩”的XML可能更常见,Marshaller便无能为力了吗?下面是一个小技巧,调整一下思维便能重用 ...

  9. Dispatch groups 与任务同步

    https://developer.apple.com/library/content/documentation/General/Conceptual/ConcurrencyProgrammingG ...

  10. UVa 1608 - Non-boring sequences

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...