返回微博输入作业...登陆

微博输入作业

7202019-04-15 17:02:35243
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{width: 500px; background: #eee; padding:5px 20px; margin: 0px auto;}
            p{text-align: right; color: #666;}
            span{}
            textarea{border: 1px solid #ddd; text-align: left; background: #fff; width: 500px; height: 120px; padding: 10px; font-size: 14px; box-sizing: border-box;}
            button{border: none; background: #ffa200; color: #fff; width: 120px; height: 40px;}
        </style>
    </head>
    <body>
        <div>
            <p>您还可以输入<span id="number">140</span>个字</p>
            <textarea id="text"></textarea>
            <p><button id="btn">确认提交</button></p>
        </div>
        
        <script type="text/javascript">
            var number,text,btn,surplus
            window.onload=function(){
                number = document.getElementById('number');
                text = document.getElementById('text');
                btn = document.getElementById('btn');
                surplus = 140;
                text.onkeyup=function (){
                    surplus =140 - text.value.length;
                    number.innerHTML=surplus;
                    if(surplus<=0){
                        number.style.color="#f00";
                    }else{
                        number.style.color="#666";
                    }
                }
                btn.onclick=function(){
                    if(surplus==140){
                        alert("您还没有输入内容");
                        text.focus();
                    }else if(surplus<0){
                        alert("您输入的内容已超出限定字数");
                        text.focus();
                    }
                    else{
                        alert("您已发布成功");
                        text.value="";
                        number.innerHTML=140;
                    }
                }
            }
        </script>
    </body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送