微博输入字数-作业
lzm2019-01-15 14:39:13255<!doctype html>
<html>
<meta charset="utf-8">
<title>微博输入字数-作业</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;
/* 设置不能调整大小 */
resize:none;
}
/* 文本域获得焦点后的样式 */
#text:focus {
/* 去掉浏览器的一个样式 */
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; //字数限制最大值
window.onload = function () { //页面加载完获取
text = document.getElementById('text'); //获取文本域
text_num = document.getElementById('blog_header_right'); //获取输入字数提示div
sub = document.getElementById('sub'); //获取发布按钮
}
//字数判断提示函数
function strLeng() {
var num_center = text.value.length; //获取当前字数
var num_right = '</em> 字';
//判断当前的字数，如果超过字数限制最大值，则改变字数的字体颜色
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;'>";
}
//字数大于0 给出字数提示，给发布按钮换背景
if (num_center > 0) {
text_num.innerHTML = num_left + num_center + num_right;
sub.style.backgroundColor = '#FF8140';
} else {
//其他情况不提示字数 发布按钮背景还原
text_num.innerHTML = '';
sub.style.backgroundColor = '#FFC09F';
}
}
//判断是否满足发布条件函数
function faBu() {
var num = text.value.length; //获取当前字数
if (num == 0) {
//字数为0的话提示内容，并文本域获取焦点
alert('你还没有输入内容，请输入内容后再发布');
text.focus();
} else if (num > max_num) {
//字数超过限制的话提示内容，并文本域获取焦点
alert('你输入的内容过多，最多 ' + max_num + ' 字');
text.focus();
} else {
//字数正常，发布成功！并清空文本域内容，清空字数提示，还原按钮背景
alert('发布成功！');
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='发布' id='sub' onclick='faBu()'>
</div>
</div>
</body>
</html>