用javascript显示隐藏，添加，删除元素，css动画效果

时间：2022-05-11 15:08:03

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

用javascript显示隐藏，添加，删除元素，css动画效果

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

标签：

相关文章