微博输入框练习

Original 2019-04-01 22:40:32 213
abstract:<!doctype html><html><head><meta charset="utf-8"><style type="text/css">.box{width:600px; height:170px; border:8px solid #FD4E4E; margin:0px auto;padd

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

.box{width:600px; height:170px; border:8px solid #FD4E4E; margin:0px auto;padding:6px;}

.box1 { float:right;color:#666}

img{float:left;}

input{border:0px; background-color:#FA7E3D;width:60px; height:22px;border-radius:2px;}

#text{width:595px; height:100px;margin: 5px 0px;}

</style>

<script type="text/javascript">

var  text,number,m

 window.onload=function (){

 text=document.getElementById('text')

 number=document.getElementById('number')

 bt=document.getElementById('bt')

 text.onkeyup=function aa(){

 m=140-text.value.length

 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="box">

<img src="01.png">

<div class="box1"> 你可以输入<span id="number"> </span>字&nbsp;&nbsp;&nbsp;&nbsp;</div>

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

<img src="02.png">

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

</div>

</div>





</body>

</html>


Correcting teacher:西门大官人Correction time:2019-04-02 11:16:46
Teacher's summary:作业完成的不错,最好上传一下程序的运行效果图。

Release Notes

Popular Entries