简单实现文本框的插入与移除：
HTML代码块：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <script src="jquery-3.3.1.min.js"></script>
9 <script src="clone.js"></script>
10
11 <div class="box">
12 <div class="item">
13 <button onclick="add(this)">+</button>
14 <input type="text" >
15 </div>
16
17 </div>
18 </body>
19 </html>
JavaScript的代码块：
1 function add(self) {
2 var $clo_obj=$(self).parent().clone();
3 $clo_obj.children("button").html("-").attr("onclick","del_obj(this)");
4 $(".box").append($clo_obj);
5 }
6 function del_obj(self) {
7 $(self).parent().remove()
8 }
滚动条显示返回顶部的实现：
HTML代码块：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="clone.css" type="text/css">
7 </head>
8 <body>
9 <script src="jquery-3.3.1.min.js"></script>
10 <script src="clone.js"></script>
11
12 <div class="box">
13 <div class="item"></div>
14 <div class="end"></div>
15 <div class="ret hide" onclick="go_top()">返回顶部</div>
16 </div>
17 </body>
18 </html>
css代码块：
1 *{
2 margin: 0px;
3 padding: 0px;
4 }
5 .item{
6 100%;
7 height: 1024px;
8 background-color: pink;
9 }
10 .end{
11 100%;
12 height: 1024px;
13 background-color: burlywood;
14 }
15 .ret{
16 position: fixed;
17 right: 20px;
18 bottom: 20px;
19 70px;
20 height: 50px;
21 background-color: #396bb3;
22 line-height: 50px;
23 color: #f4f4f4;
24 text-align: center;
25 }
26 .hide{
27 display: none;
28 }
javasc代码块：
1 window.onscroll=function(){
2 if ($(window).scrollTop()>1000){
3 $(".ret").removeClass("hide")
4 }
5 else {
6 $(".ret").addClass("hide")
7 }
8 };
9
10 function go_top() {
11 $(window).scrollTop(0)
12 }