javascript微博输入长度限制

原创 2018-11-10 16:18:22 5
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">    body{font-size: 12px;} 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

    body{font-size: 12px;}

        .box{width: 600px;height: 180px;border:10px solid pink;margin: 20px auto;padding: 10px;}

        .header{width: 100%;height: 40px;line-height: 40px;}

        .header_l{float: left;color: #27A8E0;font-size: 14px;}

        .header_r{float: right;font-size: 14px;color: #ccc;}

        .header_r span{font-size: 16px;font-weight: bold;}

        #text{width: 100%;height: 100px;border: 1px solid #888;margin-top: 5px;}

        .box #bottom1,#bottom2,#bottom3,#bottom4,#bottom5,#bottom6{float: left;width:45px;height: 32px;line-height: 32px;padding-left: 26px;position: relative;}

        #bottom1 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;border-radius: 50%;}

        #bottom2 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}

        #bottom3 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}

        #bottom4 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}

        #bottom5 img{width: 20px;height: 20px;position: absolute;top:6px;left: 5px;}

        #bottom6{margin-left: 60px;margin-right: 15px;color: #888;}

        #btn{float: left;width: 80px;height: 30px;background: #FFF766;color: #fff;border:none;border-radius: 5px;}

</style>

<script type="text/javascript">

        var text,number,num=120;

        window.onload=function(){

         text=document.getElementById("text");

         number=document.getElementById("number");

         btn=document.getElementById("btn");

         text.onkeyup=function aa(){

               num=num-text.value.length

               if (num<0) {

                number.style.color="red";

               }else{

                number.style.color="#888";

               }

               number.innerHTML=num;

         }


         btn.onclick=function(){

         alert(num)

         if (num===120) {

         alert("不能发布空内容")

         text.focus()

         }else if(num<0){

         alert("内容超出")

         text.focus()

         }else{

         alert("发布成功")

         }

         }

        }

</script>

</head>

<body>

<div class="box">

        <div class="header">

           <div class="header_l">有什么新鲜事告诉大家</div>

           <div class="header_r">还可以输入<span id="number">120</span>字</div>

        </div>

        <textarea id="text"></textarea>

        <span id="bottom1"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">表情</span>

        <span id="bottom2"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">图片</span>

        <span id="bottom3"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">视频</span>

        <span id="bottom4"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">话题</span>

        <span id="bottom5"><img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=047b418c923df8dcb93d8991fd1072bf/aec379310a55b3199f70cd0e4ea98226cffc173b.jpg">长微博</span>

        <span id="bottom6">公开</span>

        <input type="button" value="发布" id="btn">

</div>

</body>

</html>


批改老师:Peter-Zhu批改时间:2018-11-10 16:38:12
老师总结:可以, 下 次 提交的作业 ,记得把代码 放在代码区块中再提交

发布手记

热门词条