12.1作业
来源：互联网 发布：淘宝促销免费模板 编辑：程序博客网 时间：2024/06/07 00:55
todolist
（1）html部分
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>我的TODO</title> <link rel="stylesheet" href="css/normalize.css" /> <link rel="stylesheet" href="css/base.css" /> <link rel="stylesheet" href="css/jquery.datetimepicker.min.css" /> <link rel="stylesheet" href="css/other_function.css" /> <link rel="stylesheet" href="css/home_page.css" /> </head> <body> <div class="page-wrap"> <div class="column-menu-task"> <div class="loge-wrap"> <img class="icon-user" src="http://s.gxtodo.com/avatar/0.jpg" /> <div class="user-name">我的私事</div> </div> <hr> <div class="main-menu"> <a class="main-menu-home-page" href="#">首页</a> <a class="main-menu-home-task" href="#">任务 <div class="remind-task-num"></div> </a> <a class="main-menu-home-sticker" href="#">便签</a> <a class="main-menu-home-project" href="#">项目</a> <a class="main-menu-home-place" href="#">地点</a> <a class="main-menu-home-label" href="#">标签</a> </div> <hr> <div class="bottom-menu"> <a class="main-menu-home-enjoy" href="#">我的关心</a> <a class="main-menu-home-search" href="#">搜索</a> <a class="main-menu-home-other" href="#">. . .</a> </div> <div class="hide-bottom-menu"></div> <div class="clear"></div> </div> <div class="main-task-area"> <div class="main-theme"> <h1>高效Todo的特点</h1> <span> 高效Todo基于管理学大师史蒂夫.柯维和余世维所倡导的第四代时间管理理论设计。 把事情按重要和紧急程度进行分类，通过这种简单而有效的方式，高效Todo可以帮助 用户快速高效的规划未来的工作，并提示用户把精力放在重要的事情上。 高效Todo可以把用户从纷繁复杂的事务中解放出来，高效Todo与其他日程管理应用 不同之处在于，高效Todo颠覆了陈旧的时间管理理念，高效Todo主张高效工作的关 键不在时间管理，而是注重如何在有限的时间内产生最大的效益。 </span> </div> <div class="m-home-page"> <div class="m-home-head"> <h1>TODO在线</h1> </div> <div class="m-home-main-area"> <div class="m-top-area"> <div class="m-hot-news"> <h2>热点新闻</h2> <ul> <li> <a href="">习近平履职“满月”观察：落子开局新时代</a> </li> <li> <a href="">玉麦一家人：守护国土 永作扎根边陲的格桑花</a> </li> <li> <a href="">领航新征程 看，设计这样介入精准扶贫</a> </li> <li> <a href="">一张“招商局”旧船票开启新征途 彰显时代篇章</a> </li> <li> <a href="">又一个国家级新区崛起 会怎样改变中国经济版图</a> </li> <li> <a href="">北京北四村的房客们：拆迁后 下一个住所是哪里？</a> </li> <li> <a href="">津巴布韦新总统：总统选举如期举行 吁重审对津制裁</a> </li> <li> <a href="">津巴布韦新总统：总统选举如期举行 吁重审对津制裁</a> </li> </ul> </div> <div class="m-weather"> <h2 class="weather-title">天气动态</h2> <div class="time-weather"> <div class="current-address"> <img src="img/location.svg" alt="" /> <span class="current-location"></span> </div> <div id="current-temperate"></div> <div class="other-data"> <div class="wind-speed"> <img src="img/wind.svg" alt="" /> <span class="current-speed"></span> </div> <div class="weather-currweather"> <img src="img/weather.svg" alt="" /> <span class="desc"></span> </div> <div id="humidity"> <img src="img/humidity_small.svg" alt="" /> <span class="humidity"></span> </div> </div> <div class="weather-footer"> <div class="weather-footer-info"> <p>风速</p> <img src="img/wind2.svg" /> <p class="current-speed"></p> </div> <div class="weather-footer-info"> <p>最高温度</p> <img src="img/temp.svg" alt="" /> <p class="max-temperate"></p> </div> <div class="weather-footer-info"> <p>最低温度</p> <img src="img/temp_low.svg" /> <p class="min-temperate"></p> </div> <div class="weather-footer-info"> <p>湿度</p> <img src="img/humidity_small.svg" alt="" /> <p class="humidity"></p> </div> </div> </div> </div> <div class="clear"></div> </div> <div class="m-bottom-area"> <div class="m-person-habit"> <h2>个性推荐</h2> </div> <div class="m-person-trace"> <h2>出行规划</h2> </div> <div class="clear"></div> </div> </div> <div class="footer"> <div class="img-icon"> </div> <div class="action-button"> <a href="#">关于TODO</a> | <a href="#">联系我们</a> | <a href="#">服务条款</a> | <a href="#">隐私协议</a> | <a href="#">TODO会员包月协议</a> | <a href="#">帮助</a> | <a href="#">更新日志</a> | <a href="#">企业易信</a> | <a href="#">TODO网站相关资质证明</a> </div> <div class="other-information"> <span>©2017 南通TODO计算机系统有限公司 通ICP证080268号</span> <span>违法和不良信息举报电话：010-82558163</span> </div> </div> </div> <div class="m-task-add"> <div class="container"> <div class=""> </div> <div class="title"> <h1>我的TODO</h1> </div> <form class="add-item"> <input name="content" id="imformation" type="text" placeholder="e.g.下午记得买菜" /> <button type="submit">submit</button> </form> <div class="task-list"> <!-- <div class="task-item"> <div class="left-content"> <span><input type="checkbox" /></span> <span>ORZ</span> </div> <div class="right-fno"> <span class="action">删除</span> <span style="display: inline-block;width: 5px;"></span> <span class="action">详情</span> </div> <div class="clear"></div> </div> --> </div> <!--详情的div <div class="task-detail"> <div class="content"></div> <div> <div class="description"> <textarea name=""></textarea> </div> </div> <div class="remind"> <p>提醒时间</p> <input type="date" name="" id="" value="" /> </div> <input type="button" value="更新" /> </div> --> </div> <div class="finish-task-item-button"> <input type="button" value="隐藏已完成的项目" /> </div> <div class="remind-task-item"> <div class="remind-desc-area"> <textarea disabled="true" name="remind-desc" rows="6" cols="20"></textarea> </div> <div class="close-remind-task-button"> <input class="close-remind-button" type="button" value="我知道了，你退下吧" /> </div> <div class="clear"></div> </div> </div> <div class="m-sticker-area"> <div class="m-sticker-title">便签</div> <hr> <div class="m-sticker"> <div class="m-sticker-input"> <div class="input-sticker-area"> <div class="aaa"> <textarea name="sticker" rows="5" cols="25" placeholder="请输入便签内容！"></textarea><br /> <input type="button" value="保存" /> </div> </div> <div class="leave-line"></div> <div class="clear"></div> </div> <div class="stickers-area"> </div> <div class="clear"></div> </div> </div> </div> </div> <div class="clear"></div> <div class="ask-delete-mask"></div> <div class="task-detail-mask"></div> <div class="sticker-mask"></div> <div class="currency-edit-mask"></div> <video class="remind-quarter-bell" loop="loop"></video> <div class="move-news"></div> <script src="js/jquery.js"></script> <script src="js/store.legacy.min.js"></script> <script src="js/base.js"></script> <script src="js/toggle.js"></script> <script src="js/jquery.datetimepicker.full.js"></script> <script src="js/sticker_project.js"></script> <script src="js/current_address_weather.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak= bkXbNRt3sSPtWPkKOkVXGWHs0PTqCsWD" type="text/javascript"></script> </body></html>（2）css部分
base.css
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}.clear { clear: both;}body { background-color: #0a314c;}hr { background-color: #333;}.loge-wrap { cursor: pointer;}.column-menu-task { float: left; position: fixed; left: 0; bottom: 0; top: 0; width: 135px; background: #353d40; color: #ccc; text-align: center;}.column-menu-task .icon-user { width: 60px; height: 60px; margin-top: 10px; border-radius: 60px;}.column-menu-task .bottom-menu { margin-top: 80px;}.column-menu-task a { display: block; text-decoration: none; width: 100%; color: #ccc; padding: 14px 0; text-align: center; height: 48px; position: relative;}.column-menu-task a:hover { font-size: 20px; color: #fff;}.main-task-area { float: right; position: absolute; top: 0; bottom: 0; right: 0; left: 10%;}.container { max-width: 700px; min-height: 450px; margin: 0 auto; position: relative;}.title { color: #fff; text-align: center;}input,button,.task-detail,.task-item,.task-item-finish,.description>textarea { border: none; border-radius: 3px; padding: 10px;}.add-item { margin-bottom: 10px;}input[type=text],input[type=date] { width: 100%; display: block; background: #ccc;}button { border: none; display: inline-block; cursor: pointer;}input[type=text]:hover,input[type=text]:focus,input[type=date] :hover,input[type=date] :focus { background: #fff; transition: background-color 0.5s;}.add-item>input[type=text] { float: left; width: 84%; margin-right: 1%;}.add-item>button[type=submit] { width: 15%; background-color: #388fb9;}.add-item>button[type=submit]:hover { color: #ccc;}.task-list,.finish-task-list { margin: 10px 0;}.task-item { width: 100%; position: relative; background-color: #fff; margin-bottom: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); cursor: pointer;}.task-item:hover { background: #ccc; transition: background-color 0.5s;}.task-item>.left-content { float: left;}.task-item>.right-fno { float: right;}.task-item>.right-fno .action:hover { color: #333;}.task-item-finish { width: 100%; position: relative; background-color: pink; margin-bottom: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); cursor: pointer;}.task-item-finish :after { content: ''; height: 2px; background: #aaa; position: absolute; top: 20px; right: 0; display: block; width: 96%; float: right;}.task-item-finish:hover { background: #fff; transition: background-color 0.5s;}.task-item-finish>.left-content { float: left;}.task-item-finish>.right-fno { float: right;}.task-item-finish>.right-fno .action:hover { color: #333;}.task-detail,.task-detail-mask,.ask-delete-mask { position: absolute;}.task-detail { top: 0; right: 0; width: 50%; background: #ffffff; color: #333; padding: 10px; z-index: 1; display: none;}.description>textarea { border: 0; width: 100%; min-height: 100px; display: block; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4); margin-top: 10px; margin-bottom: 5px; background: #ddd;}.task-detail input[type=date] { padding: 5px 10px; cursor: pointer;}.task-detail input[type=button] { margin-top: 10px; background: #388fb9; cursor: pointer;}.task-detail input[type=button] :hover { color: #ccc;}.description>textarea:hover,.description>textarea:focus { background: #fff; transition: background-color 0.5s;}.task-detail-mask,.ask-delete-mask { display: none; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.3);}.finish-task-item-button { max-width: 700px; margin: 0 auto; margin-top: 10px; position: relative;}.finish-task-item-button input { display: block; margin: 0 auto; cursor: pointer; background: #388fb9; color: #fff;}.finish-task-item-button input:hover { color: #ccc;}.remind-task-num { display: none; width: 30px; height: 30px; border-radius: 30px; background: red; position: absolute; right: 0; top: 10px; right: 15px;}.remind-task-item { display: none; position: fixed; right: 30px; top: 30px; width: 200px; height: 200px; background: #7d7dff; border-radius: 5px;}.remind-desc-area { position: relative; top: 10px; left: 9px;}.remind-desc-area textarea { box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4); background: #fff; cursor: pointer;}.close-remind-button { position: absolute; bottom: 10px; right: 20px; cursor: pointer;}.remind-quarter-bell { width: 0; height: 0;}.m-home-page { position: relative; width: 95%; margin: 0 auto;}.m-home-head h1 { text-align: center; color: #fff;}.m-top-area,.m-bottom-area { width: 90%; height: 450px; margin: 0 auto;}.m-hot-news,.m-person-habit { width: 50%; height: 100%; float: left;}.m-hot-news h2,.m-weather h2,.m-person-habit h2,.m-person-trace h2 { text-align: center;}.m-hot-news ul { margin-left: 30px;}.m-hot-news ul li { padding-top: 2px; padding-bottom: 2px;}.m-hot-news,.m-person-trace { background: #cff;}.m-person-habit,.m-weather { background: #ccc;}.m-weather,.m-person-trace { width: 50%; height: 100%; float: right;}.footer .action-button { color: #cccc; margin: 0 auto; text-align: center;}.footer .action-button a { display: inline-block; margin: 15px 6px; font-size: 14px; color: #cccc; text-decoration: none;}.footer .other-information { text-align: center;}.footer .other-information span { color: #cccc; font-size: 13px; margin: 10px 15px;}.main-theme { width: 90%; margin: 0 auto;}.m-sticker-area { display: none;}.m-task-add { display: none;}.m-home-page { display: none;}home_page.css
.weather-title { cursor: pointer;}.time-weather { width: 100%;}.current-address { text-align: center;}.current-address span { font-size: 30px; color: #333;}#current-temperate { text-align: center; font-size: 45px; padding: 30px 0; color: #333;}.other-data { margin: 10px auto; width: 80%; padding: 0; color: #333;}.other-data>div { display: inline-block; width: 30%; text-align: center;}.other-data img { width: 30px; height: 30px;}.other-data span { line-height: 30px;}.weather-footer { margin: 10px auto; color: #333; width: 90%;}.weather-footer-info { margin-top: 30px; display: inline-block; width: 23%; text-align: center;}.weather-footer-info img { width: 20px; height: 20px;}.weather-footer-info p { margin: 10px;}other-function.css
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}.m-sticker-area { width: 96%; margin: 20px auto;}.m-sticker-area hr { background: #ccc;}.m-sticker-title { padding: 15px; background: #ffffff; border-radius: 5px; font-size: 20px;}.m-sticker-input { width: 22%; float: left; position: relative;}.input-sticker-area { float: left; background: #fff; width: 245px; height: 150px; padding: 5px 11px; border-radius: 5px;}.leave-line{ /*position: absolute; right: -10px;*/ float: right; width: 2px; background: #fff; min-height: 600px;}.input-sticker-area textarea[name=sticker] { border: none; border-radius: 3px; box-shadow: inset 2px 3px rgba(0, 0, 0, 0.4); background: #eee; cursor: pointer; transition: background-color 0.5s;}.input-sticker-area textarea[name=sticker]:hover,.input-sticker-area textarea[name=sticker]:focus { background: #fff; transition: background-color 0.5s;}.input-sticker-area input[type=button] { background: #388fb9; color: #fff; cursor: pointer; margin-top: 3px;}.stickers-area { width: 77%; float: right; min-height: 500px;}.sticker-task-item { width: 250px; height: 150px; display: inline-block; margin-left: 20px; margin-bottom: 20px; background: #fff; border-radius: 5px; cursor: pointer;}.sticker-datetime-edit { color: #353D40; padding-top: 5px; padding-left: 15px; padding-right: 15px; padding-bottom: 5px; margin: 0 auto; position: relative;}.blue-gradient-button { padding: 5px;}.sticker-time { float: left; padding-top: 10px; margin-bottom: 10px;}.edit-button-area { float: right; position: relative; display: none;}.edit-input-button { width: 38px; border-radius: 38px; cursor: pointer;}.hide-button { position: absolute; border-radius: 3px; left: 188px; top: 45px; z-index: 1; background: #388fb9; display: none;}.hide-button span { display: block; text-align: center; padding: 6px 10px; color: #fff;}.edit-button:hover,.delete-button:hover { background: #ccc; color: #388fb9;}.hide-button hr { padding: 0; margin: 0; color: #ccc;}.sticker-content textarea[name=sticker-remind-content] { margin-left: 10px; border: none; background: #fff; cursor: pointer;}.currency-edit-mask { position: absolute; display: none; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6);}.sticker-edit-input-page { border-radius: 5px; width: 400px; height: 200px; background: #ccc; position: absolute; box-shadow: 0, 0, 20px, 20px, #333; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: none;}.ask-delete-alert { display: none; background: #fff; border-radius: 5px; width: 400px; height: 200px; position: fixed; box-shadow: 0, 0, 20px, rgba(0, 0, 0, 0.5); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;}.ask-delete-alert input { cursor: pointer; background: #388fb9; color: #fff;}.ask-delete-alert input:hover { background: #ccc; color: #388fb9;}.ask-delete-title{ color: #333; margin: 10px;}.ask-delete-theme{ margin-top:50px ; margin-bottom:50px ; text-align: center; color: #333;}.ask-delete-button{ float: right;}.ask-delete-yes{ margin-right: 15px;}.ask-delete-no{ margin-left: 15px; margin-right: 30px;}.edit-title { padding: 5px;}.no-edit { float: right; width: 20px; height: 20px; background: #333; color: #fff; text-align: center; border-radius: 20px; cursor: pointer;}.no-edit:hover { background: orange;}.edit-page-textarea { margin: 10px auto;}.edit-page-textarea div { margin-left: 20px;}.save-edit { float: right; margin-right: 18px;}.save-edit input { cursor: pointer; background: #388fb9; color: #fff;}.save-edit input:hover { background: #fff; color: #388fb9;}.sticker-mask{ position: absolute; display: none; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0);}(3)js部分
base.js
$(function() { //console.log(localStorage); //localStorage.clear(); var task_list = []; var $form_add_task = $('.add-item'); var $delete_task_trigger; var $detail_task_trigger; var $checkbox_task_trigger; var $correct_detail_trigger; var $input_detail_data_content; var change_color; var $body=$('body'); var $mask = $('.task-detail-mask'); var $remind_quarter_bell = $('.remind-quarter-bell'); var $ask_delete_mask=$('.ask-delete-mask'); var $ask_delete_yes ; var $ask_delete_no ; /*判断task_list有没有存储到localStorag中*/ if(store.get('task_list')) { task_list = store.get('task_list'); } else { store.set('task_list', task_list); } init(); $form_add_task.on('submit', function(e) { var new_task = {}; /*阻止表单默认提交行为*/ e.preventDefault(); /*find方法*/ var $input = $(this).find('input[name=content]'); new_task.content = $input.val(); new_task.checkbox_checked = false; new_task.textarea_content = ""; new_task.input_date_content = ""; new_task.informed = false; //new_task.content=$('#information'); //console.log(new_task); if(!new_task.content) { window.alert('请输入提醒事项！'); return; } /*添加事项*/ if(add_task(new_task)) { /*事项添加成功*/ /*将存储的数据渲染到页面上*/ again_sort(); render_task_list(); $input.val(''); } }); function listen_task_delete() { /*删除事项*/ $delete_task_trigger.on('click', function() { var $this = $(this); var $item = $this.parent().parent(); /*获取data-index的属性值*/ var index = $item.data('index'); $ask_delete_mask.fadeIn(500); remind_ask_delete_alert(index); }); } function listen_ask_delete_button($ask_delete_alert,index) { var $ask_delete_alert=$ask_delete_alert; var index=index; $ask_delete_yes.on('click', function() { delete_task(index); $ask_delete_alert.hide(500); $ask_delete_alert.remove(); $ask_delete_mask.fadeOut(500); }); $ask_delete_no.on('click', function() { $ask_delete_alert.hide(500); $ask_delete_alert.remove(); $ask_delete_mask.fadeOut(500); }); } function remind_ask_delete_alert(index){ var index=index; var $ask_delete_alert=get_ask_delete_alert(); $ask_delete_alert.appendTo($body); $ask_delete_alert.show(500); $ask_delete_yes=$('.ask-delete-yes'); $ask_delete_no=$('.ask-delete-no'); listen_ask_delete_button($ask_delete_alert,index); } function get_ask_delete_alert(){ var tpl= '<div class="ask-delete-alert">'+ '<div class="ask-delete-title"><b>温馨提示：</b></div>'+ '<div class="ask-delete-theme"><b>确定要删除吗？一旦删除将无法恢复！</b></div>'+ '<div class="ask-delete-button-area">'+ '<div class="ask-delete-button">'+ '<input class="ask-delete-yes" type="button" value="确定" />'+ '<input class="ask-delete-no" type="button" value="取消" />'+ '</div>'+ '<div class="clear"></div>'+ '</div>'+ '</div>'; return $(tpl); } /*删除函数*/ function delete_task(index) { /*判断对象数组中是否存在这个索引*/ if(!task_list[index]) { return; } delete task_list[index]; /*更新页面*/ refresh_task_list(); } /*存入localStorage中,添加事项*/ function add_task(new_task) { task_list.push(new_task); store.set('task_list', task_list); return true; } /*初始化函数*/ function init() { again_sort(); task_list = store.get('task_list'); if(task_list.length) { /*将数据渲染到页面上*/ render_task_list(); } listen_remind_task(); } /*更新页面方法*/ function refresh_task_list() { //localStorage.clear(); //console.log(localStorage); delete_null_array(); again_sort(); store.set('task_list', task_list); render_task_list(); } /*判断task_list中是否有空对象，有的话删除之*/ function delete_null_array() { var newArr = []; for(var i = 0; i < task_list.length; i++) { if(task_list[i] != null) { newArr.push(task_list[i]); } } task_list = newArr; } /*渲染页面*/ function render_task_list() { /*依次添加到task-list内*/ var $task_list = $('.task-list'); //console.log($task_list); $task_list.html(''); for(var i = 0; i < task_list.length; i++) { /*单个对象的渲染*/ //console.log(task_list[i]); if(task_list[i]) { var $task = render_task_item(task_list[i], i); var uniq = task_list[i].checkbox_checked; $task[0].childNodes[0].childNodes[0].childNodes[0].checked = uniq; if(uniq == true) { $task.removeClass('task-item'); $task.addClass('task-item-finish'); } /*将$task插入到task-list中*/ $task_list.append($task); } } /*给每个task_item添加点击事件*/ $delete_task_trigger = $('.action.delete') listen_task_delete(); $detail_task_trigger = $('.action.detail'); listen_task_detail(); $checkbox_task_trigger = $('input[type=checkbox]'); listen_task_item_checkbox(); } /*单个对象渲染方法*/ function render_task_item(data, index) { //console.log(data.checkbox_checked); var list_item_tpl = '<div class="task-item" data-index="' + index + '">' + '<div class="left-content">' + '<span><input class="finish-checkbox" type="checkbox" checked="' + data.checkbox_checked + '"/></span>' + '<span>' + data.content + '</span>' + '</div>' + '<div class="right-fno">' + '<span class="action delete">删除</span>' + '<span style="display: inline-block;width: 5px;"></span>' + '<span class="action detail">详情</span>' + '</div>' + '<div class="clear"></div>' + '</div>'; //console.log($(list_item_tpl)); return $(list_item_tpl); } /*给详情设置点击事件*/ function listen_task_detail() { /*给详情按钮设置点击事件*/ $detail_task_trigger.on('click', function() { var $this = $(this); var $item = $this.parent().parent(); /*获取data-index的属性值*/ var index = $item.data('index'); /*设置方法让task_detail显现出来*/ show_task_detail($item, index); }); } /*task_detail显现方法*/ function show_task_detail($item, index) { /*判断对象数组中是否存在这个索引*/ if(!task_list[index]) { return; } var $get_task_detail = get_task_detail(task_list[index]); /*浮现详情页面并且面纱浮起*/ $item.append($get_task_detail); /*调用时间选择，引入时间选择插件*/ $('.datetime').datetimepicker(); $mask.fadeIn(500); $get_task_detail.show(500); $correct_detail_trigger = $get_task_detail; save_correct_detail($item, index); click_mask_remove_task_item(); } /*先获取task_detail*/ function get_task_detail(data) { var task_detail_tpl = '<div class="task-detail">' + '<div class="content">' + data.content + '</div>' + '<div>' + '<div class="description">' + '<textarea name="desc">' + data.textarea_content + '</textarea>' + '</div>' + '</div>' + '<div class="remind">' + '<p>提醒时间</p>' + '<input class="datetime" type="text" name="" id="" value="' + data.input_date_content + '" />' + '</div>' + '<input class="input-item" type="button" value="更新" />' + '</div>'; return $(task_detail_tpl); } /*当点击更新按钮的时候，面纱消失；详情消失，并保存信息*/ function save_correct_detail($item, index) { /*输出*/ var $correct_button = $('.input-item'); var aaa = index; //console.log(aaa); var $item_detail = $item; /*获取detail中的content，设置双击事件*/ var $detail_content = $('.content'); /*调用双击事件*/ detail_content_dblClick($detail_content, aaa); $correct_button.on('click', function() { /*执行保存详情数据函数*/ var textarea_content = $('textarea[name=desc]').val(); var input_date_content = $('.datetime').val(); task_list[index].textarea_content = textarea_content; task_list[index].input_date_content = input_date_content; if($input_detail_data_content != undefined) { var input_detail_content = $('.reset-content').val(); task_list[index].content = input_detail_content; } refresh_task_list(); $correct_detail_trigger.hide(1000); $mask.fadeOut(500); hide_task_detail($correct_detail_trigger); }); } /*双击事件*/ function detail_content_dblClick($detail_content, index) { var $detail_content = $detail_content; var index = index; $detail_content.on('dblclick', function() { var $input = $('<input class="reset-content" type="text" value="' + task_list[index].content + '">'); $detail_content.html(''); $detail_content.append($input); $input_detail_data_content = $detail_content; }); } /*更新完成之后删除详情窗口*/ function hide_task_detail($correct_detail_trigger) { $correct_detail_trigger.remove(); } /*点击面纱，task-detail消失，面纱消失*/ function click_mask_remove_task_item() { $mask.on('click', function() { $mask.fadeOut(500); $correct_detail_trigger.hide(500); hide_task_detail($correct_detail_trigger); }); } /*点击checkbox，完成task-item，改变颜色并排列到最后*/ function listen_task_item_checkbox() { $checkbox_task_trigger.on('click', function() { var $this = $(this); var $item = $this.parent().parent().parent(); /*获取data-index的属性值*/ var index = $item.data('index'); var checkbox_checked = $(this)[0].checked; task_list[index].checkbox_checked = checkbox_checked; if(checkbox_checked) { update_task(index, { informed: true }); } else { update_task(index, { informed: false }); } }); } /*两个对象的组合*/ function update_task(index, data) { if(!task_list[index]) return; task_list[index] = $.extend({}, task_list[index], data); refresh_task_list(); } /*将task-list重新组合*/ function again_sort() { var new_arr_a = []; var new_arr_b = []; for(var i = 0; i < task_list.length; i++) { if(task_list[i].checkbox_checked == true) { new_arr_a.push(task_list[i]); } else { new_arr_b.push(task_list[i]); } } task_list = new_arr_b.concat(new_arr_a); } /*隐藏或显示已完成的task-item*/ var $finish_task_list_button = $('.finish-task-item-button input[type=button]'); $finish_task_list_button.toggle(function() { hide_finishe_task_list(); }, function() { show_finish_task_list(); }); /*隐藏已完成的项目*/ function hide_finishe_task_list() { $finish_task_list_button.val('显示已完成的项目'); var $task_list = $('.task-list'); var $task_item = $task_list.children(); var class_name; for(var i = 0; i < $task_item.length; i++) { class_name = $task_item[i].classList.value; if(class_name == "task-item-finish") { $task_item[i].style.display = "none"; } } } /*显示已完成的项目*/ function show_finish_task_list() { $finish_task_list_button.val('隐藏已完成的项目'); refresh_task_list(); } /*设定时间提醒*/ function listen_remind_task() { var current_timestamp; var itv = setInterval(function() { for(var i = 0; i < task_list.length; i++) { var item = task_list[i]; var set_timestamp; if(!item || !(item.input_date_content) || item.informed) continue; current_timestamp = new Date().getTime(); set_timestamp = new Date(item.input_date_content).getTime(); if((current_timestamp - set_timestamp) >= 0) { /*提醒*/ update_task(i, { informed: true }); show_msg(item, i); } } }, 300); } /*显示提醒窗口*/ function show_msg(item, num) { var remind_item = item; var i = num; $('.remind-desc-area textarea').val(item.content); $('.remind-task-item').show(500); $('.remind-task-num').show(500); play_video(); $remind_quarter_bell[0].play(); listen_close_button(remind_item, i); listen_change_color(); } function listen_close_button(item, num) { var remind_item = item; var i = num; $('.close-remind-button').on('click', function() { update_task(i, { checkbox_checked: true }); hide_msg(); stop_video(); }); } /*隐藏提醒窗口*/ function hide_msg() { $('.remind-task-item').hide(500); $('.remind-task-num').hide(500); stop_mychange_color(); } /*改变提醒块颜色*/ function listen_change_color() { var change_num = 1; change_color = setInterval(function remind_change_color() { if(change_num % 3 == 1) { $('.remind-task-num').css('background', 'yellow'); change_num = 2; } else if(change_num % 3 == 2) { $('.remind-task-num').css('background', 'blue'); change_num = 3; } else { $('.remind-task-num').css('background', 'red'); change_num = 1; } }, 1000); } function stop_mychange_color() { clearInterval(change_color); } /*关闭音频方法*/ function stop_video() { $remind_quarter_bell.removeAttr('src'); } /*开启音频方法*/ function play_video() { $remind_quarter_bell.attr('src', 'video/remind.mp3'); }});current-address-weather.js
$(function() { var city_text; var $current_location=$('.current-location'); var $current_temperate=$('#current-temperate'); var $current_speed=$('.current-speed'); var $current_speed_footer=$('#current-speed'); var $desc=$('.desc'); var $humidity=$('.humidity') var $max_temperate=$('.max-temperate'); var $min_temperate=$('.min-temperate'); var $weather_title=$('.weather-title'); unit(); function unit(){ get_current_address(); listen_weather_title(); } /*通过百度地图浏览器定位当前位置信息*/ function get_current_address() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r) { if(this.getStatus() == BMAP_STATUS_SUCCESS) { currentLat = r.point.lat; currentLon = r.point.lng; current_lon_lat = currentLon + ',' + currentLat; var pt = new BMap.Point(currentLon, currentLat); var geoc = new BMap.Geocoder(); geoc.getLocation(pt, function(rs) { var addComp = rs.addressComponents; //console.log(addComp); var city = addComp.city; city_text = city.slice(0, -1); get_weather_data(); }); } }); } /*获取天气数据方法*/ function get_weather_data() { weatherurl = "https://api.caiyunapp.com/v2/f34sfOwqSqhQ1LS4/" + current_lon_lat + "/forecast.jsonp"; $.ajax({ url: weatherurl, type: 'GET', dataType: 'JSONP', async: false, success: function(data) { print_data(data); } }); } function print_data(data){ var current_temperate=data.result.hourly.temperature[0].value+'℃'; var current_speed=data.result.hourly.wind[0].speed+'km/h'; var humidity=data.result.hourly.humidity[0].value; var max_temperate=data.result.daily.temperature[0].max+'℃'; var min_temperate=data.result.daily.temperature[0].min+'℃'; $current_location.text(city_text); $current_temperate.html(current_temperate); $current_speed.text(current_speed); $humidity.text(humidity); $max_temperate.text(max_temperate); $min_temperate.text(min_temperate); } function listen_weather_title(){ $weather_title.dblclick(function(){ get_current_address(); window.alert('刷新成功'); }); }});sticker-project.js
$(function() { var stickers_item = []; var $stickers_area = $('.stickers-area'); var $sticker_mask = $('.sticker-mask'); // var $sticker_edit_input_page=$('.sticker-edit-input-page'); var $currency_edit_mask = $('.currency-edit-mask'); var $edit_area; var $no_edit; var $sava_edit; var $sticker_task_item_area; var $edit_complete_button; var $edit_button; var $delete_button; var $body = $('body'); var $ask_delete_mask = $('.ask-delete-mask'); //localStorage.clear('stickers_item'); if(store.get('stickers_item')) { stickers_item = store.get('stickers_item'); } else { store.set('stickers_item', stickers_item); } unit(); /*初始化方法*/ function unit() { stickers_item = store.get('stickers_item'); delete_null_array(); if(!stickers_item.length) return; remind_stickers_list(); } /*点击保存，存储数据方法*/ $('.aaa input[type=button]').on('click', function() { var sticker_task = {}; var sticker_content = $('.aaa textarea[name=sticker]').val(); if(!sticker_content) { alert('请输入便签内容！'); return; } var current_time = get_current_time(); sticker_task.sticker_content = sticker_content; sticker_task.current_time = current_time; sticker_task.uniq = false; stickers_item.push(sticker_task); refresh_stickers_list(); $('.aaa textarea[name=sticker]').val(''); }); /*刷新页面方法*/ function refresh_stickers_list() { delete_null_array(); store.set('stickers_item', stickers_item); remind_stickers_list(); } /*判断task_list中是否有空对象，有的话删除之*/ function delete_null_array() { var newArr = []; for(var i = 0; i < stickers_item.length; i++) { if(stickers_item[i] != null) { newArr.push(stickers_item[i]); } } stickers_item = newArr; } /*渲染页面*/ function remind_stickers_list() { $stickers_area.html(''); for(var i = 0; i < stickers_item.length; i++) { if(stickers_item[i]) { remind_sticker_item(stickers_item[i], i); } } $sticker_task_item_area = $('.sticker-task-item'); listen_sticker_hover(); $edit_button = $('.edit-button'); listen_edit_button(); $delete_button = $('.delete-button'); listen_delete_button(); } /*渲染单个便签*/ function remind_sticker_item(data, index) { var data = data; var index = index; var $sticker_task_item = sticker_task_item(data, index); $stickers_area.append($sticker_task_item); } /*建立便签*/ function sticker_task_item(data, index) { var tpl = '<div class="sticker-task-item" data-index="' + index + '">' + '<div class="sticker-datetime-edit">' + '<div class="sticker-time">' + data.current_time + '</div>' + '<div class="edit-button-area">' + '<input class="edit-input-button" type="button" value="↓" />' + '</div>' + '<div class="hide-button">' + '<span class="edit-button">编辑</span>' + '<hr>' + '<span class="delete-button">删除</span>' + '</div>' + '<div class="clear"></div>' + '</div>' + '<div class="sticker-content">' + '<textarea name="sticker-remind-content" disabled="true" rows="5" cols="25">' + data.sticker_content + '</textarea>' + '</div>' + '</div>'; return $(tpl); } /*建立监听函数*/ function listen_sticker_hover() { $sticker_task_item_area.on({ mouseover: function() { var $this = $(this); var $edit_button_area = $this.children().children('.edit-button-area'); var index = $this.data('index'); $edit_button_area.show(500); $edit_complete_button = $edit_button_area.children('.edit-input-button'); listen_edit_input_button(index); }, mouseleave: function() { var $this = $(this); var $edit_button_area = $this.children().children('.edit-button-area'); var index = $this.data('index'); if(stickers_item[index].uniq) { return; } $edit_button_area.hide(500); } }); } /*监听点击隐藏按钮方法*/ function listen_sticker_mask($hide_button, $edit_button_area, index) { var $hide_button = $hide_button; var $edit_button_area = $edit_button_area; var index = index; $sticker_mask.on('click', function() { stickers_item[index].uniq = false; $sticker_mask.fadeOut(500); refresh_stickers_list(); }); } /*监听edit-input-button点击之后的方法*/ function listen_edit_input_button(index) { var index = index; $edit_complete_button.on('click', function() { var $this = $(this); var $hide_button = $this.parent().next(); $hide_button.show(500); $sticker_mask.fadeIn(500); var $edit_button_area = $this.parent(); stickers_item[index].uniq = true; store.set('stickers_item', stickers_item); listen_sticker_mask($hide_button, $edit_button_area, index); }); } function listen_delete_button() { $delete_button.on('click', function() { var $this = $(this); var $current_sticker = $this.parent().parent().parent(); var index = $current_sticker.data('index'); $ask_delete_mask.fadeIn(500); remind_ask_delete_alert(index); }); } function remind_ask_delete_alert(index) { var index = index; var $ask_delete_alert = get_ask_delete_alert(); $ask_delete_alert.appendTo($body); $ask_delete_alert.show(500); $ask_delete_yes = $('.ask-delete-yes'); $ask_delete_no = $('.ask-delete-no'); listen_ask_delete_button($ask_delete_alert, index); } function listen_ask_delete_button($ask_delete_alert, index) { var $ask_delete_alert = $ask_delete_alert; var index = index; $ask_delete_yes.on('click', function() { delete_sticker(index); $ask_delete_alert.hide(500); $ask_delete_alert.remove(); $ask_delete_mask.fadeOut(500); }); $ask_delete_no.on('click', function() { $ask_delete_alert.remove(); $ask_delete_mask.fadeOut(500); }); } function get_ask_delete_alert() { var tpl = '<div class="ask-delete-alert">' + '<div class="ask-delete-title"><b>温馨提示：</b></div>' + '<div class="ask-delete-theme"><b>确定要删除吗？一旦删除将无法恢复！</b></div>' + '<div class="ask-delete-button-area">' + '<div class="ask-delete-button">' + '<input class="ask-delete-yes" type="button" value="确定" />' + '<input class="ask-delete-no" type="button" value="取消" />' + '</div>' + '<div class="clear"></div>' + '</div>' + '</div>'; return $(tpl); } function delete_sticker(index) { if(!stickers_item[index]) return; delete stickers_item[index]; refresh_stickers_list(); $sticker_mask.fadeOut(); } /*监听编辑按钮方法*/ function listen_edit_button() { $edit_button.on('click', function() { var $this = $(this); console.log($this); var $current_sticker = $this.parent().parent().parent(); var $edit_input_text = $this.parent().parent().next().children('textarea[name=sticker-remind-content]'); var input_content = $edit_input_text.text(); remind_sticker_edit_input_page($current_sticker, input_content); }); } function remind_sticker_edit_input_page($current_sticker, input_content) { var $current_sticker = $current_sticker; var input_content = input_content; var $sticker_edit_input_page = get_sticker_edit_input_page(input_content); $sticker_edit_input_page.appendTo($body); $sticker_edit_input_page.show(500); $currency_edit_mask.fadeIn(500); $no_edit = $('.no-edit'); $sava_edit = $('.save-edit'); $edit_area = $('.edit-area'); listen_no_save_edit($current_sticker, $sticker_edit_input_page); } function get_sticker_edit_input_page(cont) { var tpl = '<div class="sticker-edit-input-page">' + '<div class="edit-title">' + '<span>修改备忘</span>' + '<div class="no-edit">×</div>' + '<div class="clear"></div>' + '</div>' + '<div class="edit-page-textarea">' + '<div>' + '<textarea class="edit-area" rows="5" cols="42">' + cont + '</textarea>' + '</div>' + '</div>' + '<div class="save-area">' + '<div class="save-edit">' + '<input class="save-edit-area" type="button" value="修改" />' + '</div>' + '<div class="clear"></div>' + '</div>' + '</div>'; return $(tpl); } function listen_no_save_edit($current_sticker, $sticker_edit_input_page) { var $current_sticker = $current_sticker; var $sticker_edit_input_page = $sticker_edit_input_page; $no_edit.on('click', function() { $currency_edit_mask.fadeOut(500); $sticker_edit_input_page.remove(); }); $sava_edit.on('click', function() { var index = $current_sticker.data('index'); var textarea_content = $edit_area.val(); console.log(textarea_content); stickers_item[index].sticker_content = textarea_content; stickers_item[index].uniq = false; $sticker_edit_input_page.remove(); $currency_edit_mask.fadeOut(500); $sticker_mask.fadeOut(); refresh_stickers_list(); }); } /*获取当前日期时间*/ function get_current_time() { var current_time = new Date(); var year = current_time.getFullYear(); var month = current_time.getMonth() + 1; var day = current_time.getDate(); var hour = current_time.getHours(); var minute = current_time.getMinutes(); var second = current_time.getSeconds(); var new_minute = check_time(minute); var new_second = check_time(second); var current_time_stamp = year + '-' + month + '-' + day + ' ' + hour + ':' + new_minute + ':' + new_second; return current_time_stamp; } /*检查分钟秒*/ function check_time(time) { if(time < 10) { time = '0' + time; } return time; }});toggle.js
$(function() { /*改变main-task-area中子div显示属性*/ function hidden_main_area() { $('.main-task-area>div').css('display', 'none'); } function hidden_color() { $('.column-menu-task a').css('color', '#ccc'); $('.column-menu-task a').css('background', '#353d40'); } $('.main-menu-home-page').click(function() { hidden_main_area(); hidden_color(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-home-page').css('display', 'block'); }); $('.main-menu-home-task').click(function() { hidden_main_area(); hidden_color(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-task-add').css('display', 'block'); }); $('.main-menu-home-sticker').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); }); $('.main-menu-home-project').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); }); $('.main-menu-home-place').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); }); $('.main-menu-home-label').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); }); $('.main-menu-home-enjoy').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); }); $('.main-menu-home-search').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); }); $('.main-menu-home-other').on('click', function() { hidden_color(); hidden_main_area(); $(this).css('color', '#4a4aff') $(this).css('background', '#2C3032'); $('.m-sticker-area').css('display', 'block'); });});效果图
阅读全文
0 0
- 12.1作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业~~~~~~~~~~~~~
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 算法练习——第一天
- 第一次完成FFmepg的移植，编译ffmpeg4Android
- 聊天机器人（chatbot）终极指南：自然语言处理（NLP）和深度机器学习（Deep Machine Learning）
- ISim P.20131013 (signature 0x7708f090)
- 改无序单链表为有序
- 12.1作业
- TensorFlow 学习
- 整数分解
- 将输入的字符串反序打印。例如输入“I am a student.”输出“student. a am I”。
- Echart 饼图背景颜色设置
- BOM的学习（1）
- 立方变自身
- Git和svn的相关命令对比
- 【分布式系统】RPC实验
