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中使用setInterval和setTimeout的方法
Apr 08 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
在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
用PHP实现文件上传二法
2006/10/09 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python正则表达式知识汇总
2017/09/22 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
优秀英语专业毕业生求职信
2013/11/23 职场文书
网络营销策划方案
2014/06/04 职场文书
捐款活动总结
2014/08/27 职场文书
教师节标语大全
2014/10/07 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python