完整版本的的一些总结

Original 2019-03-01 18:13:09 164
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>weibo1</title> <style type="text/css"> body{font-size:12px;} .box{width:600px;he

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>weibo1</title>

<style type="text/css">

body{font-size:12px;}

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

.box img{float:left;}

.box div{float:left;width:150px;height:24px;margin-left: 255px;text-align:center;line-height:24px;font-size:14px;color:#888}

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

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

    #tu1,#tu2,#tu3,#tu4,#tu5,#tu6{float:left;width:30px;height:32px;font-size:14px;color:#888;padding-left:25px;line-height:32px;}

    #tu1{background:url(images/an5.png) no-repeat left center;}

    #tu2{background:url(images/an4.png) no-repeat left center;}

    #tu3{background:url(images/an3.png) no-repeat left center;}

    #tu4{background:url(images/an2.png) no-repeat left center;}

    #tu5{background:url(images/an1.png) no-repeat left center;width:45px;}

    #tu6{margin-left:150px;margin-right:15px;color:#888}

    #bt{border:none;border-radius:5px;width:75px;height:30px;float:left;background:#ffc09f;color:#fff;}

</style>

<script type="text/javascript">

var txt,num,number,fen

window.onload=function(){

      txt=document.getElementById('text')

      number=document.getElementById('zishu')

      txt.onkeyup=function ce(){

        num=txt.value

        fen=140-num.length

        if(fen<0){

             zishu.style.color="red"


        }else{

            zishu.style.color="blue"


        }


          zishu.innerHTML=fen


      }

      bt.onclick=function(){


      if(fen==140){


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

           text.focus()

   


     }else if(fen<0){


        alert("发布文字超过最大限制")

        text.focus()

     }else{


      alert("发布成功")

     }


      }

      ce()


}



</script>

</head>

<body>

<div class="box">

  <img src="images/12.png">

  <div>你还可以输入<span id="zishu"></span>字</div>

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

  <span id="tu1">图片</span>

  <span id="tu2">文字</span>

  <span id="tu3">音乐</span>

  <span id="tu4">视频</span>

  <span id="tu5">长微博</span>

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

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

  




</div>




</body>

</html>


我直接把获取到的值给了fen这个变量,用它去比较,对于这一款慢慢熟悉了,就是很不是特别熟练,比如这个正则和判断表单有点陌生,对于隐性参数感觉有点突然

Correcting teacher:灭绝师太Correction time:2019-03-02 09:05:54
Teacher's summary:完成的不错!相同效果可以通过不同方法完成,作业可以跳出老师思维!

Release Notes

Popular Entries