微博输入完整篇

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微博输入</title> <style type="text/css"> body{ font-size:&n

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>微博输入</title>
	<style type="text/css">
		body{
			font-size: 12px;
		}
		.box{
			width: 600px;
			height: 160px;
			border: 10px solid pink;
			margin: 0 auto;padding: 10px;
		}
		img{
			float: left;
		}
		.box1{
			float: left;
			margin-left: 255px;
			width: 150px;
			height: 24px;
			line-height: 24px;
			text-align: right;
			font-size: 14px;
			color: #888;
		}

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

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

		.box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{
			float: left;
			width: 30px;
			height: 32px;
			line-height: 32px;
			padding-left: 26px;
		}

		#sp1{background: url('images/an5.png') no-repeat left center;}
		#sp2{background: url('images/an4.png') no-repeat left center;}
		#sp3{background: url('images/an3.png') no-repeat left center;}
		#sp4{background: url('images/an2.png') no-repeat left center;}
		#sp5{background: url('images/an1.png') no-repeat left center;width: 40px;}
		#sp6{margin-left: 150px;margin-right: 15px;color: #888}
		#btn{
			float: left;width: 80px;height: 30px;
			border: none;color: #fff;
			background: #ffc09f;
			border-radius: 5px;
		}
		.clear{
			clear: both;
		}
	</style>
</head>
<body>

	<div class="box">
		<img src="images/12.png">
		<div class="box1">还可以输入 <span id="number">255</span> 字</div>
		<!-- <div class="clear"></div> -->
		<textarea id="text"></textarea>
		<span id="sp1">表情</span>
		<span id="sp2">图片</span>
		<span id="sp3">视频</span>
		<span id="sp4">话题</span>
		<span id="sp5">长微博</span>
		<span id="sp6">公开</span>
		<input type="button" value="发布" id="btn">
	</div>
</body>

<script type="text/javascript">
	var text,number,m;
	window.onload = function (){
		text = document.getElementById("text");
		number = document.getElementById("number");
		btn    = document.getElementById("btn");
		text.onkeyup = function aa(){
			m = 140 - text.value.length// 微博限制140数字
			if(m < 0) {
				number.style.color = 'red';// 小于0 变红色
			} else {
				number.style.color = "#888";
			}
			number.innerHTML = m;
		}
		btn.onclick = function (){
			if(m==140) {
				alert('你还没有输入');
				text.focus();// 获取光标
			} else if(m<0) {
				alert('您输入的字数超出限制');
				text.focus();
			} else {
				alert('发布成功');
			}
		}
		aa();
	}	
</script>
</html>

Correcting teacher：灭绝师太Correction time：2019-03-18 09:32:16
Teacher's summary：完成的不错,除了上课案例还可以课外拓展哦!

微博输入完整篇

Popular Entries