Js经典案例的实例代码


Posted in Javascript onMay 10, 2018

本文讲述了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>

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

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 #Javascript
vuex与组件联合使用的方法
May 10 #Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 #Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 #Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 #Javascript
vue计算属性和监听器实例解析
May 10 #Javascript
js正则相关知识点专题
May 10 #Javascript
You might like
PHP的栏目导航程序
2006/10/09 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python中的__slots__使用示例
2015/02/26 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
Python 多进程原理及实现
2020/12/21 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Ejb技术面试题
2015/04/29 面试题
简短证婚人证婚词
2014/01/09 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
师德承诺书2015
2015/04/28 职场文书