我正在尝试做以下事情：
我很肯定大部分来自javascript文件。 不幸的是，我不知道足够的JS来做到这一点。如果可以的话请帮忙。
/* Include the padding and border in an element's total width and height */
* {
box-sizing: border-box;
}
body{
background: #fff1d9;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.logo{
right: 90%;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: rgba(235, 110, 128, 0.6);
}
/* Darker background-color on hover */
ul li:hover {
background: #eb6e80;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #eb6e80;
color: black;
}
/* Style the header */
.header1 {
background-color: rgba(0, 143, 149, 0.76);
padding: 30px 40px;
color: white;
text-align: center;
}
.header2 {
background-color: rgba(233, 176, 0, 0.85);
padding: 30px 40px;
color: white;
text-align: center;
}
.header3 {
background-color: rgba(226, 78, 66, 0.76);
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header1:after, .header2:after, .header3:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
border: none;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 75%;
background: rgb(254, 166, 128);
color: #fff1d9;
float: left;
text-align: center;
font-size: 16px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: rgb(228, 148, 122);
}
/********* USER PROFILE ********/
#myInput {
border-box: box-sizing;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(254, 166, 128, 0.68);
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: rgba(235, 110, 128, 0.65)
}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Grocery List</title>
<script src="https://use.fontawesome.com/780b259326.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><center style="font-size: 90px; color:#fea680; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;"><b>Shopping List</b></center></div>
<div class="row">
<div class="column">
<div id="myDIV1" class="header1">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Amir's List</h2>
<input type="text" id="myInput1" placeholder="Item...">
<span onclick="newElement1()" class="addBtn">Add</span>
</div>
<ul id="myUL1">
<li>
hello
<span class="close"></span>
</li>
</ul>
</div>
<div class="column">
<div id="myDIV2" class="header2">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Sush's List</h2>
<input type="text" id="myInput2" placeholder="Item...">
<span onclick="newElement2()" class="addBtn">Add</span>
</div>
<ul id="myUL2"></ul>
</div>
<div class="column">
<div id="myDIV3" class="header1">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Daniel's List</h2>
<input type="text" id="myInput3" placeholder="Item...">
<span onclick="newElement3()" class="addBtn">Add</span>
</div>
<ul id="myUL3"></ul>
</div>
<div class="column">
<div id="myDIV4" class="header3">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">House List</h2>
<input type="text" id="myInput4" placeholder="Item...">
<span onclick="newElement4()" class="addBtn">Add</span>
</div>
<ul id="myUL4"></ul>
</div>
</div>
</body>
</html>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Create a new list item when clicking on the "Add" button
function newElement1() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput1").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL1").appendChild(li);
}
document.getElementById("myInput1").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Create a new list item when clicking on the "Add" button
function newElement2() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput2").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL2").appendChild(li);
}
document.getElementById("myInput2").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Create a new list item when clicking on the "Add" button
function newElement3() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput3").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL3").appendChild(li);
}
document.getElementById("myInput3").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Create a new list item when clicking on the "Add" button
function newElement4() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput4").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL4").appendChild(li);
}
document.getElementById("myInput4").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
答案 0 :(得分：0)
你走了。在html，javascript以及CSS中进行了多项更改。浏览代码以便更好地理解。我把造型部分留给你去做。
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Create a new list item when clicking on the "Add" button
function newElement1() {
var li = document.createElement("div");
var inputValue = document.getElementById("myInput1").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL1").appendChild(li);
}
document.getElementById("myInput1").value = "";
// here is the button logic
var btn = document.createElement("button");
var txt = document.createTextNode("button");
btn.appendChild(txt);
li.appendChild(btn);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Create a new list item when clicking on the "Add" button
function newElement2() {
var li = document.createElement("div");
var inputValue = document.getElementById("myInput2").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL2").appendChild(li);
}
document.getElementById("myInput2").value = "";
// here is the button logic
var btn = document.createElement("button");
var txt = document.createTextNode("button");
btn.appendChild(txt);
li.appendChild(btn);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Create a new list item when clicking on the "Add" button
function newElement3() {
var li = document.createElement("div");
var inputValue = document.getElementById("myInput3").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL3").appendChild(li);
}
document.getElementById("myInput3").value = "";
// here is the button logic
var btn = document.createElement("button");
var txt = document.createTextNode("button");
btn.appendChild(txt);
li.appendChild(btn);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Create a new list item when clicking on the "Add" button
function newElement4() {
var li = document.createElement("div");
var inputValue = document.getElementById("myInput4").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL4").appendChild(li);
}
document.getElementById("myInput4").value = "";
// here is the button logic
var btn = document.createElement("button");
var txt = document.createTextNode("button");
btn.appendChild(txt);
li.appendChild(btn);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}<style>
/* Include the padding and border in an element's total width and height */
* {
box-sizing: border-box;
}
body{
background: #fff1d9;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.logo{
right: 90%;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul > div {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul div:nth-child(odd) {
background: rgba(235, 110, 128, 0.6);
}
/* Darker background-color on hover */
ul div:hover {
background: #eb6e80;
}
/* When clicked on, add a background color and strike out text */
ul div.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul div.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #eb6e80;
color: black;
}
/* Style the header */
.header1 {
background-color: rgba(0, 143, 149, 0.76);
padding: 30px 40px;
color: white;
text-align: center;
}
.header2 {
background-color: rgba(233, 176, 0, 0.85);
padding: 30px 40px;
color: white;
text-align: center;
}
.header3 {
background-color: rgba(226, 78, 66, 0.76);
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header1:after, .header2:after, .header3:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
border: none;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 75%;
background: rgb(254, 166, 128);
color: #fff1d9;
float: left;
text-align: center;
font-size: 16px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover {
background-color: rgb(228, 148, 122);
}
/********* USER PROFILE ********/
#myInput {
border-box: box-sizing;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(254, 166, 128, 0.68);
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: rgba(235, 110, 128, 0.65)
}
.show {display:block;}
</style><html>
<head>
<title>Grocery List</title>
<script src="https://use.fontawesome.com/780b259326.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><center style="font-size: 90px; color:#fea680; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;"><b>Shopping List</b></center></div>
<div class="row">
<div class="column">
<div id="myDIV1" class="header1">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Amir's List</h2>
<input type="text" id="myInput1" placeholder="Item...">
<input type="text" placeholder="2nd text box">
<span onclick="newElement1()" class="addBtn">Add</span>
</div>
<ul id="myUL1">
</ul>
</div>
<div class="column">
<div id="myDIV2" class="header2">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Sush's List</h2>
<input type="text" id="myInput2" placeholder="Item...">
<input type="text" placeholder="2nd text box">
<span onclick="newElement2()" class="addBtn">Add</span>
</div>
<ul id="myUL2"></ul>
</div>
<div class="column">
<div id="myDIV3" class="header1">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Daniel's List</h2>
<input type="text" id="myInput3" placeholder="Item...">
<input type="text" placeholder="2nd text box">
<span onclick="newElement3()" class="addBtn">Add</span>
</div>
<ul id="myUL3"></ul>
</div>
<div class="column">
<div id="myDIV4" class="header3">
<h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">House List</h2>
<input type="text" id="myInput4" placeholder="Item...">
<input type="text" placeholder="2nd text box">
<span onclick="newElement4()" class="addBtn">Add</span>
</div>
<ul id="myUL4"></ul>
</div>
</div>
</body>
</html>