mo.js实现炫酷的待办事项记事本效果代码
代码语言:html
所属分类:其他
代码描述:mo.js实现炫酷的待办事项记事本效果代码,可以添加事项、勾选是否完成或删除。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body, html { width: 100%; height: 100% } body { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif } ol, ul { list-style: none } hr { border: 0; height: 1px; background: #ccc } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } * { margin: 0; padding: 0; list-style: none; box-sizing: border-box } html, input, select, textarea, button, a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } body{ background: rgb(228, 228, 228); padding: 20px 0 0 0; } div.wrapper { background: #a99a92; margin: 0px auto auto auto; border-radius: 20px; box-shadow: 0 6px 30px 18px rgba(199, 199, 199, 0.75); transition: transform 0.3s ease-in; } div.wrapper:hover{ transform: scale(1.01); } @media only screen and (min-width: 800px){ div.wrapper{ width: 45%; height: 95%; } } @media only screen and (min-width: 900px){ div.wrapper{ width: 40%; height: 95%; } } @media only screen and (min-width: 1100px){ div.wrapper{ width: 35%; height: 95%; } } header{ width:100%; height: 80px; position: relative; top:0; /* needed to keep on top */ bottom:0; padding:15px; z-index: 5; background: #b43f3f; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 2px 8px rgba(41, 10, 77,.5); } header input{ font-family: Arial; width: 100%; font-size: 1rem; height:50px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 25px; border-bottom-right-radius: 25px; float:left; padding-right: 70px; box-sizing: border-box; background: rgba(255,255,255,0.2); border:none; color:#fdfdfd; text-indent: 2%; outline:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; transition: all 0.5s ease; } header input:focus{ background: rgba(35, 14, 87, 0.5); } header input::-moz-placeholder{ color:white; } header div#animationDiv{ /*being used for mojs animation*/ height: 50px; position: absolute; right: 15px; width: 50px; } header button{ width:50px; height: 50px; position: absolute; /*top: 15px; optional, it is so by default and right not needed as applied on parent! :D */ border:0px; outline: 0px; border-color:transparent; outline-style: 0px; border-radius: 50%; background: white; cursor:pointer; z-index: 1; /*to ensure its on top of container*/ box-shadow: -2px 2px 5px rgba(41, 10, 77,.5);; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; transition: all 0.2s ease; } header button:hover{ box-shadow: none; transform: scale(0.9); } header button:active{ background: rgba(191, 165, 223, 0.3); outline: none; outline-width: 0; outline-color: transparent; } input:focus{ } header button svg{ width: 40%; height: 40%; position: relative; top: 5%; fill: #b43f3f; z-index: 5; } header button.rotate{ transform: rotate(180deg); transition: all 0.3s ease; } div.container{ width:100%; float:left; } ul.todo{ list-style: none; } ul.todo li{ background: #fff; color: #b43f3f; padding: 15px; margin: 15px 15px 15px 15px; border-radius: 8px 0 8px 0; box-shadow: -2px 2px 4px rgba(41, 10, 77,.5); transition: all 0.2s ease-in; transition: opacity 0.3s ease-out; transition: opacity 0.2s ease-in; /* transition: height 0.3s ease-in; */ max-height: 50px; opacity: 1; position: relative; /* so we can absolute the buttons*/ } ul.todo li.deleted, ul.todo li.invisible { opacity: 0; } ul.todo li:hover{ transform: scale(0.995); box-shadow: none; background:rgb(255, 241, 219); background: -moz-linear-gradient(left,rgb(255, 231, 194),rgb(255, 244, 228)); background: -webkit-linear-gradient(left,rgb(255, 231, 194),rgb(255, 244, 228)); background: -o-linear-gradient(left,rgb(255, 231, 194),rgb(255, 244, 228)); } ul.todo li:last-of-type{ margin-bottom: 0; } ul.todo li .buttons { position: absolute; width: 100px; height: 50px; top: 0; right: -1%; } ul.todo li .buttons button{ width:30px; height: 30px; margin: 10px 0 0 0; float: left; background:none; position: relative; border: 0px; outline: none; cursor: pointer; box-shadow: none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; } ul.todo li .buttons button:last-of-type::before{ content: ' '; width: 1px; height: 30px; background: #edf0f1; position: absolute; top:0px; left:0; z-index: -20; } ul.todo li .buttons button svg { width: 22px; height: 22px; } ul.todo li .buttons button svg .fill{ transition: all 0.3s ease-out; } ul.todo li .buttons button.deleteButton svg .fill{ fill:#C0CECB; } ul.todo li .buttons button.checkButton svg .fill{ fill:rgb(47, 167, 77); } ul.todo li .buttons button.checkButton svg .noFill{ fill:none; } ul.todo:not(#completed) li .buttons button.checkButton:hover svg .noFill ,ul.todo#completed li .buttons button.checkButton svg .noFill { fill:rgb(84, 201, 113); } ul.todo:not(#completed) li .buttons button.checkButton:hover svg .fill ,ul.todo#completed li .buttons button.checkButton svg .fill{ fill:#fff; } ul.todo li .buttons button.deleteButton:hover svg .fill{ fill: rgb(201, 41, 41); } hr.divider{ width:50%; margin: 20px auto 5px auto; } #completed{ opacity:0.5; } #checkAnimateDiv{ width: 1px; height: 1px; z-index: -10; position: relative; bottom: 12px; left:15px; } </style> </head> <body> <div style="text-align:center;clear:both"> </div> <div class="wrapper"> <header> <input type="text" autofocus="" placeholder="Enter a task..." id="item"> <div id='animationDiv'><button id="add"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"></path></g></svg> </button></div> </header> <div class="container"> <ul class="todo" id="todo"> </ul> <hr class="divider"> <ul class="todo" id="completed"> </ul> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mo.min.js"></script> <script> // Variables var animationDiv= document.getElementById('animationDiv'); var addButton= document.getElementById('add'); var removeSVG= '<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><g><g><path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6L16.3,18.7L16.3,18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/></g><g><g><path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/></g><g><path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8C7.4,10.2,7.7,10,8,10c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/></g><g><path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/></g></g></g></svg>'; var checkSVG = ' <?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><circle cx=11 cy=11 class="noFill" stroke="rgb(47, 167, 77)" r="10" width="23" height="23"/><g><path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/></g></svg>'; var itemTextBox =document.getElementById('item') completedList= docum.........完整代码请登录后点击上方下载按钮下载查看
网友评论0