Js经典案例代码解析

来源：途锐财经网

这次给大家带来Js经典案例代码解析，Js经典案例代码解析的注意事项有哪些，下面就是实战案例，一起来看一下。

鼠标悬停切换图片：

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById('b1').src ="diaochan.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="noimage.gif"
}
</script>
</head>
<body>
<a href="#" 
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="noimage.gif" id="b1" onmouseover="alert('你的鼠标在图片上！')")/>
</a>
</body>
</html>

js显示天气预报：

<html>
<head><title></title>
<script type="text/javascript">
</script>
</head>
<body >
<p>
<iframe src="http://m.weather.com.cn/m/pn11/weather.htm" width="480" height="70" frameborder="1"></iframe>
</p>
</body>
</html>

js利用焦点实现选择网站：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 var i = 1;
 var focusid;
 function defau() {
 document.getElementById('1').focus();
 focusid=1;
 }
 function showtable() {
 var id = i + 1;
 document.getElementById(id).focus();
 focusid=id;
 i++;
 if (i == 4) {
 i = 0;
 }
 }
 function openhref() {
 var href = document.getElementById(focusid).href;
 document.location = href;
 }
 </script>
</head>
<body onload="defau()">
<a href="http://www.baidu.com/" id="1">百度</a>
<a href="http://www.google.com.hk/" id="2">谷歌</a>
<a href="http://www.youku.com/" id="3">优酷</a>
<a href="http://www.tudou.com/" id="4">土豆</a>
 <input id="Button1" type="button" value="选择" onclick="showtable()" /><br />
 <input id="Button2" type="button" value="进入" onclick="openhref()" />
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！