微博评论发布：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
body {
background-color: rgba(247, 247, 247,.6);
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
/* border: 1px solid #000; */
box-shadow: 0 0 20px rgb(179, 179, 179,.2);
padding: 20px;
background-color: white;
border-radius: 5px;
}
.content_text {
margin: 10px 0;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
vertical-align: bottom;
}
ul {
width: 450px;
}
ul li {
line-height: 25px;
padding: 10px;
border: 1px dashed rgba(223, 48, 51,.4);
border-radius: 5px;
margin-bottom: 10px;
/* display: none; */
}
input {
float: right;
}
ul li a {
float: right;
text-decoration: none;
color: #666;
}
.btn {
outline: none;
border: 1px solid #B3B3B3;
border-radius: 3px;
width: 50px;
height: 30px;
background-color: #F7F7F7;
margin-left: 20px;
}
</style>
<script src="./js/jquery-1.11.1.js"></script>
<script>
$(function() {
$(".btn").click(function() {
var text = $("textarea").val();
if(!text=="") {
$("ul").prepend("<li>"+text+"<a href='javascript:;'>删除</a>"+"</li>");
}else {
$("textarea").prop("placeholder","内容不能为空");
$("textarea").focus();
}
$("textarea").val("");
})
$("ul").on("click","a",function() {
var li = $(this).parent();
li.remove();
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<h3>微博发布</h3>
<div class="content_text">
<textarea name="" class="txt" cols="30" rows="10" placeholder="请输入内容"> </textarea>
<button class="btn">发布</button>
</div>
<ul>
</ul>
</div>
</body>
</html>
图书管理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<style type="text/css">
.grid {
margin: auto;
width: 500px;
text-align: center;
}
.grid table {
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10;
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orange;
}
input {
width: 100px;
}
.book {
margin-bottom: 20px;
}
</style>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理系统</h1>
<div class="book">
<div>
<label for="id">
编号：
</label>
<!-- 3.1、通过双向绑定获取到输入框中的输入的 id -->
<input type="text" id="id" v-model="editId" disabled="false">
<label for="name">
名称：
</label>
<!-- 3.2、通过双向绑定获取到输入框中的输入的 name -->
<input type="text" id="name" v-model="name">
<!-- 3.3、给按钮添加点击事件 -->
<button @click="addBook">{{proName}}</button>
<!-- <button @click="editBook">修改</button> -->
</div>
<div>图书总数：<span>{{total}}</span></div>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in bookList">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date|format}}</td>
<td>
<a href="" @click.prevent="toEdit(item.id)">修改</a>
<span>|</span>
<a href="" @click.prevent="delBook(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
// 过滤器，格式化时间
Vue.filter("format", function (date) {
var time = new Date(date);
// var y = time.getFullYear();
// var m = time.getMonth() + 1;
// var d = time.getDate();
// var h = time.getHours();
// var f = time.getMinutes();
// var s = time.getSeconds();
// return y + "-" + m + "-" + d + " " + h + ":" + f + ":" + s;
return time.toLocaleString();
})
let vm = new Vue({
el: "#app",
data: {
id: 4,
name: "",
proName: "增加",
editId: "",
bookList: [{
id: 1,
name: '三国演义',
date: new Date(),
proName: "添加",
editId: ""
}, {
id: 2,
name: '水浒传',
date: new Date()
}, {
id: 3,
name: '红楼梦',
date: new Date()
}, {
id: 4,
name: '西游记',
date: new Date()
}]
},
methods: {
addBook: function () {
// var newBook = {};
// newBook.id = this.id;
// newBook.name = this.name;
// newBook.date = this.date;
// this.bookList.push(newBook);
// this.id = "";
// this.name = "";
if (this.proName === "增加") {
var id = this.id + 1; //4+1=5
var date = new Date();
var name = this.name;
o = {};
o.date = date;
o.id = id;
o.name = name;
this.bookList.push(o);
this.name = "";
this.id = ++this.id; //this.id=++5=6
} else {
var id = this.editId;
var date = new Date();
var name = this.name;
var i = this.bookList.findIndex(v => v.id === id);
this.bookList[i].id = id;
this.bookList[i].name = name;
this.bookList[i].date = date;
this.editId = "";
this.name = "";
this.proName = "增加";
}
},
editBook: function () {
if (this.flag) {
this.bookList.some((item) => {
if (item.id == this.id) {
item.name = this.name;
return true;
}
});
this.flag = false;
}
this.id = "";
this.name = "";
},
toEdit: function (id) {
// this.flag = true;
// var book = this.bookList.filter(function (item) {
// return item.id == id;
// });
// this.id = book[0].id;
// this.name = book[0].name;
this.proName = "修改";
var row = this.bookList.find(v => {
return id === v.id;
});
// console.log(row);
this.editId = row.id;
this.name = row.name;
},
delBook: function (id) {
// 开始方式
// this.bookList = this.bookList.filter(function (item) {
// return item.id != id;
// })
// 第一种方式
// var newArr = this.bookList.filter((v, i) => {
// return v.id !== id;
// })
// this.bookList = newArr;
// 第二种方式
var i = this.bookList.findIndex((v, i) => {
return v.id === id;
})
this.bookList.splice(i, 1);
}
},
computed: {
total: function () {
return this.bookList.length;
}
}
})
</script>
</body>
</html>
小练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
// $("div").click(function() {
// $(this).css("background","orange");
// })
// $("div").mouseenter(function() {
// $(this).css("background","pink");
// })
// on对同一个标签绑定多个事件
// $("div").on({
// "click":function() {
// $(this).css("background","orange");
// },
// "mouseenter":function() {
// $(this).css("background","pink");
// }
// })
// $("ul li").click(function() {
// var index =$(this).index();
// console.log(index);
// })
$("ul").on("click","li",function() {
console.log($(this).index());
})
for(var i=0;i<5;i++) {
$("ul").append("<li>好好学习</li>");
}
})
</script>
<style type="text/css">
ul li {
list-style: none;
}
div {
width: 200px;
height: 200px;
border: 1px solid goldenrod;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>好好学习</li>
<li>好好学习</li>
<li>好好学习</li>
</ul>
</body>
</html>
2616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
