模仿短信發送

時間 2019-12-20
標籤模仿短信發送简体版
原文原文鏈接
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#box{ background:url(img/iphone-1.png) no-repeat; width:289px; height:594px; position:relative;}
#div2{ width:237px; height:370px; background:#fff; position:absolute; left:26px; top:87px; overflow:scroll;}
#div1{ width:237px; height:48px; border-top:1px solid #999; background:#e1e1e1; position:absolute; left:26px; bottom:88px;}
#btn1{ width:30px; height:34px; border:1px solid #CCC; border-radius:10px; position:absolute; top:7px; left:4px;}
#img1{ width:34px; height:34px; position:absolute; top:7px; left:4px;}
#btn2{ width:30px; height:34px; border:1px solid #CCC; border-radius:10px; position:absolute; top:7px; left:4px; background:url(img/bq2.png) no-repeat center; display:none;}
#text{ width:139px; height:34px; border:1px solid #ccc; border-radius:6px; position:absolute; top:7px; left:41px;}
#btn3{ width:48px; height:34px; border:none; position:absolute; left:184px; top:7px; background:none; font-size:18px;}
.sp01{color:#fff;padding-left:5px;padding-right:5px;margin-left:30px;word-break:break-all;display:inline-block;line-height:32px;border:1px thin;border-radius:5px;background:#9C3;}
.sp02{padding-left:5px;padding-right:5px;margin-right:30px;word-break:break-all;display:inline-block;line-height:32px;border:1px thin;border-radius:5px;color:#fff;background:#ccc;float:right;}
.pic01{width:265px;background:url(img/bq1.png) no-repeat left top;float:left;margin-top:10px;margin-left:10px;}
.pic02{width:265px;background:url(img/bq2.png) no-repeat right top;float:right;margin-top:10px;margin-right:10px;}
</style>
<script>
window.onload = function(){
    var obtn1 = document.getElementById('btn1');
    var obtn2 = document.getElementById('btn2');
    var obtn3 = document.getElementById('btn3');
    var otext = document.getElementById('text');
    var odiv1 = document.getElementById('div1');
    var odiv2 = document.getElementById('div2');
    var oimg = document.getElementById('img1');
    
    var arrUrl = ['img/bq1.png','img/bq2.png']
    var onoff = true;
    var num = 0;
    
    
    oimg.src = arrUrl[num];
    
    oimg.onclick = function(){
        num ++;
        if(num == arrUrl.length){
            num = 0;
        }
        oimg.src = arrUrl[num];
    }
    
    obtn3.onclick = function(){
        if(otext.value==''){alert('請輸入點內容吧！')}
        else{
            if(num ==0){
            odiv2.innerHTML += '<div class="pic01">' + '<span class="sp01">' + otext.value + '<br>';    otext.value = ''; }
            else{odiv2.innerHTML += '<div class="pic02">' + '<span class="sp02">' + otext.value + '<br>';otext.value = ''; }
            
    
        
        }
    }
    
    
    }
</script>
</head>

<body>
<div id="box">
<div id="div2"></div>
  <div id="div1">
    <img id="img1" />
    <input id="btn2" type="button" value="" />
    <input id="text" type="text" value="" />
    <input id="btn3" type="button" value="提交" />
  </div>
</div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。