<html5+css3+js>用javascript显示隐藏，添加，删除元素，css动画效果

来源：互联网发布：武威seo自动优化软件编辑：程序博客网时间：2024/05/16 06:37

(《javascript&jquery交互式web前端开发》学习记录)

HTML5:

<!doctype html><html><head><meta charset="UTF-8"><title>To Do List</title><link rel="stylesheet" href="example.css" /></head><body><div id="page"><h1 id="header">ListKing</h1><h2>Buy Groceries<span id="counter"></span></h2><ul><li><em>fresh</em> figs</li>    <li>honey</li>    <li>pine nuts</li>    <li>balsamic vinegar</li></ul><div id="newItemButton"><button href="#" id="showForm">new item</button></div>    <form id="newItemForm"><input type="text" id="itemDescription" placeholder="Type description..." /><input type="submit" id="add" value="add" />    </form></div><script src="jquery-1.11.0.js"></script><script src="example.js"></script></body></html>

CSS3:

@charset "UTF-8";/* CSS Document */body{background:#000000;color:#FFFFFF;font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;}#page{background:#353434;margin:0 auto;padding:0;max-width:480px;}h1{background:url(kinglogo.png) no-repeat center;text-indent:-1000%;overflow:hidden;height:80px;width:100px;margin:0 auto;padding:10px 0 0 0;}h2{text-align:center;text-transform:uppercase;letter-spacing:.1em;font-size:180%;font-weight:500;}ul{margin:0;padding:0;}li{display:block;background-color:#DF955B;border-top:1px solid #E9A54A;border-bottom:1px solid #C48C40;padding:15px 20px;text-transform:capitalize;font-size:150%;text-shadow:1px 1px 2px #000000;}.complete{background-image:url(icon-trash.png);background-repeat:no-repeat;background-position:right center;background-color:#848484;border-top:1px solid #A4A4A4;border-bottom:1px solid #646262;}button,input[type='submit']{background-color:#EA8F91;border:none;border-radius:5px;padding:8px;font-size:120%;color:#FFD8D9;text-transform:uppercase;float:right;}#newItemButton{padding:10px 20px 40px;}input[type='text']{background-color:#C9C9C9;border:1px solid #C9C9C9;width:80%;font-size:120%;border-radius:5px;padding:3px;}input[type='text']:focus{background-color:#FFFFFF;border:1px solid #FFFFFF;}#counter{display:inline-block;position:relative;bottom:10px;background-color:#FFFFFF;color:#353434;padding:0 3px 0 4px;margin-left:10px;border-radius:20px;font-size:60%;}#newItemButton{padding:10px 10px 50px;}#newItemForm{padding:10px 10px 20px;}

JAVASCRIPT:

// JavaScript Document$(function(){var $list=$('ul');//购物清单计数器function updateCounter(){var $items=$('li[class!=complete]').length;$('#counter').text($items);}updateCounter();//显示添加新列表项的表格var $newItemButton=$('#newItemButton');var $newItemForm=$('#newItemForm');$newItemButton.show();$newItemForm.hide();$('#showForm').on('click',function(){$newItemButton.hide();$newItemForm.show();});//添加新的列表项$newItemForm.on('submit',function(e){e.preventDefault();var $text=$('input:text').val();$list.append('<li>'+$text+'</li>');$('input:text').val('');updateCounter();});//点击－完成var item='';$list.on('click','li',function(){var $this=$(this);var $complete=$this.hasClass('complete');if($complete===true){$this.animate({opacity:0.0,paddingLeft:'+=180'},500,'swing',function(){$this.remove();});}else{item=$this.text();$this.remove();$list.append('<li class=\"complete\">'+item+'</li>').hide().fadeIn(300);updateCounter();}});});

代码下载：http://download.csdn.net/detail/qq_17615475/9366798

1 0