javascript基础——图片切换以及模拟短信发送
DEMO1：两张图片来回切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS点击两张图片来回切换</title> <script> window.onload = function(){ // 获取元素 var oImg = document.getElementById('img1'); // 定义一个自定义开关 默认为true var onOff = true; oImg.onclick = function(){ if(onOff){ oImg.src = 'img/2.jpg'; }else{ oImg.src = 'img/1.jpg'; } // 取反 onOff = !onOff; }; }; </script> </head> <body> <img id="img1" src="img/1.jpg" /> </body> </html>
DEMO2：点击图片，循环切换（多张）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击图片循环切换——多张</title> <script> window.onload = function(){ // 获取相关元素 var oImg = document.getElementById('img1'); var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']; var num = 0; oImg.onclick = function(){ num ++; if(num == arr.length){ num = 0; } oImg.src = arr[num]; }; }; </script> </head> <body> <img id="img1" src = 'img/1.jpg' /> </body> </html>
DEMO3：点击按钮图片切换综合实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { text-align:center; } p { margin:0; } #box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; background: url(img/loading.gif) center center no-repeat; } a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; } a:hover { filter:alpha(opacity:30); opacity:0.3; } #prev { left:10px; } #next { right:10px; } #p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; } strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; } #img1 { width:400px; height:400px; } span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:'微软雅黑'; } </style> <script> window.onload = function(){ // 获取相关元素 var oPrev = document.getElementById('prev'); var oNext = document.getElementById('next'); var oStrong = document.getElementById('strong1'); var oP = document.getElementById('p1'); var oImg = document.getElementById('img1'); var aBtn = document.getElementsByTagName('input'); var oSpan = document.getElementById('span1'); var arrUrl = ['img/1.jpg' ,'img/2.jpg' ,'img/3.jpg' ,'img/4.jpg' ,'img/5.jpg']; var arrText = ['图片一','图片二','图片三','图片四','图片五']; var num = 0; var onOff = true; // 初始化 function init(){ oStrong.innerHTML = num+1 +'/'+ arrText.length; oImg.src = arrUrl[num]; oP.innerHTML = arrText[num]; }; init(); // 向左切换 oPrev.onclick = function(){ num--; if(num == -1){ if(onOff){ num = arrUrl.length-1; }else{ alert('已经到第一张了！'); num = 0; } } init(); }; // 向右切换 oNext.onclick = function(){ num++; if(num == arrUrl.length){ if(onOff){ num = 0; }else{ alert('已经到最后一张了！'); num = arrUrl.length-1; } } init(); }; // 循环切换 aBtn[0].onclick = function(){ onOff = true; oSpan.innerHTML = '图片可以从最后一张跳转到第一张循环切换'; }; // 顺序切换 aBtn[1].onclick = function(){ onOff = false; oSpan.innerHTML = '图片只能到最后一张或只能到第一张'; }; }; </script> </head> <body> <input type="button" value="循环切换" /> <input type="button" value="顺序切换" /> <div id="box"> <span id="span1">图片可以从最后一张跳转到第一张循环切换</span> <a href="javascript:;" id="prev"><</a> <a href="javascript:;" id="next">></a> <strong id="strong1">图片数量计算中...</strong> <p id="p1">图片文字加载中...</p> <img id="img1" /> </div> </body> </html>
综合实例二：模拟短信发送
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟手机发短信</title> <style> #box{ width:320px; height:400px; border:10px solid #ccc; margin:0 auto;} #div1{ width:320px; height:370px; background:#fafafa; overflow:auto;} img{ width:24px; height:24px;} p{ position:relative; margin:0 0 5px 0; word-break:break-all; word-wrap:break-word; overflow:hidden;} p img{ position:absolute; top:0;} .left{ padding-left:30px;} .right{ padding-right:30px;} .left img{ left:0;} .right img{ right:0;} .left span{ float:left; padding:5px; background:#FFC;} .right span{ float:right; padding:5px; background:#FCF;} </style> <script> window.onload = function(){ // 获取元素 var oDiv = document.getElementById('div1'); var oImg = document.getElementById('img1'); var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn1'); var onOff = true; // 小头像切换 oImg.onclick = function(){ if(onOff){ oImg.src = 'img/2.jpg'; }else{ oImg.src = 'img/1.jpg'; } onOff = !onOff; }; // 发送信息 oBtn.onclick = function(){ var sClass = 'left'; if(onOff){ sClass = 'left'; }else{ sClass = 'right'; } oDiv.innerHTML = '<p class=" '+sClass+' ">' + '<img src=" '+oImg.src+' ">' + '<span>' +oText.value+ '</span>' + '</p>' + oDiv.innerHTML; oText.value = ''; }; }; </script> </head> <body> <div id="box"> <div id="div1"> <!-- <p class="left"> <img src="img/1.jpg"> <span>文字1~~~</span> </p> <p class="right"> <img src="img/2.jpg"> <span>文字2~~~</span> </p> --> </div> <img src="img/1.jpg" alt="" id="img1"> <input type="text" name="" id="text1"> <input type="button" value="发送" id="btn1"> </div> </body> </html>
