init

src/main/webapp/static/js/index.js

@@ -0,0 +1,142 @@
+// 匿名函数包裹，防止外界操作的修改
+
+
+
+$(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'
+            })  //按钮点击事件重置
+
+        }
+    })
+
+
+})