//日期格式化函数 Date.prototype.format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt; } //创建vue实例 var v = new Vue({ el: "#comment", data: { //原始用户评论信息 comments: [{ username: "张三", userimg: "user02.jpg", words: "这历史可以啊，不错不错。呵呵！", like: 87, nolike: 53, time: "2017-02-17 09:15:25" }, { username: "李四", userimg: "user01.jpg", words: "吃饭去了啊。呵呵！", like: 23, nolike: 63, time: "2017-3-27 10:12:34" }, { username: "王五", userimg: "user03.jpg", words: "这评论可以。呵呵！", like: 27, nolike: 33, time: "2017-04-02 03:26:54" }], //原始用户信息 users: [{ username: "zhangsan", password: "123456", userimg: "user.jpg", words: "世界那么大我想去看看。" }, { username: "zyc", password: "123456", userimg: "user01.jpg", words: "雨过天晴的美好。" }, { username: "admin", password: "123456", userimg: "user02.jpg", words: "下大雨了，怎么办啊。" }], //当前用户信息 currentUser: { username: "", words: "", userimg: "" }, //登录框显示或隐藏状态 loginStatus: false, //注册框显示或隐藏状态 registerStatus: false, //用户信息栏显示或隐藏状态 userbarStatus: false, //登录注册入口显示或隐藏状态 lrBtnStatus: true }, methods: { //点击登录 showLogin: function() { document.getElementById("login").reset(); this.loginStatus = true; this.registerStatus = false; }, //点击注册 showregister: function() { document.getElementById("register").reset(); this.loginStatus = false; this.registerStatus = true; }, //退出登录 loginout: function() { //清空当前用户数据 this.currentUser.username = ""; this.currentUser.words = ""; this.currentUser.userimg = ""; alert("退出成功！"); this.userbarStatus = false; //登录或注册入口显示 this.lrBtnStatus = true; }, //登录遮罩层点击事件 loginboxClick: function() { this.loginStatus = false; }, //注册遮罩层点击事件 registerboxClick: function() { this.registerStatus = false; }, //点击登录或注册框阻止事件冒泡 stopProp: function(e) { e = e || event; e.stopPropagation(); }, //点赞 like: function(index) { this.comments[index].like++; }, //点踩 notlike: function(index) { this.comments[index].nolike++; }, //登录 login: function() { var username = $(".loginbox").find(".username").val(); //获取用户名 var psw = $(".loginbox").find(".psw").val() //获取密码 var flag = false; for (var i = 0, len = this.users.length; i < len; i++) { //判断用户名密码是否正确 if (this.users[i].username === username && this.users[i].password === psw) { flag = true; alert("登录成功！"); //用户登录框消失 this.loginStatus = false; //用户登录信息显示 this.userbarStatus = true; //设置用户栏信息 this.currentUser.username = this.users[i].username; this.currentUser.words = this.users[i].words; this.currentUser.userimg = this.users[i].userimg; //登录或注册入口消失 this.lrBtnStatus = false; break; } } if (!flag) { alert("输入的账号或密码不正确！"); document.getElementById("login").reset(); } }, //注册 register: function() { var obj = {}; //创建用户账号密码容器 var flag = false; var username = $(".registerbox").find(".username").val(); //获取用户名 var psw = $(".registerbox").find(".psw").val() //获取密码 //判断用户名是否存在 for (var i = 0, len = this.users.length; i < len; i++) { if (this.users[i].username === username) { flag = true; alert("该用户名已经被注册！"); break; } } if (!flag) { if (username == "" || psw == "") { alert("账号和密码不能为空！"); } else { var randomNum = Math.floor(Math.random() * 5) + 1; //随机生成头像 var randomImg = "user0" + randomNum + ".jpg"; obj.username = username; obj.password = psw; obj.words = "系统默认标语。" obj.userimg = randomImg; //添加用户信息到用户列表 this.users.push(obj); alert("注册成功！"); //设置用户信息栏显示 this.userbarStatus = true; //设置用户栏信息 this.currentUser.username = obj.username; this.currentUser.words = obj.words; this.currentUser.userimg = obj.userimg; //登录或注册入口消失 this.lrBtnStatus = false; //重置表单数据 document.getElementById("register").reset(); //注册框消失 this.registerStatus = false; } } }, //编辑用户心情 editUserWords: function() { var wordsObj = $(".commentbox").find(".userword"); var edit = wordsObj.attr("contenteditable"); //获取元素的H5可编辑属性 if (edit == "false") { //打开可编辑功能 wordsObj.attr("contenteditable", "true"); } else { for (var i = 0, len = this.users.length; i < len; i++) { //查找对应用户名 if (this.users[i].username === this.currentUser.username) { //改变用户信息里面的words数据 this.currentUser.words = $(".commentbox").find(".userword").text(); this.users[i].words = this.currentUser.words; //关闭可编辑功能 wordsObj.attr("contenteditable", "false"); alert("保存成功！"); } } } }, //点击提交评论 subCommont: function() { if (!this.userbarStatus) { alert("登录之后才可以评论！"); this.loginStatus = true; } else { if ($(".wordsbox textarea").val() == "") { alert("请先填写评论内容！"); } else { var obj = {}; //评论信息对象的容器 obj.username = this.currentUser.username; obj.userimg = this.currentUser.userimg; obj.words = $(".wordsbox textarea").val(); obj.like = 0; obj.nolike = 0; obj.time = new Date().format("yyyy-MM-dd hh:mm:ss"); //将评论信息压入评论信息列表 this.comments.push(obj); alert("评论成功！"); $(".wordsbox textarea").val(""); } } } } });
github效果在线预览