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 高级语法介绍
Jun 15 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
JS同步、异步、延迟加载的方法
May 05 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
vue路由的配置和页面切换详解
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 Memcache 中实现消息队列
2009/11/24 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
项目申报专员岗位职责
2014/07/09 职场文书
委托书的格式
2014/08/01 职场文书
创新社会管理心得体会
2014/09/12 职场文书
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python