這次帶給大家Js經典案例程式碼解析，Js經典案例程式碼解析的注意事項有哪些，下面就是實戰案例，一起來看一下。
滑鼠懸停切換圖片：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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顯示天氣預報：
1 2 3 4 5 6 7 8 9 10 11 | <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利用焦點實作選擇網站：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <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>
|
登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
React路由管理React Router使用步驟詳解
ionic實作下拉刷新功能步驟詳解
以上是Js經典案例程式碼解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
