js原生学习-初级-练习06

来源：互联网发布：注册cn域名需要什么编辑：程序博客网时间：2024/06/06 20:51
js原生学习-初级-练习06
模拟手机短信发送模拟手机短信发送
发送
*{margin: 0;padding: 0;}h3{text-align: center;margin-top: 30px}#wrap{width: 320px;height: 500px;margin: 20px auto;border: 2px solid #333;border-radius: 10px;overflow: hidden;box-shadow: 0 0 20px rgba(0,0,0,0.8);}#box{width: 300px;height: 430px;padding: 10px;overflow-y: scroll;}#bottom{width: 100%;height: 50px;border-top: 1px solid #ccc;}#img1{display: block;width: 30px;height: 30px;overflow: hidden;margin: 10px;float: left;border: 1px solid #ccc;}#text1{width: 200px;height: 30px;line-height: 30px;display: block;margin: 10px 10px 0 0;float: left;text-indent: 5px;}#btn1{display: block;width: 50px;height: 30px;line-height: 30px;margin-top: 10px;float: left;background: #ccc;text-align: center;color: #fff;text-decoration: none;font-size: 14px;}#fl{float: left;clear: both;margin-top: 10px;}#fr{float: right;clear: both;margin-top: 10px;}#img2, #img3{display: block;width: 30px;height: 30px;overflow: hidden;border: 1px solid #ccc;}#img2{float: left;margin-right: 10px;}#span1,#span2{line-height: 20px;display: block;background: #ccc;border-radius: 5px;padding: 5px;max-width: 180px;}#span1{float: left;}#img3{float: right;margin-left: 10px;}#span2{float: right;}window.onload = function(){// 获取元素var oBox = document.getElementById('box');var oFl = document.getElementById('fl');var oFr = document.getElementById('fr');var oImg = document.getElementById('img1');var oText = document.getElementById('text1');var oBtn = document.getElementById('btn1');// 初始化var arrSrc = ['img/5.jpg','img/6.jpg'];var num = 0;var onOff = true;// 切换头像oImg.onclick = function(){num++;if (num == arrSrc.length) {num = 0;}oImg.src = arrSrc[num];if (num == 0) {onOff = true;}else{onOff = false;}};// 点击发送消息oBtn.onclick = function(){if (oText.value == '') {alert('发送消息不能为空！');}else{if (onOff) {oBox.innerHTML = '' + '' + '' + oText.value + '' + '
' + oBox.innerHTML;oText.value =''}else{oBox.innerHTML = '' + '' + '' + oText.value + '' + '
' + oBox.innerHTML;oText.value = '';}}};}
阅读全文
0 0