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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
VUE长按事件需求详解
Oct 18 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
小程序中this.setData的使用和注意事项
Aug 28 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
简介JavaScript错误处理机制
Aug 04 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python 文件数据读写的具体实现
2020/01/24 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
python 图像增强算法实现详解
2021/01/24 Python
Python datetime模块的使用示例
2021/02/02 Python
教师党员承诺书
2014/03/25 职场文书
总经理检讨书
2014/09/15 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL