编程 Javascript

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变换显示图片的实例

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

页面右下角弹出提示框示例代码js版

Aug 02 Javascript

js中关于一个分号的崩溃示例

Nov 11 Javascript

基于JavaScript实现生成名片、链接等二维码

Sep 20 Javascript

jQuery Validate表单验证深入学习

Dec 18 Javascript

JavaScript中用let语句声明作用域的用法讲解

May 20 Javascript

深入理解jquery自定义动画animate()

May 24 Javascript

fullCalendar中文API官方文档

Feb 07 Javascript

vue2笔记 — vue-router路由懒加载的实现

Mar 03 Javascript

JS实现动态添加DOM节点和事件的方法示例

Apr 28 Javascript

Vue中的vue-resource示例详解

Nov 02 Javascript

js常见遍历操作小结

Jun 06 Javascript

微信小程序实现页面监听自定义组件的触发事件

Nov 01 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