143 lines
4.4 KiB
JavaScript
143 lines
4.4 KiB
JavaScript
// 匿名函数包裹，防止外界操作的修改
|
|
|
|
|
|
|
|
$(function () {
|
|
// 还能输入的字得个数
|
|
var able_count = 140;
|
|
// 是否可以发布留言
|
|
var release_able = false;
|
|
// 右上角文字
|
|
var $title_txt = $('.title-txt');
|
|
// 留言框
|
|
var $main_area = $('.main-area');
|
|
// 发布按钮
|
|
var $release_btn = $('.release-btn');
|
|
|
|
// 输入框获取焦点
|
|
$main_area.focus(function () {
|
|
console.log("获取焦点");
|
|
$(this).parent().addClass('outline');
|
|
$title_txt.addClass('title');
|
|
if (able_count >= 0) {
|
|
$title_txt.html("还可以输入" + able_count + "个字");
|
|
} else {
|
|
$title_txt.html("你以超出" + (-able_count) + "个字");
|
|
}
|
|
})
|
|
|
|
// 输入框失去焦点
|
|
$main_area.blur(function () {
|
|
console.log("失去焦点");
|
|
$(this).parent().removeClass('outline');
|
|
$title_txt.removeClass('title');
|
|
$title_txt.html("111");
|
|
})
|
|
|
|
// 输入框文本修改
|
|
$main_area.on('input', function () {
|
|
console.log("文本修改");
|
|
// 剩余可输入的字个数
|
|
able_count = 140 - $main_area.val().length;
|
|
// console.log(able_count);
|
|
// 根据可输入字的个数决定右上角文本的提示 与 是否能发布的状态
|
|
if (able_count >= 0 && able_count <= 140) {
|
|
$title_txt.html("还可以输入" + able_count + "个字");
|
|
if (able_count != 140) {
|
|
release_able = true;
|
|
} else {
|
|
release_able = false;
|
|
}
|
|
} else {
|
|
$title_txt.html("你以超出" + (-able_count) + "个字");
|
|
release_able = false;
|
|
}
|
|
// 根据发布状态决定发布按钮的样式
|
|
if (release_able) {
|
|
$release_btn.css({
|
|
backgroundColor: "orange",
|
|
borderColor: "orange"
|
|
})
|
|
} else {
|
|
$release_btn.css({
|
|
backgroundColor: "#ffc09f",
|
|
borderColor: "#ffc09f"
|
|
})
|
|
}
|
|
|
|
})
|
|
|
|
// 发布事件
|
|
$release_btn.click(function () {
|
|
console.log("发布");
|
|
if (release_able) {
|
|
console.log('可以发布');
|
|
// 创建show对象的各个部位
|
|
var $showContent = $('<div class="show-content"></div>'),
|
|
$showName = $('<div class="show-name"></div>'),
|
|
$showTxt = $('<div class="show-txt"></div>'),
|
|
$showTime = $('<div class="show-time"></div>'),
|
|
$showClose = $('<div class="show-close"></div>'),
|
|
$showP = $('<p class=""></p>');
|
|
|
|
var date = new Date();
|
|
// 设置，对象结构内内容
|
|
$showName.text("XxXx");
|
|
$showP.text($main_area.val());
|
|
$showTime.text(date);
|
|
$showClose.text("x");
|
|
// 添加进入主结构
|
|
$showTxt.append($showP);
|
|
$showContent.append($showName);
|
|
$showContent.append($showTxt);
|
|
$showContent.append($showTime);
|
|
$showContent.append($showClose);
|
|
|
|
// 向所有匹配元素内部的开始处插入内容
|
|
$('.show').prepend($showContent);
|
|
|
|
// 添加动画
|
|
// 位置从输入框处下移
|
|
$showContent.css({
|
|
top: '-150px'
|
|
})
|
|
$showContent.animate({
|
|
top: 0
|
|
}, 200)
|
|
|
|
// 删除事件
|
|
$showClose.click(function () {
|
|
// 显示插入的索引位置
|
|
// console.log($(this).parent().index());
|
|
// console.log($showContent.index());
|
|
|
|
|
|
// 删除操作为顺便
|
|
// $showContent.remove();
|
|
|
|
// 使用删除动画，创建效果
|
|
$showContent.animate({
|
|
height: 0
|
|
}, 200, function () {
|
|
// 动画结束后将自身从dom中移除
|
|
$showContent.remove();
|
|
})
|
|
|
|
|
|
})
|
|
|
|
// 发布成功后收尾工作
|
|
$main_area.val(""); //输入框清空
|
|
able_count = 140; //输入框可输入内容数重置
|
|
release_able = false;
|
|
$release_btn.css({
|
|
backgroundColor: '#ffc09f',
|
|
borderColor: '#ffc09f'
|
|
}) //按钮点击事件重置
|
|
|
|
}
|
|
})
|
|
|
|
|
|
})
|