abstrak：<!doctype html><html><meta charset="utf-8"><title>微博輸入字?jǐn)?shù)-作業(yè)</title><style type="text/css"> * { margin: 0
<!doctype html>
<html>
<meta charset="utf-8">
<title>微博輸入字?jǐn)?shù)-作業(yè)</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-size: 13px;
}
#blog {
width: 600px;
height: 180px;
margin: 20px auto;
border: 2px dashed#D0BCAA;
padding: 2px;
}
#blog_header_left {
width: 200px;
height: 30px;
float: left;
line-height: 30px;
font-size: 15px;
margin: 5px 10px;
color: #B27450;
}
#blog_header_right {
float: left;
width: 370px;
margin-right: 10px;
line-height: 30px;
text-align: right;
font-size: 16px;
color: #808088;
}
#text {
width: 570px;
height: 70px;
padding:5px;
margin: 5px 10px;
border: 1px solid #ccc;
/* 設(shè)置不能調(diào)整大小 */
resize:none;
}
/* 文本域獲得焦點(diǎn)后的樣式 */
#text:focus {
/* 去掉瀏覽器的一個(gè)樣式 */
outline: none;
border: 1px solid #FA7D3C;
}
#blog_footer span {
display: block;
float: left;
width: 60px;
display:block;
height: 30px;
line-height: 30px;
margin: 5px;
text-align: center;
}
#sub {
float: left;
width: 90px;
height: 30px;
line-height: 30px;
background-color:#FFC09F;
border: none;
color:#fff;
margin: 5px;
}
</style>
<script type="text/javascript">
var text, text_num, sub; //定義全局變量
var max_num = 140; //字?jǐn)?shù)限制最大值
window.onload = function () { //頁面加載完獲取
text = document.getElementById('text'); //獲取文本域
text_num = document.getElementById('blog_header_right'); //獲取輸入字?jǐn)?shù)提示div
sub = document.getElementById('sub'); //獲取發(fā)布按鈕
}
//字?jǐn)?shù)判斷提示函數(shù)
function strLeng() {
var num_center = text.value.length; //獲取當(dāng)前字?jǐn)?shù)
var num_right = '</em> 字';
//判斷當(dāng)前的字?jǐn)?shù)，如果超過字?jǐn)?shù)限制最大值，則改變字?jǐn)?shù)的字體顏色
if (num_center < max_num) {
num_left = "已輸入 <em style='font-size:20px;font-weight:bold;'>";
} else {
num_left = "已輸入 <em style='font-size:20px;font-weight:bold;color:#FFAB42;'>";
}
//字?jǐn)?shù)大于0 給出字?jǐn)?shù)提示，給發(fā)布按鈕換背景
if (num_center > 0) {
text_num.innerHTML = num_left + num_center + num_right;
sub.style.backgroundColor = '#FF8140';
} else {
//其他情況不提示字?jǐn)?shù) 發(fā)布按鈕背景還原
text_num.innerHTML = '';
sub.style.backgroundColor = '#FFC09F';
}
}
//判斷是否滿足發(fā)布條件函數(shù)
function faBu() {
var num = text.value.length; //獲取當(dāng)前字?jǐn)?shù)
if (num == 0) {
//字?jǐn)?shù)為0的話提示內(nèi)容，并文本域獲取焦點(diǎn)
alert('你還沒有輸入內(nèi)容，請(qǐng)輸入內(nèi)容后再發(fā)布');
text.focus();
} else if (num > max_num) {
//字?jǐn)?shù)超過限制的話提示內(nèi)容，并文本域獲取焦點(diǎn)
alert('你輸入的內(nèi)容過多，最多 ' + max_num + ' 字');
text.focus();
} else {
//字?jǐn)?shù)正常，發(fā)布成功！并清空文本域內(nèi)容，清空字?jǐn)?shù)提示，還原按鈕背景
alert('發(fā)布成功！');
text.value = '';
text_num.innerHTML = '';
sub.style.backgroundColor = '#FFC09F';
}
}
</script>
<body>
<div id='blog'>
<div id='blog_header'>
<div id='blog_header_left'>有什么新鮮事想告訴大家？</div>
<div id='blog_header_right'></div>
</div>
<div id='blog_content'>
<textarea id='text' onkeyup="strLeng()"></textarea>
</div>
<div id='blog_footer'>
<span>表情</span>
<span>圖片</span>
<span>視頻</span>
<span>話題</span>
<span>頭條文章</span>
<span style='margin-left:85px;margin-right:0px;'>公開</span>
<input type='button' value='發(fā)布' id='sub' onclick='faBu()'>
</div>
</div>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-01-15 14:48:24
Rumusan guru：做的非常不錯(cuò)，習(xí)慣也很好，注釋縮進(jìn)都有。繼續(xù)加油。