js變換顯示圖片的實(shí)例
開(kāi)始界面如圖：
<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();"/>賣(mài)萌的小狗
<input id="Radio3" name="dogandcat" type="radio" value="4" onclick="UpdateImg();"/>憤怒的小狗
<input id="Radio4" name="dogandcat" type="radio" value="6" onclick="UpdateImg();"/>可愛(ài)的小貓
</body>
下面是程序運(yùn)行時(shí)的界面：點(diǎn)擊不同的按鈕圖片是不一樣的
相關(guān)文章
javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致
javascript-TreeView父子聯(lián)動(dòng)效果保持節(jié)點(diǎn)狀態(tài)一致...2007-08-08
javascript計(jì)時(shí)器編寫(xiě)過(guò)程與實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了javascript計(jì)時(shí)器編寫(xiě)過(guò)程與實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）
這篇文章主要介紹了Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例,本文用了多個(gè)例子來(lái)講解arguments的使用,需要的朋友可以參考下2014-08-08
在javascript中允許使用嵌套函數(shù)，下面是簡(jiǎn)單的例子。2010-03-03
在JavaScript中,可以通過(guò)值和引用傳遞,兩者之間的主要區(qū)別是,按值傳遞發(fā)生在賦值基本類(lèi)型的時(shí)候,而賦值對(duì)象時(shí)按引用傳遞,下面這篇文章主要給大家介紹了關(guān)于JS中"值傳遞"和"引用傳遞"的相關(guān)資料,需要的朋友可以參考下2022-05-05
下面小編就為大家?guī)?lái)一篇JavaScript注入漏洞的原理及防范(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
追蹤discord.js中刪除消息的用戶方法實(shí)例詳解
這篇文章主要為大家介紹了如何追蹤discord.js中刪除消息的用戶方法實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
firefox下input type="file"的size是多大
firefox對(duì)type="file" 的input的width定義目前是不支持的，但是FF支持size屬性，可以給size設(shè)置一個(gè)值，來(lái)控制上傳框的大小2011-10-10
微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息
本文通過(guò)實(shí)例代碼給大家介紹了微信小程序的注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-05-05