Js经典案例的实例代码

2019-11-19 13:52:50

字体：大中小

来源：转载

供稿：网友

本文讲述了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 ><div><iframe src="http://m.weather.com.cn/m/pn11/weather.htm" width="480" height="70" frameborder="1"></iframe></div></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>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：浅谈node.js 命令行工具(cli)

下一篇：Vue使用vux-ui自定义表单验证遇到的问题及解决方法