js变换显示图片的实例


Posted in Javascript onApril 16, 2013

开始界面如图:
js变换显示图片的实例

<head>
    <title></title>
   <script type="text/javascript">
       function UpdateImg() {
           //document.getElementById('img1').setAttribute('src', 'images/2.jpg');
           var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮
           for (var i = 0; i < dogandcat.length; i++) {
               if (dogandcat[i].checked == true) {
                   var value = dogandcat[i].getAttribute('value');
                   switch (value) {
                       case '2':
                           document.getElementById('img1').setAttribute('src', 'images/2.jpg');
                           break;
                       case '3':
                           document.getElementById('img1').setAttribute('src', 'images/3.jpg');
                           break;
                       case '4':
                           document.getElementById('img1').setAttribute('src', 'images/4.jpg');
                           break;
                       case '6':
                           document.getElementById('img1').setAttribute('src', 'images/6.jpg');
                           break;
                   }
               }
           }
       }
    </script>
</head>
<body>
 <img id="img1" src="images/9.jpg" width="200px" height="200px" />
    <br />
    <input type="button"  value="改变图片" onclick="UpdateImg();" />
    <br />
    <input id="Radio1" name="dogandcat" type="radio" value="2" onclick="UpdateImg();"  />忧伤的小狗
    <input id="Radio2" name="dogandcat" type="radio" value="3" onclick="UpdateImg();"/>卖萌的小狗
    <input id="Radio3" name="dogandcat" type="radio" value="4" onclick="UpdateImg();"/>愤怒的小狗
    <input id="Radio4" name="dogandcat" type="radio" value="6" onclick="UpdateImg();"/>可爱的小猫
</body>
下面是程序运行时的界面:点击不同的按钮图片是不一样的

 

js变换显示图片的实例

js变换显示图片的实例

Javascript 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
JavaScript对象学习小结
Sep 02 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
js中 关于undefined和null的区别介绍
Apr 16 #Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 #Javascript
用js实现trim()的解决办法
Apr 16 #Javascript
You might like
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php whois查询API制作方法
2011/06/23 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JS数据类型STRING使用实例解析
2019/12/18 Javascript
python3利用tcp实现文件夹远程传输
2018/07/28 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python实现Dijkstra算法
2018/10/17 Python
python制作图片缩略图
2019/04/30 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
质量承诺书格式
2014/05/20 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
工作求职信
2014/07/04 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
学生会辞职信
2015/03/02 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL