题目





分析

三个皮肤切换按钮的选择
  • 用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. 牛顿迭代，多项式求逆，除法，开方，exp，ln，求幂

    牛顿迭代 若 \[G(F_0(x))\equiv 0(mod\ x^{2^t})\] 牛顿迭代 \[F(x)\equiv F_0(x)-\frac{G(F_0(x))}{G'(F_0(x))}(mod ...

  2. 洛谷P2831 愤怒的小鸟(状压dp)

    题意 题目链接 Sol 这题....我样例没过就A了??..算了,就当是样例卡精度吧.. 直接状压dp一下,\(f[sta]\)表示干掉\(sta\)这个集合里面的鸟的最小操作数 转移的时候判断一下一 ...

  3. Revit

    log file Windows Vista or Windows 7:%LOCALAPPDATA%\Autodesk\Revit\Autodesk Revit 2016\Journals

  4. 【JAVA语法】01Java-变量与数据类型

    数据类型初阶 基本数据类型的包装类 整数类型&浮点类型&字符类型 大小类型转换 通过Scanner从控制台获取数据 变量相关基础算法 Java的错误类型 字符串String 补充-Pa ...

  5. Element和vue框架报错提示

    上面报错提示Error in render function: "TypeError:Cannot read property '$options' of undefined" 就 ...

  6. sql server——分组查询(方法和思想)

    思想 先排序在汇总 sql server里分组查询通常用于配合聚合函数,达到分类汇总统计的信息.而其分类汇总的本质实际上就是先将信息排序,排序后相同类别的信息会聚在一起,然后通过需求进行统计计算. 使 ...

  7. 【Leetcode】【Medium】Path Sum II

    Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

  8. Hyper-V复制

    Hyper-V复制: 默认HV01上的所有虚机都被复制到HV02的 Hyper-V Replica 目录下.虚机启用复制后,当需要启用虚机副本时,要先在HV01上把原虚机关机,然后在HV02上选择故障 ...

  9. xalan\xalan\2.7.2\xercesImpl.jar (系统找不到指定的文件）问题

    本文转自:http://blog.csdn.net/lveliu/article/details/77772828 环境搭建为:maven+tomcat tomcat 8.5.2 以上会出现改问题(包 ...

  10. ADF中VO的查询方法比较

    getRowCount(),getQueryHitCount(oracle.jbo.server.ViewRowSetImpl),getEstimatedRangePageCount,getCappe ...