内容：
1.todo程序
2.轮播图
1.todo程序
需求：
实现一个todo程序，可以添加数据，可以删除数据，可以修改数据，可以查看所有数据
另外实现自己的一系列弹窗：用于提示用户的提示框、用于警告的提示框、用于输入信息的输入框、用于选择多个选项中的一个选择框
实现效果：
页面：
添加 - 在输入框输入后点击添加如下所示：
删除 - 点击每一条todo的删除如下所示：
编辑 - 点击每一条todo的编辑如下所示：
完成 - 点击每一条todo的完成如下所示：
代码：
HTML:
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现todo程序</title>
<style>
.container{
width: 80%;
margin: 0 auto;
}
.complete{
text-decoration: line-through;
color: red;
}
.todo-cell{
margin: 5px 0;
}
.todo-content{
display: inline-block;
padding: 3px 5px;
border: 1px solid lightblue;
}
.todo-ct{
display: inline-block;
padding: 3px 5px;
border: 1px solid lightblue;
}
button.indent{
margin-right: 12px;
} </style> </head>
<body> <div class="container">
<div class="input-form">
<input type="text" id="id-todo-input">
<button type="button" id="id-button-add">添加</button>
</div>
<div id="todo-list"></div>
</div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="myAlert.js"></script>
<script src="jQuery_todo.js"></script> </body>
</html>
todo程序的HTML
js:
// 封装输出
var log = function() {
console.log.apply(this, arguments)
}; var todoTemplate = function (todo) {
var t = `
<div class="todo-item">
<div class="todo-cell ${todo.complete}">
<span class="todo-content">todo内容: ${todo.task}</span>
<span class="todo-ct">发布时间: ${todo.time}</span>
</div>
<button class="button-delete indent">delete</button>
<button class="button-edit indent">edit</button>
<button class="button-complete indent">complete</button>
</div>
`
return t;
} // 插入新元素
var insertTodo = function (todo) {
// 获得todo-cell的HTML字符串:
var todoItem = todoTemplate(todo); var todoList = $("#todo-list");
todoList.append(todoItem);
}; // 得到当前时间
var currentTime = function () {
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
// 时间格式处理
if(minute <= 9){
minute = "0" +minute
}
if(second <= 9){
second = "0" +second
} var timeString = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
log("now time is: ", timeString);
return timeString
}; // 返回元素在父元素中的位置
var indexOfElement = function($element) {
var element = $element[0]
var parent = element.parentElement;
for (var i = 0; i < parent.children.length; i++) {
var e = parent.children[i];
if (e === element) {
return i
}
}
}; // 保存 todoArray
var saveTodos = function() {
var s = JSON.stringify(todoArray);
localStorage.todoArray = s;
}; // 导出 todoArray
var loadTodos = function() {
var s = localStorage.todoArray;
return JSON.parse(s);
}; // 获得当前页面的todo对应的数据
var getTodo = function ($divEle) {
// divEle是todo所在的div元素
var index = indexOfElement($divEle);
todoArray = loadTodos();
return todoArray[index];
}; // 删除某个todo
var deleteTodo = function ($divEle) {
// divEle是todo所在的div元素
var index = indexOfElement($divEle) - 1;
$divEle.remove();
todoArray = loadTodos();
todoArray.splice(index, 1);
saveTodos();
}; // 事件处理相关:
// 响应事件函数:
var bindEventAdd = function () {
$("#id-button-add").on('click', function () {
log("button-add click"); myAlert2("确认", "是否添加", function (b) {
if(b){
var task = $("#id-todo-input").val();
var todo = {
"task": task,
"time": currentTime(),
"complete": false
};
// 将数据存入数组中
todoArray = loadTodos();
todoArray.push(todo);
saveTodos();
// 插入todo-list:
insertTodo(todo)
}
})
});
}; var bindEventButton = function () {
// bindEventButton -> 复制todo所在div中的3个按钮的响应
$("#todo-list").on('click', function (event) {
log('click: ', event, event.target);
// 获得点击对象和其父元素(todo的div)
var $target = $(event.target);
var $todoDiv = $(event.target.parentElement); // complete
if($target.hasClass('button-complete')) {
log('complete')
myAlert2("确认", "是否完成", function (b) {
if(b){
$todoDiv.find(".todo-cell").toggleClass("complete")
item = getTodo($todoDiv);
item.complete = !item.complete;
saveTodos();
}
})
}
// delete
else if ($target.hasClass('button-delete')) {
log('delete')
myAlert2("确认", "是否删除", function (b) {
if(b){
deleteTodo($todoDiv)
}
}) }
// edit
else if ($target.hasClass('button-edit')) {
log('edit');
myAlert3("请输入todo内容:", function (clickOk, input) {
if(clickOk){
log(clickOk, input)
var index = indexOfElement($todoDiv)
log(index)
todoArray = loadTodos();
todoArray[index].task = input
saveTodos()
log(($target.parent().find(".todo-content"))[0])
$target.parent().find(".todo-content").html("todo内容: "+input)
}
})
}
});
}; // 绑定事件:
var bindEvents = function () {
// 添加todo
bindEventAdd();
// 完成按钮和删除按钮和编辑按钮
bindEventButton(); }; todoComplete = {
true: "complete",
false: ""
}; // 初始化todo:
var initTodos = function () {
var todoArray = loadTodos();
for (var i = 0; i < todoArray.length; i++) {
var todo = todoArray[i];
todo.complete = todoComplete[todo.complete];
insertTodo(todo);
}
}; // 存储数据
var todoArray = [];
// 程序主入口
var __main = function (){
// 绑定事件:
bindEvents(); // 程序加载后, 加载 todoArray 并且添加到页面中
initTodos(); }; __main();
todo程序对应的js文件
var log = function () {
console.log.apply(this, arguments);
};
// 自定义弹窗系列
// 用于提示用户的提示框
var myAlert = function (title, message) {
/*
title 是 string
message 是 string
这个函数生成一个弹窗插入页面
弹窗包含 title 作为标题 和 message 作为信息
还包含一个 OK 按钮 点击 OK 按钮关闭弹窗
*/
// 插入弹窗
var t = `
<div class="modal-container modal-remove">
<div class="modal-mask"></div>
<div class="modal-alert vertical-center">
<div class="modal-title">${title}</div>
<div class="modal-message">${message}</div>
<div class="modal-control">
<button class="modal-button" type="button" name="button">OK</button>
</div>
</div>
</div>`
$('body').append(t)
// 插入CSS
var css = `
<style class="modal-remove">
.modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
}
.modal-alert {
width: 200px;
margin: 0 auto;
opacity: 1;
background: #eeeeee;
}
.modal-title{
text-align: center;
font-size: 18px;
background: lightblue;
}
.modal-message{
padding: 15px 5px;
}
.modal-button{
width: 100%;
height: 100%;
font-size: 22px;
border: 0;
}
.vertical-center {
top: 50%;
position: relative;
transform: translateY(-50%);
}
</style>
`
$('head').append(css)
$('.modal-button').on('click', function () {
log("click ok")
$(".modal-remove").remove()
})
};
// 用于警告的提示框
var myAlert2 = function (title, message, callback) {
/*
title 是 string
message 是 string
callback 是一个接受一个 bool 类型参数的函数
这个函数生成一个上课所说的弹窗插入页面
弹窗包含 title 作为标题 和 message 作为信息
还包含一个 OK 按钮 和一个 Cancel 按钮
点击 OK 按钮关闭弹窗, 调用 callback(true)
点击 Cancel 按钮关闭弹窗, 调用 callback(false)
*/
// 插入弹窗
var t = `
<div class="modal-container modal-remove">
<div class="modal-mask"></div>
<div class="modal-alert vertical-center">
<div class="modal-title">${title}</div>
<div class="modal-message">${message}</div>
<div class="modal-control">
<button class="modal-button" type="button" name="button" data-type="cancel">Cancel</button><button class="modal-button" type="button" name="button" data-type="ok">OK</button>
</div>
</div>
</div>`
$('body').append(t)
// 插入CSS
var css = `
<style class="modal-remove">
.modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
}
.modal-alert {
width: 200px;
margin: 0 auto;
opacity: 1;
background: #eeeeee;
}
.modal-title{
text-align: center;
font-size: 18px;
background: lightblue;
}
.modal-message{
padding: 15px 5px;
}
.modal-control{
font-size: 0;
}
.modal-button{
width: 50%;
height: 100%;
font-size: 22px;
border: 1px solid #fe78ff;
}
.vertical-center {
top: 50%;
position: relative;
transform: translateY(-50%);
}
</style>
`
$('head').append(css)
$('.modal-button').on('click', function (event) {
log("click button")
var type = $(event.target).data('type')
if (type === 'cancel'){
callback(false)
} else{
callback(true)
}
$(".modal-remove").remove()
})
}
// 用于输入信息的输入框
var myAlert3 = function (title, callback) {
/*
title 是 string
callback 是一个如下的函数:
function(clickOk, input) {
// clickOk 是一个 bool 表明点击的是 OK 还是 Cancel
// input 是 string
}
这个函数生成一个上课所说的弹窗插入页面
弹窗包含 title 作为标题
包含一个 input 让用户输入信息
还包含一个 OK 按钮 和一个 Cancel 按钮
点击 OK 按钮关闭弹窗, 调用 callback(true, 输入的内容)
点击 Cancel 按钮关闭弹窗, 调用 callback(false)
*/
// 插入弹窗
var t = `
<div class="modal-container modal-remove">
<div class="modal-mask"></div>
<div class="modal-alert vertical-center">
<div class="modal-title">${title}</div>
<div class="modal-message">
<input type="text" class="modal-input">
</div>
<div class="modal-control">
<button class="modal-button" type="button" name="button" data-type="cancel">Cancel</button>
<button class="modal-button" type="button" name="button" data-type="ok">OK</button>
</div>
</div>
</div>`
$('body').append(t)
// 插入CSS
var css = `
<style class="modal-remove">
.modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
}
.modal-alert {
width: 200px;
margin: 0 auto;
opacity: 1;
background: #eeeeee;
}
.modal-title{
text-align: center;
font-size: 18px;
background: lightblue;
}
.modal-message{
padding: 15px 5px;
}
.modal-input{
width: 100%;
height: 100%;
}
.modal-control{
font-size: 0;
}
.modal-button{
width: 50%;
height: 100%;
font-size: 22px;
border: 1px solid #fe78ff;
}
.vertical-center {
top: 50%;
position: relative;
transform: translateY(-50%);
}
</style>
`
$('head').append(css)
$('.modal-button').on('click', function (event) {
log("click button")
var type = $(event.target).data('type')
if (type === 'cancel'){
callback(false)
} else{
var value = $('.modal-input').val()
callback(true, value)
}
$(".modal-remove").remove()
})
}
// 用于选择多个选项中的一个选择框
var buttonTemplate = function(title, index) {
var t = `
<button class='modal-action-button' data-index="${index}">${title}</button>
`
return t
}
var myAlert4 = function (title, actions, callback) {
/*
title 是 string
actions 是一个包含 string 的数组
callback 是一个如下的函数:
function(index) {
// index 是下标, 具体如下
// index 如果是 -1 表明用户点击了 cancel
}
这个函数生成一个弹窗页面
弹窗包含 title 作为标题
actions 里面的 string 作为标题生成按钮
弹窗还包含一个 Cancel 按钮
点击按钮的时候, 调用 callback(index)
*/
var buttons = []
for(var i=0; i<actions.length; i++){
buttons.push(buttonTemplate(actions[i], i))
}
var actionButtons = buttons.join('')
// 插入弹窗
var t = `
<div class="modal-container modal-remove">
<div class="modal-mask"></div>
<div class="modal-alert vertical-center">
<div class="modal-title">${title}</div>
<div class="modal-message">
${actionButtons}
</div>
<div class="modal-control">
<button class="modal-button-cancel" type="button" name="button">Cancel</button>
</div>
</div>
</div>`
$('body').append(t)
// 插入CSS
var css = `
<style class="modal-remove">
.modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
}
.modal-alert {
width: 200px;
margin: 0 auto;
opacity: 1;
background: #eeeeee;
}
.modal-title{
text-align: center;
font-size: 18px;
background: lightblue;
}
.modal-message{
text-align: center;
padding: 15px 5px;
}
.modal-action-button{
width: 100%;
font-size: 15px;
}
.modal-control{
font-size: 0;
}
.modal-button-cancel{
width: 100%;
height: 100%;
font-size: 22px;
border: 1px solid #fe78ff;
}
.vertical-center {
top: 50%;
position: relative;
transform: translateY(-50%);
}
</style>
`
$('head').append(css)
$('.modal-button-cancel').on('click', function(event){
console.log('click cancel button')
$('.modal-remove').remove()
})
$('.modal-action-button').on('click', function(event){
console.log('click action button')
var index = $(event.target).data('index')
callback(index, actions[index])
$('.modal-remove').remove()
})
}
自定义弹窗的js文件
2.轮播图
需求：做一个轮播图，和京东首页的轮播图差不多
代码如下：
<!-- author: wyb -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery实现轮播</title>
<style>
.vertical-center{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.container{
width: 30%;
margin: 0 auto;
}
.slide{
width: 300px;
height: 200px;
margin-top: 166px;
}
.slide-imgs{
position: relative;
width: 100%;
height: 100%;
}
.slide-img{
display: none;
width: 100%;
height: 100%;
}
.slider-img-active{
display: block;
}
/* 轮播图按钮 */
.slider-button{
position: absolute;
border: 0;
background: rgba(156, 156, 156, 0.78);
color: white;
padding: 15px 5px;
}
.slider-button:hover{
background: rgba(53, 53, 53, 0.76);
}
.slider-button-left{
float: left;
left: 0;
}
.slider-button-right{
float: right;
right: 0;
}
/* 轮播图指示器 */
.slide-indicators{
position: relative;
height: 22px;
line-height: 22px;
bottom: 27px;
/*background: gray;*/
text-align: center;
}
.slide-i{
color: white;
display: inline-block;
background: gray;
border-radius: 50%;
padding: 0 6px;
margin: 0 3px;
}
.slide-i-active{
background: red;
} </style>
</head>
<body> <div class="container">
<div class="slide">
<div class="slide-imgs" data-active="0" data-imgs="4">
<img src="img/1.jpg" alt="1" class="slide-img slider-img-active">
<img src="img/2.jpg" alt="2" class="slide-img">
<img src="img/3.jpg" alt="3" class="slide-img">
<img src="img/4.jpg" alt="4" class="slide-img">
<button class="slider-button slider-button-left vertical-center" type="button">
<span><strong><</strong></span>
</button>
<button class="slider-button slider-button-right vertical-center" type="button">
<span><strong>></strong></span>
</button>
</div>
<div class="slide-indicators">
<div class="slide-i slide-i-active">1</div>
<div class="slide-i">2</div>
<div class="slide-i">3</div>
<div class="slide-i">4</div>
</div>
</div>
</div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script>
// 改变下方的指示器
var changeIndicator = function (index) {
$(".slide-i-active").removeClass("slide-i-active")
$($(".slide-i")[index]).addClass("slide-i-active")
} // 轮播
var play = function (offset) {
var activeIndex = $(".slide-imgs").data("active")
var imgNumber = $(".slide-imgs").data("imgs")
var index = (activeIndex + imgNumber + offset) % imgNumber
$(".slide-imgs").data("active", index)
//
$(".slider-img-active").removeClass("slider-img-active")
//
var avtive = $($(".slide-img")[index])
avtive.addClass("slider-img-active")
return index
} // 向前轮播
var playPrev = function () {
var i = play(-1)
changeIndicator(i)
} // 向后轮播
var playNext = function () {
var j = play(1)
changeIndicator(j)
} // Next和Before按钮
$(".slider-button").on("click", function (event) {
var $button = $(event.target);
if($button.hasClass('slider-button-left')){
playPrev()
} else{
playNext()
} }) // 指示器点击效果
$(".slide-indicators").on("click", function (event) {
var $target = $(event.target)
if($target.hasClass("slide-i")){
var v = $target.text()
//
$(".slider-img-active").removeClass("slider-img-active")
$($(".slide-img")[v-1]).addClass("slider-img-active")
$(".slide-imgs").data("active", v-1)
//
changeIndicator(v-1)
} }) // 定时自动轮播 3s换一次
setInterval(function () {
var j = play(1)
changeIndicator(j)
}, 3000) </script> </body>
</html>