zoukankan      html  css  js  c++  java
  • toDo

      1 ;(function(){
      2     'use strict';
      3     var $form_add_task=$('.add-task')
      4         ,task_list=[]
      5         ,$task_delete
      6         ,$task_delete_trigger
      7         ,$task_detail=$('.task-detail')
      8         ,$task_detail_trigger
      9         ,$task_detail_mask=$('.task-detail-mask')
     10         ,current_index
     11         ,$update_form//专门用于更新详情内容的form;
     12         ,$task_detail_content
     13         , $task_detail_content_input
     14         , $checkbox_complete
     15         ,msg
     16         ,$msg=$('.msg')
     17         ,$msg_content=$msg.find('.msg-content')
     18         ,$msg_confirm=$msg.find('.confirmed')
     19         ,$alerter=$('.alerter')
     20         ,$body=$('body')
     21         ,informed
     22         ,$window=$(window)
     23         ,confirmed
     24         ;
     25     init();
     26     pop('abc')
     27         .then(function(r){
     28             if(r){
     29                 console.log('r',r);
     30             }
     31         })
     32 
     33 
     34 
     35 
     36     $form_add_task.on("submit",on_add_task_form_submit);
     37 
     38 
     39 
     40 
     41     function  on_add_task_form_submit(e) {
     42         e.preventDefault();
     43         var new_task = {},
     44             $input;
     45         $input = $(this).find('input[name=content]');
     46         new_task.content = $input.val();
     47         // console.log('new_task',new_task);
     48         if (!new_task.content) return;
     49         if (add_task(new_task)) {
     50             render_task_list();//提交新加任务的时候要调用渲染下面任务列表函数;
     51             $input.val(null);
     52         }
     53     }
     54 
     55 
     56 
     57 
     58 
     59 
     60 
     61 
     62 
     63 
     64 
     65 
     66     function add_task(new_task){
     67         task_list.push(new_task);
     68         // store.set('task_list',task_list);
     69         // console.log('task_list',task_list);
     70         refresh_task_list();
     71         // store.clear();
     72         return true;
     73 
     74     }
     75 
     76 
     77     function refresh_task_list(){
     78         store.set('task_list',task_list);
     79         render_task_list();
     80     }
     81 
     82 
     83 
     84     function listen_task_delete(){
     85         $task_delete_trigger.on('click',function(){
     86             var $this=$(this);
     87             var $item=$this.parent().parent();
     88             var index=$item.data('index');
     89             var tmp=confirm('确定删除?');
     90             tmp?task_delete(index):null;
     91             task_delete(index);
     92         })
     93     }
     94 
     95     function task_delete(index){
     96         if(index===undefined||!task_list[index]) return;
     97         delete task_list[index];
     98         refresh_task_list();
     99     }
    100 
    101 
    102 
    103     function listen_task_detail(){
    104 
    105         //双击打开详情
    106         var index;
    107         $('.task-item').on('dblclick',function(){
    108             index=$(this).data('index');
    109             show_task_detail(index);
    110         })
    111 
    112 
    113 
    114         $task_detail_trigger.on('click',function(){
    115             var $this=$(this);
    116             var $item=$this.parent().parent();
    117             var index=$item.data('index');
    118             console.log('index',index);
    119             show_task_detail(index);
    120         })
    121     }
    122 
    123 
    124 
    125 
    126 
    127     function listen_checkbox_complete(){
    128         $checkbox_complete.on('click',function(){
    129             var $this=$(this);
    130             // var is_complate=$(this).is(':checked');
    131             var index=$this.parent().parent().data('index');
    132             var item=get(index);
    133             if (item.complete)
    134                 update_task(index, {complete: false});
    135             else
    136                 update_task(index, {complete: true});
    137         })
    138     }
    139 
    140 
    141 
    142 
    143 
    144     function get(index){
    145         return store.get('task_list')[index];
    146     }
    147 
    148 
    149 
    150 
    151     function show_task_detail(index){
    152         render_task_detail(index);//修改详情内容的;
    153         current_index=index;
    154         $task_detail.show();
    155         $task_detail_mask.show();
    156     }
    157 
    158 
    159     $task_detail_mask.on('click',hide_task_detail);
    160     function hide_task_detail(){
    161         $task_detail.hide();
    162         $task_detail_mask.hide();
    163     }
    164 
    165 
    166 
    167 
    168     function update_task(index,data){
    169         if(!index||!task_list[index]) return;
    170         // task_list[index]=$.merge({},task_list[index],data);
    171         // task_list[index]=data;
    172         task_list[index]=$.extend({},task_list[index],data);
    173         // console.log('task_list[index]',task_list[index]);
    174         refresh_task_list();
    175         console.log('task_list[index]',task_list[index]);
    176     }
    177 
    178 
    179 
    180 
    181 
    182 
    183 
    184 
    185 
    186 
    187     function render_task_detail(index){
    188         if(index===undefined||!task_list[index]) return;
    189         var item=task_list[index];
    190         var tpl =
    191             '<form>' +
    192             '<div class="content">' +
    193             item.content +
    194             '</div>' +
    195             '<div class="input-item">' +
    196             '<input style="display: none;" type="text" name="content" value="' + (item.content || '') + '">' +
    197             '</div>' +
    198             '<div>' +
    199             '<div class="desc input-item">' +
    200             '<textarea name="desc">' + (item.desc || '') + '</textarea>' +
    201             '</div>' +
    202             '</div>' +
    203             '<div class="remind input-item">' +
    204             '<label>提醒时间</label>'+
    205             '<input class="datetime" name="remind_date" type="text" value="' + (item.remind_date || '') + '">' +
    206             '</div>' +
    207             '<div class="input-item"><button type="submit">更新</button></div>' +
    208             '</form>';
    209         $task_detail.html(null);
    210         $task_detail.html(tpl);
    211         $('.datetime').datetimepicker({ format: 'Y/m/d', timepicker: false });
    212 
    213         $update_form=$task_detail.find('form');
    214         // console.log('$update_form',$update_form);
    215         $update_form.on('submit',function(e){
    216             e.preventDefault();
    217             var data={};
    218             data.content=$(this).find('[name=content]').val();
    219             data.desc=$(this).find('[name=desc]').val();
    220             data.remind_date=$(this).find('[name=remind_date]').val();
    221             // console.log('data',data);
    222             update_task(index,data);//item是以前的值这里将详情写到localstorage里面;
    223             hide_task_detail();//点击更新后将详情框隐藏;调用函数就行;
    224         })
    225         $task_detail_content=$update_form.find('.content');
    226         $task_detail_content_input=$update_form.find('[name=content]');
    227         $task_detail_content.on('dblclick',function(){
    228             $task_detail_content_input.show();
    229             $task_detail_content.hide();
    230 
    231         })
    232 
    233     }
    234 
    235 
    236 
    237 
    238 
    239 
    240 
    241 
    242     function init(){
    243         task_list=store.get('task_list')||[];
    244         if(task_list.length)
    245             render_task_list();
    246         task_remind_check();
    247         listen_msg_event();
    248     }
    249 
    250 
    251 
    252     function render_task_list(){
    253         var $task_list=$('.task-list');
    254         $task_list.html('');
    255         var  complete_items=[];//装已完成的任务
    256         for(var i=0;i<task_list.length;i++){
    257             var item=task_list[i];
    258             if(item && item.complete)
    259                 complete_items[i]=item;
    260             else
    261                 var $task=render_task_item(item,i);
    262                 $task_list.prepend($task);
    263         }
    264 
    265 
    266         for(var j=0;j<complete_items.length;j++){
    267                 $task=render_task_item(complete_items[j],j);
    268                 if(!$task) continue;
    269                 $task.addClass('completed');
    270                 $task_list.append($task);
    271         }
    272 
    273 
    274 
    275 
    276 
    277 
    278         $task_delete_trigger=$('.action.delete');
    279         $task_detail_trigger=$('.action.detail');
    280         $checkbox_complete=$('.task-list .complete[type=checkbox]');
    281         listen_task_delete();
    282         listen_task_detail();
    283         listen_checkbox_complete();
    284 
    285 
    286 
    287     }
    288 
    289 
    290 
    291 
    292 
    293     function render_task_item(data,index){
    294         if(!data||!index) return;
    295         var list_item_item=
    296             '<div class="task-item"  data-index="'+index+'">'+
    297             '<span><input  class="complete"   ' + (data.complete ? 'checked' : '') + '  type="checkbox"></span>'+
    298             '<span class="task-content">'+data.content+'</span>'+
    299             '<span class="fr">'+
    300             '<span class="action delete">  删除</span>'+
    301             '<span class="action detail">  详细</span>'+
    302             ' </span>'+
    303             '</div>';
    304         return  $(list_item_item);
    305     }
    306 
    307 
    308 
    309 
    310     function task_remind_check(){
    311         show_msg();
    312         var current_timestamp
    313             ,task_timestamp;
    314        var itl=setInterval(function(){
    315            for(var i=0;i<task_list.length;i++){
    316                var item=get(i);
    317                    continue;
    318                current_timestamp=(new Date()).getTime();
    319                task_timestamp=(new Date(item.remind_date)).getTime();
    320                if(current_timestamp- task_timestamp>=1){
    321                    update_task(i,{informed:true});
    322                    show_msg(item.content);
    323                }
    324            }
    325        },300)
    326     }
    327     function show_msg(){
    328         // if (!msg) return;
    329           $msg_content.html(msg);
    330           // $alerter.get(0).play();
    331           $('.msg').show();
    332         }
    333     function hide_msg(){
    334         $('.msg').hide();
    335     }
    336 
    337 
    338 
    339     function listen_msg_event(){
    340         $msg_confirm.on('click',function(){
    341             hide_msg();
    342         })
    343     }
    344 
    345 
    346 
    347     //弹窗;
    348     function pop(arg){
    349         if(!arg){
    350             console.log('pop title is required');
    351         }
    352         var conf={}
    353             ,$box
    354             ,$mask
    355             ,$title
    356             ,$content
    357             ,$confirm
    358             ,$cancel
    359             ,dfd//$.Deferred();
    360             ,timer
    361         ;
    362         $box=$('<div>' +
    363             '<div class="pop-title">1234</div>' +
    364             '<div class="pop-content">' +
    365             '<button  style="margin-right:5px;"  class="primary confirm">确定</button>' +
    366             '<button class="cancel">取消</button>' +
    367             '</div>' +
    368             '</div>');
    369 
    370             $box.css({
    371                 color:'#444',
    372                 position:'fixed',
    373                 300,
    374                 height:200,
    375                 background:'#fff',
    376                 'border-raidus':3,
    377                 'box-shadow':'0 1px 2px rgba(0,0,0,.5)'
    378 
    379             })
    380         $title=$box.find('.pop-title').css({
    381             padding:'5px 10px',
    382             'font-weight':900,
    383             'font-size':20,
    384             'text-align':'center'
    385         })
    386         $content=$box.find('.pop-title').css({
    387             padding:'5px 10px',
    388             'text-align':'center'
    389         })
    390 
    391         $confirm=$content.find('button.confirm');
    392         $cancel=$content.find('button.cancel');
    393 
    394 
    395 
    396 
    397 
    398 
    399         $mask=$('<div></div>')
    400             .css({
    401                 position:'fixed',
    402                 top:0,
    403                 left:0,
    404                 right:0,
    405                  bottom:0,
    406                 background:'rgba(0,0,0,.5)',
    407             })
    408 
    409         var  timer=setInterval(function(){
    410             
    411         });
    412 
    413         $confirm.on('click',function(){
    414             confirmed=true;
    415         })
    416 
    417         function adjust_box_position(){
    418             var window_width=$window.width()
    419                 ,window_height=$window.height()
    420                 ,box_width=$box.width()
    421                 ,box_height=$box.height()
    422                 ,move_x
    423                 ,move_y
    424             ;
    425             move_x=(window_width-box_width)/2;
    426             move_y=(window_height-box_height)/2-20;
    427             $box.css({
    428                 left:move_x,
    429                 top:move_y
    430             })
    431 
    432         }
    433         $window.on('resize',function(){
    434             adjust_box_position();
    435         })
    436 
    437 
    438 
    439         if(typeof arg  == "string")
    440             conf.title=arg;
    441         else{
    442             conf=$.extend(conf,arg);
    443         }
    444 
    445 
    446         $mask.appendTo($body);
    447         $box.appendTo($body);
    448         $window.resize();
    449         return dfd.promise();
    450     }
    451 
    452 
    453 
    454 
    455 
    456 
    457 
    458 
    459 })()


    ;(function(){    'use strict';    var $form_add_task=$('.add-task')        ,task_list=[]        ,$task_delete        ,$task_delete_trigger        ,$task_detail=$('.task-detail')        ,$task_detail_trigger        ,$task_detail_mask=$('.task-detail-mask')        ,current_index        ,$update_form//专门用于更新详情内容的form;        ,$task_detail_content        , $task_detail_content_input        , $checkbox_complete        ,msg        ,$msg=$('.msg')        ,$msg_content=$msg.find('.msg-content')        ,$msg_confirm=$msg.find('.confirmed')        ,$alerter=$('.alerter')        ,$body=$('body')        ,informed        ,$window=$(window)        ,confirmed        ;    init();    pop('abc')        .then(function(r){            if(r){                console.log('r',r);            }        })



        $form_add_task.on("submit",on_add_task_form_submit);



        function  on_add_task_form_submit(e) {        e.preventDefault();        var new_task = {},            $input;        $input = $(this).find('input[name=content]');        new_task.content = $input.val();        // console.log('new_task',new_task);        if (!new_task.content) return;        if (add_task(new_task)) {            render_task_list();//提交新加任务的时候要调用渲染下面任务列表函数;            $input.val(null);        }    }











        function add_task(new_task){        task_list.push(new_task);        // store.set('task_list',task_list);        // console.log('task_list',task_list);        refresh_task_list();        // store.clear();        return true;
        }

        function refresh_task_list(){        store.set('task_list',task_list);        render_task_list();    }


        function listen_task_delete(){        $task_delete_trigger.on('click',function(){            var $this=$(this);            var $item=$this.parent().parent();            var index=$item.data('index');            var tmp=confirm('确定删除?');            tmp?task_delete(index):null;            task_delete(index);        })    }
        function task_delete(index){        if(index===undefined||!task_list[index]) return;        delete task_list[index];        refresh_task_list();    }


        function listen_task_detail(){
            //双击打开详情        var index;        $('.task-item').on('dblclick',function(){            index=$(this).data('index');            show_task_detail(index);        })


            $task_detail_trigger.on('click',function(){            var $this=$(this);            var $item=$this.parent().parent();            var index=$item.data('index');            console.log('index',index);            show_task_detail(index);        })    }




        function listen_checkbox_complete(){        $checkbox_complete.on('click',function(){            var $this=$(this);            // var is_complate=$(this).is(':checked');            var index=$this.parent().parent().data('index');            var item=get(index);            if (item.complete)                update_task(index, {complete: false});            else                update_task(index, {complete: true});        })    }




        function get(index){        return store.get('task_list')[index];    }



        function show_task_detail(index){        render_task_detail(index);//修改详情内容的;        current_index=index;        $task_detail.show();        $task_detail_mask.show();    }

        $task_detail_mask.on('click',hide_task_detail);    function hide_task_detail(){        $task_detail.hide();        $task_detail_mask.hide();    }



        function update_task(index,data){        if(!index||!task_list[index]) return;        // task_list[index]=$.merge({},task_list[index],data);        // task_list[index]=data;        task_list[index]=$.extend({},task_list[index],data);        // console.log('task_list[index]',task_list[index]);        refresh_task_list();        console.log('task_list[index]',task_list[index]);    }









        function render_task_detail(index){        if(index===undefined||!task_list[index]) return;        var item=task_list[index];        var tpl =            '<form>' +            '<div class="content">' +            item.content +            '</div>' +            '<div class="input-item">' +            '<input style="display: none;" type="text" name="content" value="' + (item.content || '') + '">' +            '</div>' +            '<div>' +            '<div class="desc input-item">' +            '<textarea name="desc">' + (item.desc || '') + '</textarea>' +            '</div>' +            '</div>' +            '<div class="remind input-item">' +            '<label>提醒时间</label>'+            '<input class="datetime" name="remind_date" type="text" value="' + (item.remind_date || '') + '">' +            '</div>' +            '<div class="input-item"><button type="submit">更新</button></div>' +            '</form>';        $task_detail.html(null);        $task_detail.html(tpl);        $('.datetime').datetimepicker({ format: 'Y/m/d', timepicker: false });
            $update_form=$task_detail.find('form');        // console.log('$update_form',$update_form);        $update_form.on('submit',function(e){            e.preventDefault();            var data={};            data.content=$(this).find('[name=content]').val();            data.desc=$(this).find('[name=desc]').val();            data.remind_date=$(this).find('[name=remind_date]').val();            // console.log('data',data);            update_task(index,data);//item是以前的值这里将详情写到localstorage里面;            hide_task_detail();//点击更新后将详情框隐藏;调用函数就行;        })        $task_detail_content=$update_form.find('.content');        $task_detail_content_input=$update_form.find('[name=content]');        $task_detail_content.on('dblclick',function(){            $task_detail_content_input.show();            $task_detail_content.hide();
            })
        }







        function init(){        task_list=store.get('task_list')||[];        if(task_list.length)            render_task_list();        task_remind_check();        listen_msg_event();    }


        function render_task_list(){        var $task_list=$('.task-list');        $task_list.html('');        var  complete_items=[];//装已完成的任务        for(var i=0;i<task_list.length;i++){            var item=task_list[i];            if(item && item.complete)                complete_items[i]=item;            else                var $task=render_task_item(item,i);                $task_list.prepend($task);        }

            for(var j=0;j<complete_items.length;j++){                $task=render_task_item(complete_items[j],j);                if(!$task) continue;                $task.addClass('completed');                $task_list.append($task);        }





            $task_delete_trigger=$('.action.delete');        $task_detail_trigger=$('.action.detail');        $checkbox_complete=$('.task-list .complete[type=checkbox]');        listen_task_delete();        listen_task_detail();        listen_checkbox_complete();


        }




        function render_task_item(data,index){        if(!data||!index) return;        var list_item_item=            '<div class="task-item"  data-index="'+index+'">'+            '<span><input  class="complete"   ' + (data.complete ? 'checked' : '') + '  type="checkbox"></span>'+            '<span class="task-content">'+data.content+'</span>'+            '<span class="fr">'+            '<span class="action delete">  删除</span>'+            '<span class="action detail">  详细</span>'+            ' </span>'+            '</div>';        return  $(list_item_item);    }



        function task_remind_check(){        show_msg();        var current_timestamp            ,task_timestamp;       var itl=setInterval(function(){           for(var i=0;i<task_list.length;i++){               var item=get(i);                   continue;               current_timestamp=(new Date()).getTime();               task_timestamp=(new Date(item.remind_date)).getTime();               if(current_timestamp- task_timestamp>=1){                   update_task(i,{informed:true});                   show_msg(item.content);               }           }       },300)    }    function show_msg(){        // if (!msg) return;          $msg_content.html(msg);          // $alerter.get(0).play();          $('.msg').show();        }    function hide_msg(){        $('.msg').hide();    }


        function listen_msg_event(){        $msg_confirm.on('click',function(){            hide_msg();        })    }


        //弹窗;    function pop(arg){        if(!arg){            console.log('pop title is required');        }        var conf={}            ,$box            ,$mask            ,$title            ,$content            ,$confirm            ,$cancel            ,dfd//$.Deferred();            ,timer        ;        $box=$('<div>' +            '<div class="pop-title">1234</div>' +            '<div class="pop-content">' +            '<button  style="margin-right:5px;"  class="primary confirm">确定</button>' +            '<button class="cancel">取消</button>' +            '</div>' +            '</div>');
                $box.css({                color:'#444',                position:'fixed',                300,                height:200,                background:'#fff',                'border-raidus':3,                'box-shadow':'0 1px 2px rgba(0,0,0,.5)'
                })        $title=$box.find('.pop-title').css({            padding:'5px 10px',            'font-weight':900,            'font-size':20,            'text-align':'center'        })        $content=$box.find('.pop-title').css({            padding:'5px 10px',            'text-align':'center'        })
            $confirm=$content.find('button.confirm');        $cancel=$content.find('button.cancel');





            $mask=$('<div></div>')            .css({                position:'fixed',                top:0,                left:0,                right:0,                 bottom:0,                background:'rgba(0,0,0,.5)',            })
            var  timer=setInterval(function(){                    });
            $confirm.on('click',function(){            confirmed=true;        })
            function adjust_box_position(){            var window_width=$window.width()                ,window_height=$window.height()                ,box_width=$box.width()                ,box_height=$box.height()                ,move_x                ,move_y            ;            move_x=(window_width-box_width)/2;            move_y=(window_height-box_height)/2-20;            $box.css({                left:move_x,                top:move_y            })
            }        $window.on('resize',function(){            adjust_box_position();        })


            if(typeof arg  == "string")            conf.title=arg;        else{            conf=$.extend(conf,arg);        }

            $mask.appendTo($body);        $box.appendTo($body);        $window.resize();        return dfd.promise();    }







    })()

  • 相关阅读:
    .NET Core技术研究-通过Roslyn代码分析技术规范提升代码质量
    ASP.NET Core技术研究-全面认识Web服务器Kestrel
    .NET Core技术研究-主机Host
    ASP.NET Core技术研究-探秘依赖注入框架
    ASP.NET Core技术研究-探秘Host主机启动过程
    .NET Core技术研究-中间件的由来和使用
    深入浅出腾讯BERT推理模型--TurboTransformers
    深入浅出PyTorch(算子篇)
    深入浅出Transformer
    生产者消费者问题总结
  • 原文地址:https://www.cnblogs.com/yangguoe/p/8232916.html
Copyright © 2011-2022 走看看