Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
To-Do List
Add a To-Do
Delete a To-Do
Check off a To-Do
css
body{ font-family: 'Roboto', sans-serif; background: linear-gradient(to left, #c0c0aa , #1ce); } h1 { background: #2980b9; color: white; margin: 0; padding: 10px 20px; text-transform: uppercase; font-size: 24px; font-weight: normal; } h1 i { float: right; cursor: pointer; } #container { width: 360px; margin: 100px auto; box-shadow: 0 0 3px rgba(0,0,0,0.5); background: #f7f7f7; } ul { list-style: none; margin: 0; padding: 0; } #container li { cursor: pointer; background: white; height: 40px; line-height: 40px; color: #666; } #container li:nth-child(2n) { background: #f7f7f7; } .completed { text-decoration: line-through; color: gray; } input { font-size: 18px; background-color: #f7f7f7; width: 100%; padding: 13px 13px 13px 20px; box-sizing: border-box; color: #2980b9; border: 3px solid rgba(0,0,0,0); } .slide { display: none; } input:focus{ background: white; outline: none; border: 3px solid #2980b9; } li span { background: #e74c3c; color: white; height: 40px; display: inline-block; margin-right: 20px; width: 0; transition: all .5s; text-align: center; opacity: 0; } li:hover span { width: 40px; opacity: 1;
JavaScript
$(document).on("click", "li", function(){ $(this).toggleClass("completed"); }); $(document).on("click", "li span", function(){ $(this).parent().fadeOut(function(){ $(this).remove(); }); }) $("input[type='text']").on("keypress", function(){ if(event.which == 13){ var newItem = "
" + $(this).val() + "
"; $("ul").append(newItem); $(this).val(""); } }); $("h1 i").click(function(){ $(".slide").slideToggle(); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>待办事项列表-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号