<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<style>
?? ??? ??? ?* {
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ?}
?? ??? ??? ?ul,
?? ??? ??? ?ol {
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ?}
?? ??? ??? ?a {
?? ??? ??? ??? ?text-decoration: none;
?? ??? ??? ?}
?? ??? ??? ?body {
?? ??? ??? ??? ?background-color: darkgray;
?? ??? ??? ?}
?? ??? ??? ?header {
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?min-width: 1434px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background-color: rgba(47, 47, 47, 0.98);
?? ??? ??? ?}
?? ??? ??? ?header section {
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?margin: 0px auto;
?? ??? ??? ?}
?? ??? ??? ?header section label {
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?color: rgb(221, 221, 221);
?? ??? ??? ??? ?line-height: 50px;
?? ??? ??? ??? ?font-size: 24px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?header section input {
?? ??? ??? ??? ?width: 360px;
?? ??? ??? ??? ?height: 24px;
?? ??? ??? ??? ?margin-top: 12px;
?? ??? ??? ??? ?float: right;
?? ??? ??? ??? ?padding-left: 20px;
?? ??? ??? ??? ?padding-top: 1px;
?? ??? ??? ??? ?padding-right: 2px;
?? ??? ??? ??? ?padding-bottom: 1px;
?? ??? ??? ??? ?border-radius: 5px 5px 5px 5px;
?? ??? ??? ??? ?border: none;
?? ??? ??? ??? ?outline: none;
?? ??? ??? ?}
?? ??? ??? ?section h2 {
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?margin: 0px auto;
?? ??? ??? ??? ?margin-top: 20px;
?? ??? ??? ??? ?margin-bottom: 20px;
?? ??? ??? ?}
?? ??? ??? ?section span {
?? ??? ??? ??? ?float: right;
?? ??? ??? ??? ?background-color: rgb(230, 230, 250);
?? ??? ??? ??? ?width: 9px;
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?padding-left: 5px;
?? ??? ??? ??? ?padding-right: 5px;
?? ??? ??? ??? ?border-radius: 50px;
?? ??? ??? ??? ?font-size: 14px;
?? ??? ??? ??? ?line-height: 20px;
?? ??? ??? ?}
?? ??? ??? ?section {
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?margin: 0px auto;
?? ??? ??? ?}
?? ??? ??? ?footer {
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?margin: 0px auto;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?color: rgb(102, 102, 102);
?? ??? ??? ??? ?font-size: 14px;
?? ??? ??? ?}
?? ??? ??? ?footer a {
?? ??? ??? ??? ?color: rgb(153, 153, 153);
?? ??? ??? ?}
?? ??? ??? ?ol li{
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?margin-bottom: 10px;
?? ??? ??? ?}
?? ??? ??? ?ol li input{
?? ??? ??? ??? ?width: 22px;
?? ??? ??? ??? ?height: 22px;
?? ??? ? ? ? ? ?margin-top: 2px;
?? ??? ??? ??? ?top: 2px;
?? ??? ??? ??? ?left: 10px;
?? ??? ??? ??? ?margin-left: 4px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ?}
?? ??? ??? ?ol li p{
?? ??? ??? ??? ?width: 506px;
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?padding-left: 45px;
?? ??? ??? ??? ?padding-right: 45px;
?? ??? ??? ??? ?background-color: rgb(255, 255, 255);
?? ??? ??? ??? ?border-left: 5px solid rgb(98, 154, 156);
?? ??? ??? ??? ?line-height: 32px;
?? ??? ??? ?}
?? ??? ??? ?ol li a{
?? ??? ??? ??? ?width: 14px;
?? ??? ??? ??? ?height: 12px;
?? ??? ??? ??? ?right: 5px;
?? ??? ??? ??? ?top: 5px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?border: 6px solid rgb(255, 255, 255);
?? ??? ??? ??? ?background-color: rgb(204, 204, 204);
?? ??? ??? ? ? ?margin-left: 2px;
?? ??? ??? ??? ?font-size: 14px;
?? ??? ??? ??? ?padding-left: 6px;
?? ??? ??? ??? ?border-radius: 14px 14px 14px 14px;
?? ??? ??? ??? ?color: rgb(255, 255, 255);
?? ??? ??? ?}
?? ??? ??? ?ul li{
?? ??? ??? ??? ?width: 600px;
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?margin-bottom: 10px;
?? ??? ??? ?}
?? ??? ??? ?ul li input{
?? ??? ??? ??? ?width: 22px;
?? ??? ??? ??? ?height: 22px;
?? ??? ??? ? ? ?margin-top: 2px;
?? ??? ??? ??? ?top: 2px;
?? ??? ??? ??? ?left: 10px;
?? ??? ??? ??? ?margin-left: 4px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ?}
?? ??? ??? ?ul li p{
?? ??? ??? ??? ?width: 506px;
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?padding-left: 45px;
?? ??? ??? ??? ?padding-right: 45px;
?? ??? ??? ??? ?background-color: rgb(255, 255, 255);
?? ??? ??? ??? ?border-left: 5px solid rgb(98, 154, 156);
?? ??? ??? ??? ?line-height: 32px;
?? ??? ??? ?}
?? ??? ??? ?ul li a{
?? ??? ??? ??? ?width: 14px;
?? ??? ??? ??? ?height: 12px;
?? ??? ??? ??? ?right: 5px;
?? ??? ??? ??? ?top: 5px;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?border: 6px solid rgb(255, 255, 255);
?? ??? ??? ??? ?background-color: rgb(204, 204, 204);
?? ??? ??? ? ? ?margin-left: 2px;
?? ??? ??? ??? ?font-size: 14px;
?? ??? ??? ??? ?padding-left: 6px;
?? ??? ??? ??? ?border-radius: 14px 14px 14px 14px;
?? ??? ??? ??? ?color: rgb(255, 255, 255);
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<div id="app">
?? ??? ??? ?<header>
?? ??? ??? ??? ?<section>
?? ??? ??? ??? ??? ?<form action="javascript:postaction()" id="form">
?? ??? ??? ??? ??? ??? ?<label for="title">ToDoList</label>
?? ??? ??? ??? ??? ??? ?<input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
?? ??? ??? ??? ??? ??? ??? ?autocomplete="off" v-model="message" @keydown="down($event)">
?? ??? ??? ??? ??? ?</form>
?? ??? ??? ??? ?</section>
?? ??? ??? ?</header>
?? ??? ??? ?<section>
?? ??? ??? ??? ?<!-- ?? ??? ? οnclick="save()" -->
?? ??? ??? ??? ?<h2>正在进行 <span id="todocount">{{arr.length}}
?? ??? ??? ??? ?</span></h2>
?? ??? ??? ??? ?<ol id="todolist" class="demo-box" v-for="(item,index) in arr" :key="item">
?? ??? ??? ??? ??? ?<li draggable="true"><input type="checkbox" @change="update(index)" >
?? ??? ??? ??? ??? ??? ?<p id="p-0" οnclick="edit(0)">{{item}}</p><a href="javascript:remove(0)" @click="removed(index)">-</a>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ?</ol>
?? ??? ??? ??? ?<h2>已经完成 <span id="donecount">{{Arrays.length}}</span></h2>
?? ??? ??? ??? ?<ul id="donelist" v-for="(item,index) in Arrays" :key="item">
?? ??? ??? ??? ??? ?<li draggable="true"><input type="checkbox" @change="date(index)" checked>
?? ??? ??? ??? ??? ??? ?<p id="p-0" οnclick="edit(0)">{{item}}</p><a href="javascript:remove(0)" @click="remove(index)">-</a>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</section>
?? ??? ??? ?<footer>
?? ??? ??? ??? ?Copyright ? 2024 todolist.cn <a href="javascript:clear();" @click="clear()">clear</a>
?? ??? ??? ?</footer>
?? ??? ?</div>
?? ??? ?<script src='lib/vue.global.js'></script>
?? ??? ?<script>
?? ??? ??? ?const {
?? ??? ??? ??? ?createApp
?? ??? ??? ?} = Vue
?? ??? ??? ?const app = createApp({
?? ??? ??? ??? ?data() {
?? ??? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ??? ?message: '',
?? ??? ??? ??? ??? ??? ?arr: [],
?? ??? ??? ??? ??? ??? ?Arrays:[]
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods: {
?? ??? ??? ??? ??? ?down(e) {
?? ??? ??? ??? ??? ??? ?if (e.keyCode === 13&&this.message.trim()!='') {
?? ??? ??? ??? ??? ??? ??? ?this.arr.push(this.message)
?? ??? ??? ??? ??? ??? ??? ?this.message=' '
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?update(i){
?? ??? ??? ??? ??? ??? ??? ?this.Arrays.push(this.arr[i])
?? ??? ??? ??? ??? ??? ?this.arr=this.arr.filter((item,index)=>{
?? ??? ??? ??? ??? ??? ??? ?return i!=index
?? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?date(i){
?? ??? ??? ??? ??? ??? ?this.arr.push(this.Arrays[i])
?? ??? ??? ??? ??? ??? ?this.Arrays=this.Arrays.filter((item,index)=>{
?? ??? ??? ??? ??? ??? ??? ??? ?return i!=index
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?remove(i){
?? ??? ??? ??? ??? ??? ?this.Arrays=this.Arrays.filter((item,index)=>{
?? ??? ??? ??? ??? ??? ??? ??? ?return i!=index
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?removed(i){
?? ??? ??? ??? ??? ??? ?this.arr=this.arr.filter((item,index)=>{
?? ??? ??? ??? ??? ??? ??? ??? ?return i!=index
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?clear(){
?? ??? ??? ??? ??? ??? ?this.Arrays=[]
?? ??? ??? ??? ??? ??? ?this.arr=[]
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ??? ?app.mount('#app')
?? ??? ?</script>
?? ?</body>
</html>