题目





分析

三个皮肤切换按钮的选择
  • 用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. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  2. Java的Final和C#的Const,Readonly比较分析（转载）

    Java里面没有readonly关键字,预留了const的关键字,目前还没有实际用途,在Java中,跟这两个关键字比较接近的是final; C#中,两者都存在并可用.两者修饰的全局变量或局部变量都不能 ...

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

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

  4. easyui的解析器Parser

    平时使用easyui做框架开发时,都知道easyui的模块组件能通过属性方法或js方法来渲染,本质上是通过parser解析器来处理实现的,因为多数情况下都是自动触发完成整个页面的解析,所以没有感觉到它 ...

  5. 爬虫入门之Scrapy框架基础框架结构及腾讯爬取(十)

    Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据. 如果安装了 IPyth ...

  6. 关于windows server 里Let's Encrypt续订的问题

    引言 Let's Encrypt是什么就不详细说了,它是免费的https证书,优点就是免费,缺点就是每三个月就要自己续上.今天主要介绍的是续上有效期的环节. 1.安装certify 下载地址: htt ...

  7. v1.0.2-2017.04.26

    v1.0.2-2017.04.26 增加支付宝.微信查询接口 增加订单轮询工程 增加网关下单后发起订单轮询业务流程 v1.0.1-2017.04.05 修复分页乱码bug 增加支付密码字段.商户服务器 ...

  8. centos7 nginx访问目录403解决

    查看  /usr/sbin/sestatusSELinux status是不是enabled  然后 vi /etc/selinux/config修改:SELINUX=disabledreboot

  9. WBS 工作分解结构

    WBS:工作分解结构(Work Breakdown Structure) 创建WBS:创建WBS是把项目 交付成果和项目工作分解成较小的,更易于管理的组成部分的过程. 主要用途WBS是一个描述思路的规 ...

  10. Zabbix监控mysql主从状态并实现报警

    一.环境需求 主机A: zabbix-server 主机B: zabbix-agent/mysql从 二.主机B操作 1.添加监控脚本 vim /data/zabbix/mysql_slave_che ...