<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"
????????"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
????<title>模仿短信對話</title>
????<meta?charset="utf-8">
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
????<style>
????????#div1?{
????????????width:?300px;
????????????height:300px;
????????????border:?1px?solid?red;
????????????position:?absolute;
????????}
????????#div2{
????????????width:?240px;
????????????height:?200px;
????????????border:1px?solid?black;
???????????padding:?10px;
????????margin:?10px?auto}
????????#div3{float:?left}
????????#button{height:?40px;width:?60px;
????????????margin-left:?20px}
????????#text{??????height:?40px;width:150px;line-height:?20px;
??????????????????????????margin-left:?40px}
????????#img1{height:?20px;width:?20px;border:?1px?solid?black;
????????}
????</style>
????<script>
????????window.onload=function?oo(){
????????????var?oDiv2=document.getElementById("div2");
????????????var?oBtn1=document.getElementById("button1");
????????????var?oText=document.getElementById("text");
????????????var?oImg=document.getElementById("img1");
????????????var?arrUrl=["img1.jpg","img2.jpg"]
????????????var?num=0
????????????????oBtn1.onclick=function(){
????????????????????num=0;
????????????????????oImg.src=arrUrl[num];
?????????????????oDiv2.innerHTML=oText.value;
????????????????????oText.value="";
????????????????}
????????}
????</script>
</head>
<body>
<div?id="div1">
????<div?id="div2">
????</div>
????<div?id="div3">
??????<img?id="img1">
????<input?id="text"?type="text">
????<input?id="button1"?type="button"?value="發(fā)送">
????</div>
</div>
</body>
</html>
2 回答
已采納
陳士愚
TA貢獻(xiàn)44條經(jīng)驗(yàn) 獲得超44個(gè)贊
?var?oImg?=?document.getElementById("img1");
????????var?arrUrl?=?["img1.jpg",?"img2.jpg"];
????????var?num?=?0;
????????oBtn1.onclick?=?function()?{
????????????num?=?0;
????????????oImg.src?=?arrUrl[num];
????????????oDiv2.innerHTML?=?oText.value;
????????????oText.value?=?"";
????????};? ? ? ?我摘出來的這段代碼，是你用來設(shè)置圖片的?？梢钥吹?strong>，你的html代碼中本身沒有為#img1設(shè)置src屬性，js代碼里也沒有初始化，只在#button1的點(diǎn)擊事件里設(shè)置了為圖片改變src屬性；所以頁面剛打開的時(shí)候，img1位置肯定是空白的；你的代碼邏輯和你標(biāo)題描述的現(xiàn)象是符合的。
? ? ? ?當(dāng)你點(diǎn)擊發(fā)送按鈕時(shí)，出發(fā)click事件，這時(shí)候?yàn)閛Img對象（即#img1）設(shè)置src屬性，并且因?yàn)槊看沃刂胣um=0，所以始終使用arrUrl[0]（img1.jpg）。
????????所以如果你的想法是默認(rèn)開始的時(shí)候顯示img2.jpg，當(dāng)點(diǎn)擊發(fā)送時(shí)顯示img1，那么可以這么寫：
????<script>
????window.onload?=?function?oo()?{
????????var?oDiv2?=?document.getElementById("div2");
????????var?oBtn1?=?document.getElementById("button1");
????????var?oText?=?document.getElementById("text");
????????var?oImg?=?document.getElementById("img1");
????????var?arrUrl?=?["img1.jpg",?"img2.jpg"];
????????var?num?=?1;
????????oImg.src?=?arrUrl[num];?//?默認(rèn)顯示img2.jpg，當(dāng)用戶點(diǎn)擊發(fā)送時(shí)，更換為img1.jpg
????????oBtn1.onclick?=?function()?{
????????????num?=?0;
????????????oImg.src?=?arrUrl[num];
????????????oDiv2.innerHTML?=?oText.value;
????????????oText.value?=?"";
????????};
????};
????</script>
添加回答
舉報(bào)
0/150
提交
取消