发表一个javascript美术馆的小案例

最新推荐文章于 2021-06-04 01:03:21 发布

原创最新推荐文章于 2021-06-04 01:03:21 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css js src html javascript

本文详细阐述了如何通过将JavaScript代码和CSS样式分别存放在不同文件中来优化网页交互体验，包括引入`scripts/showPic.js`和`styles/layout.css`文件，并解释了关键代码的作用及改进策略。

这个案例中将把相关的javascript和css样式都存放在不同的文件，便于管理。


     <html>
<head>
	<script src="scripts/showPic.js" type="text/javascript"></script>
	<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen"/>
	<style>

	</style>
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li><a href="images/fireworks.jpg" onclick="showPic(this);return false;" title="A fireworks display">Fireworks</a></li>

		<li><a href="images/coffee.jpg" onclick="showPic(this); return false;" title="A cup of blcak coffee">Coffee</a></li>

		<li><a href="images/rose.jpg" onclick="showPic(this); return false;" title="A red,red rose">Rose</a></li>

		<li><a href="images/bigben.jpg" onclick="showPic(this); return false;" title="the famous clock">Big Ben</a></li>
	</ul>
	<p id="description">Choose an image.</p>
	<img id="placehoder" width="500" src="images/bigben.jpg" alt="my image gallery"/>
</body>
</html>

以上代码有一点需要说明，onclick函数中有个return false;这是为了防止页面跳转到另外一个页面。

以下是相应的js代码：


    function showPic(whichpic){
		var source = whichpic.getAttribute("href");
		var placehoder = document.getElementById("placehoder");
		placehoder.setAttribute("src",source);
		var text = whichpic.getAttribute("title");
		var description = document.getElementById("description");
		description.firstChild.nodeValue=text;
}
function countBodyChildren(){
	var body_element = document.getElementsByTagName("body")[0];
	alert(body_element.nodeType);
}

css代码


  body{
	font-family:"Helvetica","Arial",sans-serif;
	color:#333;
	background-color:#ccc;
	margin:1em 10%;
}
h1{
	color:#333;
	background-color:transparent;
}
a{
	color:#c60;
	background-color:transparent;
	font-weight:bold;
	text-decoration:none;
}
ul{
	padding:0;
}
li{
	float:left;
	padding:1em;
	list-style:none;
}

[img]http://priv.hiphotos.baidu.com/album/s%3D1000%3Bq%3D90/sign=ce51d1eb251f95caa2f596b6f927444f/42166d224f4a20a41f78e85290529822730ed0c5.jpg?psign=12a01a48ab64034f256f7b1fafeab6500a55b319e9c43da8[/img]

大家可看到这个案例的不足之处？有三点：
1、预留退路，2、向后兼容3、分离javascript（在开发中我感觉3有可能比较注重）
改进后的代码在下载包中