小案例微博输入By Johnson

原创 2018-10-29 13:39:16 205
摘要:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>小案例微博输入By Johnson</title>
    <style type="text/css" media="screen">
        *{margin:0;padding:0;font-size: 12px;}
        .wraper{margin:100px auto;width:600px;height:160px;border:10px solid pink;padding: 10px;}
        .wraper #hd{display: none;float:right;color: #888;font-size: 14px;}
        .wraper #number{color: #808080;font-weight: bold}
        .wraper #hd1{display: inline-block;float:right;color:#eb7350;font-size: 12px;}
        .wraper #text{width: 600px;height: 100px;border: 1px solid #ccc;margin: 5px 0;}
        .wraper #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float: left;width: 30px;height: 32px;line-height: 32px;padding-left: 26px;}
        #sp1{background: url(images/an5.png) no-repeat left center;}
        #sp2{background: url(images/an4.png) no-repeat left center;}
        #sp3{background: url(images/an3.png) no-repeat left center;}
        #sp4{background: url(images/an2.png) no-repeat left center;}
        #sp5{background: url(images/an1.png) no-repeat left center;width: 40px;}
        #sp6{ margin-left: 158px;margin-right:15px;color: #888; }
        #bt{float: left;width: 80px;height: 30px;border: none;background: #ffc09f;color: #fff;border-radius: 5px;}
    </style>
    <script type="text/javascript" charset="utf-8">
        var text,number, m,hd1,hd
 window.onload=function (){
            text=document.getElementById('text')
            number=document.getElementById('number')
            bt=document.getElementById('bt')
            hd=document.getElementById('hd')
            hd1=document.getElementById('hd1')
            text.onfocus=function(){
                hd1.style.display="none"
 hd.style.display="inline-block"
 text.style.borderColor="#fa7d3c";
                text.style.outline="none";
            }
            text.onblur=function(){
                hd1.style.display="inline-block"
 hd.style.display="none"
 text.style.borderColor="#ccc";
            }
            text.onkeyup=function aa(){
                m=140-text.value.length//微博限制字数是140
 if(m<0){
                    number.style.color="red"
 }else{
                    number.style.color="#888"
 }
                number.innerHTML=m;
            }

            bt.onclick=function(){
                if (m==140) {
                    alert("你还没有输入")
                    text.focus()
                }else if(m<0){
                    alert("字数太多,不可以发布")
                    text.focus()
                }else{
                    alert("发布成功")
                }
            }
//            aa();
 }
    </script>
</head>
<body>
    <div class="wraper">
        <img src="images/12.png" alt="微博">
        <div id="hd">还可以输入<span id="number">140</span>字</div>
        <div id="hd1">印尼狮航一架客机坠毁,机上载有188人>>详情 热门微博</div>
        <div style="clear: both"></div>
        <textarea id="text"></textarea>
        <span id="sp1">表情</span>
        <span id="sp2">图片</span>
        <span id="sp3">视频</span>
        <span id="sp4">话题</span>
        <span id="sp5">长微博</span>
        <span id="sp6">公开</span>
        <input type="button" value="发布" id="bt">
    </div>
</body>
</html>


发布手记

热门词条