微博输入小demo

Original 2019-05-04 10:26:16 318
abstract:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>微博输入</title>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博输入</title>
    <style>
        .box{width: 600px;height: 160px;border: 10px solid pink;margin: 0 auto;padding: 10px}
        #te{width: 600px;height: 100px;border: 1px solid #ccc}
    </style>
    <script type="text/javascript">
        var sp,te,m
        window.onload=function () {
            sp=document.getElementById('sp');
            te=document.getElementById('te');
            bt=document.getElementById('bt');
            te.onkeyup=function aa() {
                m=180-te.value.length;
                if(m>=0){
                    sp.style.color="#888";
                }else {
                    sp.style.color='red';
                }
                sp.innerHTML=m; //字体颜色变化
            }
            //button的设置
            bt.onclick=function () {
                if(m==180){
                    alert('请输入你的内容');
                    te.focus();
                }else if(m<0){
                    alert('超出字数限制');
                    te.focus();
                }else{
                    alert('发布成功')
                }
            }
            aa()  //aa函数的调用
        }

    </script>
</head>
<body>
    <div class="box">
        <div class="box1">还可以输入<span id="sp"></span>字</div>
        <textarea id="te"></textarea>
        <button id="bt">发布</button>
    </div>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-05-05 10:32:39
Teacher's summary:完成的不错。老师讲的案例,要知道用在哪里。这个案例,只要是输入框,都可以用。继续加油。

Release Notes

Popular Entries