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 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
node.js超时timeout详解
Nov 26 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
javascript版2048小游戏
Mar 18 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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/12/06 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python应用库大全总结
2018/05/30 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
40岁生日感言
2014/02/15 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
先进人物事迹材料
2014/12/29 职场文书
党支部意见范文
2015/06/02 职场文书
教师师德承诺书2016
2016/03/25 职场文书