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 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
angular实现商品筛选功能
Feb 01 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP实现文件下载详解
2014/11/27 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python多进程操作实例
2014/11/21 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
小学教师听课制度
2014/02/01 职场文书
节约电力资源的建议书
2014/03/12 职场文书
出纳员岗位职责
2014/03/13 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
红色影片观后感
2015/06/18 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL