css 样式
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #cdcdcd;
}
header {
height: 62px;
background: #333;
background: rgba(35, 35, 35, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 32px;
margin-top: 15px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none;
}
input:focus {
outline-width: 0;
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #e6e6fa;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629a9c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #fff;
background: #ccc;
line-height: 14px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
html 需要引入一下 jq插件 网上下载一下就可以
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>ToDoList </title>
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<header>
<section>
<form>
<input
type="text"
id="title"
name="title"
class="input"
placeholder="添加ToDo"
required="required"
autocomplete="off"
/>
</form>
</section>
</header>
<section>
<h2>正在进行 <span id="todocount">3</span></h2>
<ol id="todolist" class="demo-box">
<li>
<input type="checkbox" />
<p>吃饭</p>
<a href="javascript:;">-</a>
</li>
<li>
<input type="checkbox" />
<p>睡觉</p>
<a href="javascript:;">-</a>
</li>
<li>
<input type="checkbox" />
<p>打豆豆</p>
<a href="javascript:;">-</a>
</li>
</ol>
<h2>已经完成 <span id="donecount">2</span></h2>
<ul id="donelist">
<li>
<input type="checkbox" checked="checked" />
<p>喝酒</p>
<a href="javascript:;">-</a>
</li>
<li>
<input type="checkbox" checked="checked" />
<p>蹦迪</p>
<a href="javascript:; " class="li3">-</a>
</li>
</ul>
</section>
<footer>
<p>
Copyright © 2021
<a href="javascript:;">京ICP备15058198号</a>
</p>
<p>
您当前的ip地址是：<strong id="ipv4">https://api.i‐lynn.cn/getIpInfo</strong
>，地理位置：<strong id="addr">北京市 电信互联网数据交换中心</strong>
</p>
</footer>
<script src="./assets/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./assets/js/index.js"></script>
</body>
</html>
js
$(function () {
var $title = $("#title");
load();
$("#title").on("keydown", function (event) {
if (event.keyCode === 13) {
if ($(this).val() === "") {
window.alert('你还没有添加')
} else {
var local = getDate();
// console.log(local);
local.push({
title: $(this).val(),
done: false
});
saveDate(local);
load();
$(this).val("");
}
}
});
// 3. toDoList 删除操作
$("ol, ul").on("click", "a", function () {
var data = getDate();
console.log(data);
var index = $(this).attr("id");
console.log(index);
data.splice(index, 1);
saveDate(data);
load();
});
$("ol, ul").on("click", "input", function () {
var data = getDate();
var index = $(this).siblings("a").attr("id");
console.log(index);
data[index].done = $(this).prop("checked");
console.log(data);
saveDate(data);
load();
});
function getDate() {
var data = localStorage.getItem("todolist");
if (data !== null) {
return JSON.parse(data);
} else {
return [];
}
}
function saveDate(data) {
localStorage.setItem("todolist", JSON.stringify(data));
}
function load() {
var data = getDate();
console.log(data);
$("ol, ul").empty();
var todoCount = 0;
var doneCount = 0;
$.each(data, function (i, n) {
if (n.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
doneCount++;
} else {
$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
todoCount++;
}
});
$("#todocount").text(todoCount);
$("#donecount").text(doneCount);
}
})
$(function () {
$.ajax({
type: "get",
url: "https://www.fastmock.site/mock/5199a9d4f7bb99d4ffb8eb29bef98c7a/_data/api/text",
success: function (res) {
console.log(res);
$("#ipv4").html(res.data.ip);
$("#addr").html(res.data.country + " "+ res.data.area);
},
error: function (err) {
console.log(err);
}
})
});vue 实现
<template>
<div>
<my-input @enter="submit"></my-input>
<hr>
<list title="正在进行" :data="list" @set-done="changeDone" @del="delItem"></list>
<list title="已完成" :data="list" done @set-done="changeDone" @del="delItem"></list>
</div>
</template>
<script>
import Input from '@/components/Input.vue'
import List from '@/components/List.vue'
export default {
components: {
'my-input':Input,
List
},
data(){
return {
list: [], //所有数据
}
},
methods: {
submit(val){ //添加数据
this.list.push({
name: val,
done: false //初始化数据的完成状态为，正在进行
})
},
changeDone(item,index){ //用于修改状态的事件函数
item.done = !item.done
console.log(item)
},
delItem(item){//删除元素
let index = this.list.indexOf(item)
if(index != -1){
this.list.splice(index,1)
}
}
}
}
</script>
<style>
</style>Input.vue
<template>
<input type="text" v-model="value" @keypress.enter="handleKey">
</template>
<script>
export default {
data(){
return {
value: ''
}
},
methods: {
handleKey(){
this.$emit('enter',this.value)
this.value = ''
}
}
}
</script>
<style>
</style>List.vue
<template>
<div>
<h3>{{title}}({{showData.length}})</h3>
<ul>
<li v-for="(item,index) in showData" :key="index">
<input type="checkbox" :checked="item.done" @click.prevent="handleChangeDone(item,index)">
<div v-if="index === updateIndex">
<input type="text" class="update-input" v-model="item.name" @blur="updateIndex = -1" @keypress.enter="updateIndex = -1" ref="updateInp" id="ui">
</div>
<div v-else class="text" @click="clickText(index)">{{item.name}}</div>
<button @click="handleDel(item)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
title: String,
data: Array, //原始数据
done: { //判断当前要遍历的元素状态，true遍历已完成，false遍历未完成
type: Boolean,
default: false
}
},
data(){
return {
updateIndex: -1 //要修改的元素下标
}
},
computed: {
showData(){ //用于展示的数组
return this.data.filter(item=>{
return item.done == this.done
})
}
},
updated(){
let inp = document.getElementById('ui')
if(inp){
inp.focus()
}
},
methods: {
handleChangeDone(item,index){
this.$emit('set-done',item,index)
},
clickText(index){ //点击文本要改变状态为修改状态
this.updateIndex = index
},
handleDel(item){
this.$emit('del',item)
}
}
}
</script>
<style scoped>
ul{
list-style: none;
margin: 0;
padding: 0;
}
li{
height: 40px;
margin: 10px 0px;
display: flex;
align-items: center;
}
.text{
height: 26px;
width: 260px;
cursor: pointer;
}
.update-input{
width: 260px;
height: 30px;
}
</style>
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
