html 任务列表：HTML，JavaScript，CSS，Bootstrap
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 任务列表：HTML，JavaScript，CSS，Bootstrap相关的知识，希望对你有一定的参考价值。
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
h1 {
font-size: 36px;
font-weight: 400;
color: rgba(39, 135, 255, 0.9);
}
html, body {
font-family: 'Indie Flower', sans-serif;
}
h1 {
font-size: 36px;
font-weight: 400;
color: rgba(39, 135, 255, 0.9);
}
.main {
margin-top: 50px;
}
form.input {
background: #f0f0f0;
border: none;
border-left: 2px solid #fff;
font-size: 36px;
padding-left: 20px;
width: 100%;
transition: background 2s, border-left 2s;
}
form.input:focus {
background: #fff;
border-left: 2px solid #000;
box-shadow: none;
outline: none;
}
button.btn {
background: transparent;
border: 2px solid #000;
color: #00f28f;
cursor: pointer;
font-size: 36px;
padding: 20px 24px;
transition: background 2s, color 2s;
}
button.btn.hover{
background: #00f28f;
color: #fff;
}
tasks {
margin-top: 20px;
list-style: none;
padding-left: 0px;
}
li {
padding-left: 20px;
border-left: 3px solid #000;
font-size: 36px;
margin: 25px 0 0px;
}
fa.fa-check {
color: rgba(76, 141, 44, 0.9);
}
fa.fa-times {
color: rgba(215, 40, 40, 0.9);
padding-right: 10px;
padding-left: 10px;
}
fa.fa-calendar {
padding-right: 15px;
}
li.done {
background: #CCFF99;
}
class Task {
constructor(id, description, entryDate, isCompleted) {
this.id = id;
this.description = description;
this.entryDate = entryDate;
this.isCompleted = isCompleted;
}
}
var main = () => {
// Add date in page title
var today = new Date().toDateString();
var myTasks = [];
$('h1').append(`My tasks for today, ${today}`);
// Add task
$('form').submit((event) => {
var input = $(event.target).find('input');
var description = input.val();
if (description != "") {
var currentTaskCount = $("#tasks").children().length;
task = new Task(currentTaskCount + 1, description, today, false);
myTasks.push(task);
var html = $('<li>').html(`<i class="fa fa-check"></i><i class="fa fa-times"></i>${task.description}`);
html.appendTo('#tasks');
input.val("");
}
return false;
});
// Remove task
$('#tasks').on('click', '.fa.fa-times', function(event) {
console.log($(this).closest("li").index());
var selectedTask = $(this).closest("li").index();
myTasks.splice(selectedTask, 1);
$(this).closest("li").remove();
console.log(myTasks);
});
// Highlight task
$('#tasks').on('click', '.fa.fa-check', function(event) {
var selectedTask = $(this).closest("li").index();
$(this).closest("li").toggleClass('done');
if ($(this).closest("li").hasClass('done')) {
myTasks[selectedTask].isCompleted = true;
}
else {
myTasks[selectedTask].isCompleted = false;
}
console.log(myTasks);
});
};
$(document).ready(main);
<!DOCTYPE html><html lang="en"><meta charset=utf-8>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<link href='styles/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>
<i class="fa fa-calendar"></i>
</h1>
</div>
</div>
</div>
</header>
<div class="main">
<div class="container">
<div class="row">
<form class="form">
<div class="col-xs-12 col-md-4">
<input id="comment" type="text" placeholder="Write description">
</div>
<div class="col-xs-12 col-md-4">
<button type="submit" class="button">
<i class="fa fa-plus"></i>Add task
</button>
</div>
</form>
</div>
<ul class="tasks" id="tasks"></ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>
以上是关于html 任务列表：HTML，JavaScript，CSS，Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章