|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
- <title>Document</title>
- <style>
- input{
- display:inline-block;
- }
- .one{
- width:500px;
- height:400px;
- background-color:yellow;
- overflow:scroll;
- }
- .two{
- width:500px;
- height:500px;
- background-color:aqua;
- }
- .one li{
- width:300px;
- margin:0 auto;
- background-color:antiquewhite;
- margin-top:20px;
-
- }
- .one li p{
- display:inline-block;
- text-align:center;
- margin-left:70px;
- }
- .one li a{
- margin-left:100px;
- text-decoration:none;
- color:red;
- }
-
- </style>
- </head>
- <body>
- <!-- <form>如果添加了<from>需要把按回车键自动刷新是form的特性
- 如果你一定要监听回车事件 就要取消这个特性 阻止form的自动提交 -->
- <form>
- <input id="usname" value="sd" >
- <input id="checked" type="checkbox">
- <button>添加</button>
- </form>
- <div class="one">
- <ol></ol>
- </div>
- <div class="two">
- <ol></ol>
- </div>
- <script>
- var todolist=[
- {
- title:'未来很美好',
- done:false,
- },
- {
- title:'美好的一天',
- done:false,
- },
- ];
-
- //
- let ipt=document.querySelector('#usname');
- const checked=document.querySelector('#checked');
- const btn=document.querySelector('button');
- const one=document.querySelector('.one');
- const two=document.querySelector('.two');
- const ol1=one.querySelector('ol');
- const ol2=two.querySelector('ol');
- console.log(ol1);
- console.log(ol2);
-
- //
- // 本地存储里只能存储字符串的数据格式,把我们的数组对象转换为字符串格式 JSON.stringfy();
- localStorage.setItem('todo',JSON.stringify(todolist));
- // localStorage.setItem('todo',todolist);
- let data=localStorage.getItem('todo');
- data=JSON.parse(data);
- load();
- ipt.addEventListener('keydown',function(event){
- if(event.keyCode===13){
- //先获取本地存储的数据
- var local=getdate();
- // console.log(local[0]);
- //更新local数组中的数据(将新的数据追加进去);
- local.push({title:this.value,done:false});
- //把更新了的数组local存储给本都存储
- savadate(local);
- // 页面渲染数据
- load();
- }
-
- });
- //读取本地存储的数据
- function getdate(){
- var data=localStorage.getItem('todolist');
- if(data!==null){
- return JSON.parse(data);
- }
- else {
- return [];
- }
- }
- //将数据存储进本地存储必须是字符串格式所以用JSON.stringify()转化。
- //将数据从本地存储中取出来,需要将字符串转化为对象用JSON.parse();
- //将更新的数组存储给本地存储及替换掉以前的就数组本地存储数据
- function savadate(data){
- localStorage.setItem('todolist',JSON.stringify(data));
- }
- function load(){
- var data=getdate();
- console.log(data.length);
- for(var i=0;i<data.length;i++){
- var li=document.createElement('li');
- li.setAttribute('index',i);
- ol1.appendChild(li);
- li.innerHTML='<input type='+'checkbox'+'>'+'<p>'+data[i].title+'</p><a href="javascript:;">删除</a>'
- //删除li
- li.children[2].addEventListener('click',function(){
- ol1.removeChild(this.parentNode);
- const ipt=ol1.querySelector('input');
- var flag=0;
- ipt.addEventListener('click',function(){
- if(flag==0 && this.checked==true){
- ol2.appendChild(this.parentNode);
- flag=1;
- alert('11');
- }
- })
- if(flag==1 && this.checked==true){
- ol1.appendChild(this.parentNode);
- flag=0;
- alert('11');
- }
- })
- }
- }
-
- </script>
- </body>
- </html>
复制代码 |
|