微博输入静态页面+JS学习总结在注释！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微博输入静态页面+JS</title>
<style>
body{font-size: 12px;}
/* 以下BOX盒子宽600px,高160px，外边框10px直线粉，padding内边10px让子级和父级的有个内边距的间隙10px */
.box{width: 600px;height: 160px;border:10px solid pink; padding:10px; margin:0 auto;}
/* 以下是BOX盒子内的图片靠左浮动 */
.box img{float: left;}
/* 以下是BOX盒子内的右侧文字区域，可显示计算输入框的字符串输入的数量 */
.box_right{width: 595px;height:24px;text-align:right;font-size:14px;line-height: 25px;color:#888;}
/*以下box下的 text 文本域 */
#text{width: 600px;height: 100px;}
/* 以下设置多个span标签给相应的图片背景，宽30高32行高32全部左浮动设置padding-left为26px目的让span背景图片与文字调整合适的距离 */
#ipc1,#ipc2,#ipc3,#ipc4,#ipc5,#ipc6{width: 30px;height: 32px;line-height: 32px;float: left;padding-left:26px;}
/* 以下设置图标背景 no-repeat不平铺 left左靠齐 center居中显示 */
#ipc1{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an5.png') no-repeat left center;}
#ipc2{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an4.png') no-repeat left center;}
#ipc3{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an3.png') no-repeat left center;}
#ipc4{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an2.png') no-repeat left center;}
#ipc5{background:url('https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/an1.png') no-repeat left center;width:45px;}
/* 以下这是 “公开”文字距离设置让他与左侧的图片设置间距右侧设了右外边距15px */
#ipc6{margin-left:158px;margin-right:15px;}
/* 以下这是发表按钮的样式，设置背景色，文字颜色，去除按钮默认border边框， 设置宽70px高30px，圆角边框5px*/
#publish{background:#ffc09f;color:#fff; width:70px;height: 30px;border:0;border-radius:5px;}
</style>
<script>
// 声明变量名 text number m
var text,number,m;
//网页加载完执行该方法
window.onload = function (){
//开始 三个方法是获取到DOM元素
number = document.getElementById('number');
text = document.getElementById('text');
publish = document.getElementById('publish');
//text连接上用户键盘事件
text.onkeyup = function Obt(){
//m = 140-用户输入长度然后进行下步判断
m = 140-text.value.length;
//假如1：用户输入了150个字符- 140字符串限制 = 负10，那么负10<0这个条件成立！
if (m<0) {
//假如1成立执行红色文字
number.style.color = "red"
}else{
//假如1不成立执行本次文字样式
number.style.color = "#888"
}
//判断后结果把m插入到HTML页面
number.innerHTML = m;
}
//当用户点击按钮进行判断
publish.onclick = function(){
//当m=140-0==140那么用户点击了提示，抱歉您没有输入！
if (m==140) {
alert("抱歉，您还没有输入")
//focus将输入焦点移至输入框上
text.focus()
//例如1成立弹出提醒 字数太多····
}else if(m<0){
alert("字数太多，不可以发表噢！")
//例如1不成立提示 发布成功！
}else{
alert("发布成功")
}
}
//判断完执行函数！
Obt()
}
//按师太视频来的，但是发现个BUG就是不输入也能发布，这是为什么呢？
</script>
</head>
<body>
<div>
<img src="https://xkd-1253518202.cos.ap-chengdu.myqcloud.com/12.png">
<div>还可以输入<span id="number"></span>字</div>
<textarea id="text"></textarea>
<span id="ipc1">表情</span>
<span id="ipc2">图片</span>
<span id="ipc3">视频</span>
<span id="ipc4">话题</span>
<span id="ipc5">长微博</span>
<span id="ipc6">公开</span>
<input id="publish" type="button" value="发表">
</div>
</body>
</html>感谢老师批改我的作业，辛苦您了！